<script setup lang="ts">
import { reactive, toRaw, watch } from 'vue';
import { ProModal } from 'antdv-pro-modal';
import { message, Form } from 'ant-design-vue/es';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { getOAMFile, saveOAMFile } from '@/api/ne/neInfo';
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  /**网元ID */
  neId: {
    type: String,
    default: '',
  },
  neType: {
    type: String,
    default: '',
  },
});

/**对话框对象信息状态类型 */
type ModalStateType = {
  /**新增框或修改框是否显示 */
  openByEdit: boolean;
  /**标题 */
  title: string;
  /**是否同步 */
  sync: boolean;
  /**表单数据 */
  from: Record<string, any>;
  /**确定按钮 loading */
  confirmLoading: boolean;
};

/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
  openByEdit: false,
  title: 'OAM Configuration',
  sync: true,
  from: {
    omcIP: '',
    oamEnable: true,
    oamPort: 33030,
    snmpEnable: true,
    snmpPort: 4957,
    kpiEnable: true,
    kpiTimer: 60,
  },
  confirmLoading: false,
});

/**对话框内表单属性和校验规则 */
const modalStateFrom = Form.useForm(
  modalState.from,
  reactive({
    kpiTimer: [
      {
        required: true,
        message: t('views.ne.neInfo.oam.kpiTimerPlease'),
      },
    ],
  })
);

/**
 * 对话框弹出显示为 新增或者修改
 * @param neType 网元类型
 * @param neId 网元ID
 */
function fnModalVisibleByTypeAndId(neType: string, neId: string) {
  const hide = message.loading(t('common.loading'), 0);
  getOAMFile(neType, neId)
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS) {
        const data = res.data;
        Object.assign(modalState.from, {
          omcIP: data.oamConfig[data.oamConfig.ipType],
          oamEnable: data.oamConfig.enable,
          oamPort: data.oamConfig.port,
          snmpEnable: data.snmpConfig.enable,
          snmpPort: data.snmpConfig.port,
          kpiEnable: data.kpiConfig.enable,
          kpiTimer: data.kpiConfig.timer,
        });
        modalState.title = t('views.ne.neInfo.oam.title');
        modalState.openByEdit = true;
      } else {
        message.error(res.msg, 3);
      }
    })
    .finally(() => {
      modalState.confirmLoading = false;
      hide();
    });
}

/**
 * 对话框弹出确认执行函数
 * 进行表达规则校验
 */
function fnModalOk() {
  modalStateFrom
    .validate()
    .then(e => {
      modalState.confirmLoading = true;
      const hide = message.loading(t('common.loading'), 0);
      const from = toRaw(modalState.from);
      saveOAMFile({
        neType: props.neType,
        neId: props.neId,
        content: from,
        sync: modalState.sync,
      })
        .then(res => {
          if (res.code === RESULT_CODE_SUCCESS) {
            message.success(t('common.operateOk'), 3);
            emit('ok');
            fnModalCancel();
          } else {
            message.error({
              content: `${res.msg}`,
              duration: 3,
            });
          }
        })
        .finally(() => {
          hide();
          modalState.confirmLoading = false;
        });
    })
    .catch(e => {
      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
    });
}

/**
 * 对话框弹出关闭执行函数
 * 进行表达规则校验
 */
function fnModalCancel() {
  modalState.openByEdit = false;
  modalState.confirmLoading = false;
  modalStateFrom.resetFields();
  emit('cancel');
  emit('update:open', false);
}

/**监听是否显示，初始数据 */
watch(
  () => props.open,
  val => {
    if (val) {
      if (props.neType && props.neId) {
        fnModalVisibleByTypeAndId(props.neType, props.neId);
      }
    }
  }
);
</script>

<template>
  <ProModal
    :drag="true"
    :destroyOnClose="true"
    :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
    :keyboard="false"
    :mask-closable="false"
    :open="modalState.openByEdit"
    :title="modalState.title"
    :confirm-loading="modalState.confirmLoading"
    @ok="fnModalOk"
    @cancel="fnModalCancel"
  >
    <a-form
      name="modalStateFrom"
      layout="horizontal"
      :label-col="{ span: 12 }"
      :labelWrap="true"
    >
      <a-form-item
        :label="t('views.ne.neInfo.oam.sync')"
        name="sync"
        :label-col="{ span: 6 }"
        :labelWrap="true"
      >
        <a-switch
          :checked-children="t('common.switch.open')"
          :un-checked-children="t('common.switch.shut')"
          v-model:checked="modalState.sync"
        ></a-switch>
      </a-form-item>

      <a-collapse class="collapse" ghost>
        <a-collapse-panel header="OAM">
          <a-row>
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="t('views.ne.neInfo.oam.oamEnable')"
                name="oamEnable"
              >
                <a-switch
                  :checked-children="t('common.switch.open')"
                  :un-checked-children="t('common.switch.shut')"
                  v-model:checked="modalState.from.oamEnable"
                ></a-switch>
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="t('views.ne.neInfo.oam.oamPort')"
                name="oamPort"
                v-bind="modalStateFrom.validateInfos.oamPort"
              >
                <a-input-number
                  :min="3000"
                  :max="65535"
                  :step="1"
                  :maxlength="5"
                  v-model:value="modalState.from.oamPort"
                  style="width: 100%"
                ></a-input-number>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item
            :label="t('views.ne.neInfo.oam.omcIP')"
            name="omcIP"
            :label-col="{ span: 6 }"
            :labelWrap="true"
          >
            <a-input
              v-model:value="modalState.from.omcIP"
              :maxlength="128"
            ></a-input>
          </a-form-item>
        </a-collapse-panel>
        <a-collapse-panel header="SNMP">
          <a-row>
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="t('views.ne.neInfo.oam.snmpEnable')"
                name="snmpEnable"
              >
                <a-switch
                  :checked-children="t('common.switch.open')"
                  :un-checked-children="t('common.switch.shut')"
                  v-model:checked="modalState.from.snmpEnable"
                ></a-switch>
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="t('views.ne.neInfo.oam.snmpPort')"
                name="snmpPort"
                v-bind="modalStateFrom.validateInfos.snmpPort"
              >
                <a-input-number
                  :min="3000"
                  :max="65535"
                  :step="1"
                  :maxlength="5"
                  v-model:value="modalState.from.snmpPort"
                  style="width: 100%"
                ></a-input-number>
              </a-form-item>
            </a-col>
          </a-row>
        </a-collapse-panel>
        <a-collapse-panel header="KPI">
          <a-row>
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="t('views.ne.neInfo.oam.kpiEnable')"
                name="kpiEnable"
              >
                <a-switch
                  :checked-children="t('common.switch.open')"
                  :un-checked-children="t('common.switch.shut')"
                  v-model:checked="modalState.from.kpiEnable"
                ></a-switch>
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="t('views.ne.neInfo.oam.kpiTimer')"
                name="kpiTimer"
                v-bind="modalStateFrom.validateInfos.kpiTimer"
              >
                <a-input-number
                  :min="5"
                  :max="3600"
                  :step="1"
                  :maxlength="4"
                  v-model:value="modalState.from.kpiTimer"
                  style="width: 100%"
                ></a-input-number>
              </a-form-item>
            </a-col>
          </a-row>
        </a-collapse-panel>
      </a-collapse>
    </a-form>
  </ProModal>
</template>

<style lang="less" scoped>
.collapse :deep(.ant-collapse-item) > .ant-collapse-header {
  padding-left: 0;
  padding-right: 0;
}
.collapse-header {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
