<script setup lang="ts">
import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
import { getPara5GFilee, listNeInfo, savePara5GFile } from '@/api/ne/neInfo';
import useNeInfoStore from '@/store/modules/neinfo';
const { t } = useI18n();

/**对象信息信息状态类型 */
type StateType = {
  /**保存选择同步到网元窗 */
  visible: boolean;
  /**网元选择 */
  neSelectOtions: any[];
  /**同步到网元 */
  sync: boolean;
  syncNe: string[];
  syncMsg: string;
  /**表单数据 */
  from: Record<string, any>;
  /**确定按钮 loading */
  confirmLoading: boolean;
};

/**对象信息状态 */
let state: StateType = reactive({
  visible: false,
  neSelectOtions: [],
  sync: false,
  syncNe: [],
  syncMsg: '',
  from: {
    basic: {
      plmnId: {
        mcc: '001',
        mnc: '01',
      },
      tac: '4388',
      snssai: {
        sst: '1',
        sd: '000001',
      },
      dnn_data: 'internet',
      dnn_ims: 'ims',
    },
    external: {
      amfn2_ip: '192.168.5.60',
      upfn3_ip: '192.168.8.190/24',
      upfn3_gw: '192.168.1.1',
      upfn6_ip: '192.168.8.191/24',
      upfn6_gw: '192.168.1.1',
      ue_pool: '10.2.1.0/24',
    },
    sbi: {
      omc_ip: '172.60.5.100',
      ims_ip: '172.60.5.110',
      amf_ip: '172.60.5.120',
      ausf_ip: '172.60.5.130',
      udm_ip: '172.60.5.140',
      adb_ip: '172.60.5.140',
      smf_ip: '172.60.5.150',
      pcf_ip: '172.60.5.160',
      nssf_ip: '172.60.5.170',
      nrf_ip: '172.60.5.180',
      upf_ip: '172.60.5.190',
      mme_ip: '172.60.5.220',
      n3iwf_ip: '172.60.5.230',
    },
  },
  confirmLoading: false,
});

/**对话框弹出确认执行函数*/
function fnModalOk() {
  if (state.confirmLoading) return;
  state.confirmLoading = true;
  savePara5GFile({
    content: toRaw(state.from),
    syncNe: state.sync ? state.syncNe : [],
  })
    .then(res => {
      if (state.sync) {
        state.syncMsg = res.msg;
      } else {
        message.success('Save Success');
      }
    })
    .finally(() => {
      state.confirmLoading = false;
    });
}

/**对话框弹出关闭执行函数*/
function fnModalCancel() {
  state.visible = false;
  state.sync = false;
  state.syncNe = [];
  state.syncMsg = '';
}

/**保存文件数据*/
function fnSaveData() {
  state.visible = true;
}

/**获取文件数据*/
function fnGetData() {
  state.confirmLoading = true;
  Promise.all([
    getPara5GFilee(),
    listNeInfo({
      pageNum: 1,
      pageSize: 20,
    }),
  ]).then(resArr => {
    // 已保存的配置
    if (resArr[0].code === RESULT_CODE_SUCCESS) {
      Object.assign(state.from, resArr[0].data);
    }
    // 填充固定网元类型的ip
    if (
      resArr[1].code === RESULT_CODE_SUCCESS &&
      Array.isArray(resArr[1].rows)
    ) {
      for (const item of resArr[1].rows) {
        switch (item.neType) {
          case 'IMS':
            state.from.sbi.ims_ip = item.ip;
            break;
          case 'AMF':
            state.from.sbi.amf_ip = item.ip;
            break;
          case 'AUSF':
            state.from.sbi.ausf_ip = item.ip;
            break;
          case 'UDM':
            state.from.sbi.udm_ip = item.ip;
            state.from.sbi.adb_ip = item.ip;
            break;
          case 'SMF':
            state.from.sbi.smf_ip = item.ip;
            break;
          case 'PCF':
            state.from.sbi.pcf_ip = item.ip;
            break;
          case 'NSSF':
            state.from.sbi.nssf_ip = item.ip;
            break;
          case 'NRF':
            state.from.sbi.nrf_ip = item.ip;
            break;
          case 'UPF':
            state.from.sbi.upf_ip = item.ip;
            break;
          case 'N3IWF':
            state.from.sbi.n3iwf_ip = item.ip;
            break;
        }
      }
    }
    state.confirmLoading = false;
  });
}

onMounted(() => {
  useNeInfoStore()
    .fnNelist()
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
        for (const row of res.data) {
          state.neSelectOtions.push({
            label: `[${row.neType} ${row.neId}] ${row.neName}`,
            value: `${row.neType}@${row.neId}`,
          });
        }
      } else {
        message.warning({
          content: t('common.noData'),
          duration: 2,
        });
      }
    })
    .finally(() => {
      // 获取文件数据
      fnGetData();
    });
});
</script>

