<script setup lang="ts">
import { ref, watch } from 'vue';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const emit = defineEmits(['update:data']);
const props = defineProps({
  /**表单数据 */
  data: {
    type: Object,
    required: true,
  },
  /**根据网元显示配置项 */
  ne: {
    type: Object,
    default: () => ({
      amf: false,
      upf: false,
      ims: false,
      mme: false,
    }),
  },
});

/**表单信息状态 */
let fromState = ref({
  basic: {
    plmnId: {
      mcc: '001',
      mnc: '01',
    },
    tac: '4388',
    snssai: {
      sst: '1',
      sd: '000001',
    },
    dnn_data: 'internet',
    dnn_ims: 'ims',
  },
  external: {
    amfn2_ip: '192.168.8.120',
    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',
    // 非指定属性
    mmes1_ip: '192.168.8.220/20',
    mmes10_ip: '172.16.5.221/24',
    mmes11_ip: '172.16.5.220/24',
    ims_sip_ip: '192.168.8.110',
    upf_type: 'LightUPF',
    upf_driver_type: 'vmxnet3',
    upfn3_card_name: 'eth0',
    upfn3_pci: '0000:00:00.0',
    upfn3_mac: '00:00:00:00:00:00',
    upfn6_card_name: 'eth0',
    upfn6_pci: '0000:00:00.0',
    upfn6_mac: '00:00:00:00:00:00',
  },
  sbi: {
    omc_ip: '172.16.5.100',
    ims_ip: '172.16.5.110',
    amf_ip: '172.16.5.120',
    ausf_ip: '172.16.5.130',
    udm_ip: '172.16.5.140',
    db_ip: '0.0.0.0',
    smf_ip: '172.16.5.150',
    pcf_ip: '172.16.5.160',
    nssf_ip: '172.16.5.170',
    nrf_ip: '172.16.5.180',
    upf_ip: '172.16.5.190',
    lmf_ip: '172.16.5.200',
    nef_ip: '172.16.5.210',
    mme_ip: '172.16.5.220',
    n3iwf_ip: '172.16.5.230',
    smsc_ip: '172.16.5.240',
  },
});

/**监听数据 */
watch(
  () => fromState,
  val => {
    if (val) emit('update:data', val);
  },
  { deep: true, immediate: true }
);
</script>