<template>
  <PageContainer>
    <a-card :bordered="false">
      <!-- 插槽-卡片左侧侧 -->
      <template #title>
        <a-form layout="inline" :label-col="{ span: 6 }" :label-wrap="true">
          <a-form-item label="OMC" name="OMC">
            <a-input
              v-model:value="state.from.sbi.omc_ip"
              allow-clear
              :placeholder="t('common.inputPlease')"
              :maxlength="50"
            >
            </a-input>
          </a-form-item>
        </a-form>
      </template>

      <!-- 插槽-卡片右侧 -->
      <template #extra>
        <a-space :size="8" align="center">
          <a-button
            type="default"
            :disabled="state.confirmLoading"
            @click.prevent="fnGetData()"
          >
            <template #icon><ReloadOutlined /></template>
            Reload
          </a-button>
          <a-button
            type="primary"
            :loading="state.confirmLoading"
            @click="fnSaveData()"
          >
            <template #icon><SaveOutlined /></template>
            Save
          </a-button>
        </a-space>
      </template>

      <a-form
        name="para5GFileeFrom"
        layout="horizontal"
        :label-col="{ span: 6 }"
        :label-wrap="true"
      >
        <a-divider orientation="left">Basic</a-divider>
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="DNN DATA" name="basic.dnn_data">
              <a-input
                v-model:value="state.from.basic.dnn_data"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="DNN IMS" name="basic.dnn_ims">
              <a-input
                v-model:value="state.from.basic.dnn_ims"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="6" :xs="24">
            <a-form-item
              label="MCC"
              name="basic.plmnId.mcc"
              :label-col="{ span: 13 }"
              :label-wrap="true"
            >
              <a-input
                v-model:value="state.from.basic.plmnId.mcc"
                placeholder="1-65535"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="6" :xs="24">
            <a-form-item label="MNC" name="basic.plmnId.mnc">
              <a-input
                v-model:value="state.from.basic.plmnId.mnc"
                placeholder="1-65535"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="6" :xs="24">
            <a-form-item
              label="SST"
              name="basic.snssai.sst"
              :label-col="{ span: 13 }"
              :label-wrap="true"
            >
              <a-input-number
                v-model:value="state.from.basic.snssai.sst"
                :min="1"
                :max="3"
                placeholder="1-3"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="6" :xs="24">
            <a-form-item label="SD" name="basic.snssai.sd">
              <a-input
                v-model:value="state.from.basic.snssai.sd"
                placeholder="1-65535"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="TAC" name="basic.tac">
              <a-input
                v-model:value="state.from.basic.tac"
                placeholder="1-65535"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>

        <a-divider orientation="left">External</a-divider>
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="N2_IP" name="external.amfn2_ip">
              <a-input
                v-model:value="state.from.external.amfn2_ip"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="UE_POOL" name="external.ue_pool">
              <a-input
                v-model:value="state.from.external.ue_pool"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
          </a-col>

          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="N6_IP" name="external.upfn6_ip">
              <a-input
                v-model:value="state.from.external.upfn6_ip"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
            <a-form-item label="N6_GW" name="external.upfn6_gw">
              <a-input
                v-model:value="state.from.external.upfn6_gw"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="N3_IP" name="external.upfn3_ip">
              <a-input
                v-model:value="state.from.external.upfn3_ip"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
            <a-form-item label="N3_GW" name="external.upfn3_gw">
              <a-input
                v-model:value="state.from.external.upfn3_gw"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <!-- 保存选择同步网元 -->
    <a-modal
      width="500px"
      :keyboard="false"
      :mask-closable="false"
      :visible="state.visible"
      title="保存信息"
      :confirm-loading="state.confirmLoading"
      @ok="fnModalOk"
      @cancel="fnModalCancel"
    >
      <a-form
        name="syncNeModal"
        layout="horizontal"
        :label-col="{ span: 5 }"
        :label-wrap="true"
      >
        <a-form-item label="Sync To NE" name="sync">
          <a-switch
            :checked-children="t('common.switch.open')"
            :un-checked-children="t('common.switch.shut')"
            v-model:checked="state.sync"
            :disabled="state.confirmLoading"
          ></a-switch>
        </a-form-item>
        <a-form-item label="Select NE" name="syncNe" v-if="state.sync">
          <a-select
            v-model:value="state.syncNe"
            mode="multiple"
            :placeholder="t('common.selectPlease')"
            :max-tag-count="3"
            :options="state.neSelectOtions"
          >
            <template #maxTagPlaceholder="omittedValues">
              <span>+ {{ omittedValues.length }} ...</span>
            </template>
          </a-select>
        </a-form-item>
        <a-form-item label="Sync Msg" name="syncMsg" v-if="state.syncMsg">
          <a-textarea
            :disabled="true"
            :value="state.syncMsg"
            :auto-size="{ minRows: 2, maxRows: 8 }"
            style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </PageContainer>
</template>

<style lang="less" scoped></style>