<template>
  <a-form
    name="para5GFileeFrom"
    layout="horizontal"
    :label-col="{ span: 8 }"
    :label-wrap="true"
  >
    <a-row>
      <a-col :lg="16" :md="16" :xs="24">
        <a-divider orientation="left">Basic</a-divider>
        <a-row>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="DNN_DATA" name="basic.dnn_data">
              <a-input
                v-model:value="fromState.basic.dnn_data"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title> DNN </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="MCC" name="basic.plmnId.mcc">
              <a-input
                v-model:value="fromState.basic.plmnId.mcc"
                placeholder="1-65535"
              ></a-input>
            </a-form-item>
            <a-form-item label="SST" name="basic.snssai.sst">
              <a-input-number
                v-model:value="fromState.basic.snssai.sst"
                :min="1"
                :max="3"
                placeholder="1-3"
                style="width: 100%"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title> 1-3 </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </a-input-number>
            </a-form-item>
            <a-form-item label="TAC" name="basic.tac">
              <a-input
                v-model:value="fromState.basic.tac"
                placeholder="1-65535"
              ></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="fromState.basic.dnn_ims"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
            <a-form-item label="MNC" name="basic.plmnId.mnc">
              <a-input
                v-model:value="fromState.basic.plmnId.mnc"
                placeholder="1-65535"
              ></a-input>
            </a-form-item>
            <a-form-item label="SD" name="basic.snssai.sd">
              <a-input
                v-model:value="fromState.basic.snssai.sd"
                placeholder="1-65535"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>

      <a-col :lg="8" :md="8" :xs="24">
        <a-divider orientation="left">OMC</a-divider>
        <a-row>
          <a-col :lg="24" :md="24" :xs="24">
            <a-form-item
              label="OMC_IP"
              name="sbi.omc_ip"
              :required="true"
              :validate-on-rule-change="false"
              :validateTrigger="[]"
            >
              <a-input
                v-model:value="fromState.sbi.omc_ip"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title>
                      Network Elemment send data tu EMS IP
                    </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <template v-if="props.ne.amf">
          <a-divider orientation="left">AMF</a-divider>
          <a-row>
            <a-col :lg="24" :md="24" :xs="24">
              <a-form-item label="N2_IP" name="external.amfn2_ip">
                <a-input
                  v-model:value="fromState.external.amfn2_ip"
                  allow-clear
                  :placeholder="t('common.inputPlease')"
                  :maxlength="50"
                >
                  <template #prefix>
                    <a-tooltip placement="topLeft">
                      <template #title> AMF N2 </template>
                      <InfoCircleOutlined
                        style="opacity: 0.45; color: inherit"
                      />
                    </a-tooltip>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </template>
      </a-col>

      <a-col :lg="16" :md="16" :xs="24" v-if="props.ne.upf">
        <a-divider orientation="left">UPF</a-divider>
        <a-row>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              label="UPF_TYPE"
              name="external.upf_type"
              help="Install of Standard or Light"
            >
              <a-select
                v-model:value="fromState.external.upf_type"
                :placeholder="t('common.selectPlease')"
              >
                <a-select-option value="StandardUPF">
                  StandardUPF
                </a-select-option>
                <a-select-option value="LightUPF">LightUPF</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col
            :lg="12"
            :md="12"
            :xs="24"
            v-if="fromState.external.upf_type === 'LightUPF'"
          >
            <a-form-item label="UE_POOL" name="external.ue_pool">
              <a-input
                v-model:value="fromState.external.ue_pool"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title> UE IP and maxk </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col
            :lg="12"
            :md="12"
            :xs="24"
            v-if="fromState.external.upf_type === 'StandardUPF'"
          >
            <a-form-item label="DRIVER_TYPE" name="external.upf_driver_type">
              <a-select
                v-model:value="fromState.external.upf_driver_type"
                :placeholder="t('common.selectPlease')"
              >
                <a-select-option value="vmxnet3">vmxnet3</a-select-option>
                <a-select-option value="dpdk">dpdk</a-select-option>
                <a-select-option value="host">host</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row v-if="fromState.external.upf_type === 'LightUPF'">
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="N3_IP" name="external.upfn3_ip">
              <a-input
                v-model:value="fromState.external.upfn3_ip"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title> netwrok ip </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="N3_GW" name="external.upfn3_gw">
              <a-input
                v-model:value="fromState.external.upfn3_gw"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title> geteway </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row v-if="fromState.external.upf_type === 'StandardUPF'">
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="N3_IP" name="external.upfn3_ip">
              <a-input
                v-model:value="fromState.external.upfn3_ip"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title> netwrok ip </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="N3_GW" name="external.upfn3_gw">
              <a-input
                v-model:value="fromState.external.upfn3_gw"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title> geteway </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="N3_PCI" name="external.upfn3_pci">
              <a-input
                v-model:value="fromState.external.upfn3_pci"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title>
                      use `ip a` show info, to inet name
                      <br />
                      or <br />
                      use `lshw -class network -businfo` show device name
                    </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="N3_MAC" name="external.upfn3_mac">
              <a-input
                v-model:value="fromState.external.upfn3_mac"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title>
                      use `ip a` show info, to inet ip
                    </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="N3_NIC_NAME" name="external.upfn3_card_name">
              <a-input
                v-model:value="fromState.external.upfn3_card_name"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title>
                      use `ip a` show info, to inet name
                      <br />
                      or <br />
                      use `lshw -class network -businfo` show device name
                    </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </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="fromState.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="fromState.external.upfn6_gw"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
            <a-form-item label="N6_PCI" name="external.upfn6_pci">
              <a-input
                v-model:value="fromState.external.upfn6_pci"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
            <a-form-item label="N6_MAC" name="external.upfn6_mac">
              <a-input
                v-model:value="fromState.external.upfn6_mac"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
              </a-input>
            </a-form-item>
            <a-form-item label="N6_NIC_NAME" name="external.upfn6_card_name">
              <a-input
                v-model:value="fromState.external.upfn6_card_name"
                allow-clear
                :placeholder="t('common.inputPlease')"
                :maxlength="50"
              >
                <template #prefix>
                  <a-tooltip placement="topLeft">
                    <template #title>
                      use `ip a` show info, to inet name
                      <br />
                      or <br />
                      use `lshw -class network -businfo` show device name
                    </template>
                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>

      <a-col :lg="8" :md="8" :xs="24">
        <template v-if="props.ne.ims">
          <a-divider orientation="left">IMS</a-divider>
          <a-row>
            <a-col :lg="24" :md="24" :xs="24">
              <a-form-item label="SIP_IP" name="external.ims_sip_ip">
                <a-input
                  v-model:value="fromState.external.ims_sip_ip"
                  allow-clear
                  :placeholder="t('common.inputPlease')"
                  :maxlength="50"
                >
                  <template #prefix>
                    <a-tooltip placement="topLeft">
                      <template #title> IMS SIP </template>
                      <InfoCircleOutlined
                        style="opacity: 0.45; color: inherit"
                      />
                    </a-tooltip>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </template>

        <template v-if="props.ne.mme">
          <a-divider orientation="left">MME</a-divider>
          <a-row>
            <a-col :lg="24" :md="24" :xs="24">
              <a-form-item label="S1_IP" name="external.mmes1_ip">
                <a-input
                  v-model:value="fromState.external.mmes1_ip"
                  allow-clear
                  :placeholder="t('common.inputPlease')"
                  :maxlength="50"
                >
                  <template #prefix>
                    <a-tooltip placement="topLeft">
                      <template #title>
                        MME binded interface for S1-C or S1-MME communication
                        (S1AP), can be ethernet interface, virtual ethernet
                        interface, we don't advise wireless interfaces
                      </template>
                      <InfoCircleOutlined
                        style="opacity: 0.45; color: inherit"
                      />
                    </a-tooltip>
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item label="S10_IP" name="external.mmes10_ip">
                <a-input
                  v-model:value="fromState.external.mmes10_ip"
                  allow-clear
                  :placeholder="t('common.inputPlease')"
                  :maxlength="50"
                >
                  <template #prefix>
                    <a-tooltip placement="topLeft">
                      <template #title> Interface </template>
                      <InfoCircleOutlined
                        style="opacity: 0.45; color: inherit"
                      />
                    </a-tooltip>
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item label="S11_IP" name="external.mmes11_ip">
                <a-input
                  v-model:value="fromState.external.mmes11_ip"
                  allow-clear
                  :placeholder="t('common.inputPlease')"
                  :maxlength="50"
                >
                  <template #prefix>
                    <a-tooltip placement="topLeft">
                      <template #title>
                        MME binded interface for S11-U communication (GTPV1-U)
                      </template>
                      <InfoCircleOutlined
                        style="opacity: 0.45; color: inherit"
                      />
                    </a-tooltip>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </template>
      </a-col>
    </a-row>
  </a-form>
</template>

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