<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="55rem"
      @register="register"
      :title="getTitle"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :showOkBtn="isShowOkBtnFalse"
    >
      <div class="step-form-form">
        <a-steps :current="current">
          <a-step title="设备配置" />
          <a-step title="传输配置" />
          <a-step title="告警配置" />
          <a-step title="告警通知" />
        </a-steps>
      </div>
      <div class="mt-5">
        <div v-show="current === 0">
          <DeviceProfileStep1 ref="DeviceProfileStep1Ref" @next="handleStepNext1"
        /></div>

        <div v-show="current === 1">
          <DeviceProfileStep2
            ref="DeviceProfileStep2Ref"
            @prev="handleStepPrev"
            @next="handleStep2Next"
        /></div>

        <div v-show="current === 2">
          <DeviceProfileStep3
            ref="DeviceProfileStep3Ref"
            @prev="handleStepPrev"
            @next="handleStep3Next"
            @redo="handleRedo"
            :getAllStepThreeData="editData"
            :isAddOrEdit="isStatus"
            :isShowAddRule="isShowRule"
        /></div>
        <div v-show="current === 3">
          <DeviceProfileStep4 ref="DeviceProfileStep4Ref" @prev="handleStepPrev" />
        </div>
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, getCurrentInstance, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import DeviceProfileStep1 from '/@/views/device/profile/step/DeviceProfileStep1.vue';
  import DeviceProfileStep2 from '/@/views/device/profile/step/DeviceProfileStep2.vue';
  import DeviceProfileStep3 from '/@/views/device/profile/step/DeviceProfileStep3.vue';
  import DeviceProfileStep4 from '/@/views/device/profile/step/DeviceProfileStep4.vue';
  import { Steps } from 'ant-design-vue';
  import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
  import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    name: 'DeviceModal',
    components: {
      BasicModal,
      DeviceProfileStep1,
      DeviceProfileStep2,
      DeviceProfileStep3,
      DeviceProfileStep4,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
    },
    props: {
      userData: { type: Object },
    },
    emits: [
      'success',
      'register',
      'handleStepPrev',
      'handleStep3Next',
      'handleRedo',
      'handleStep2Next',
    ],
    setup(_, { emit }) {
      const { proxy } = getCurrentInstance();
      const DeviceProfileStep1Ref = ref(null);
      const DeviceProfileStep2Ref = ref(null);
      const DeviceProfileStep3Ref = ref(null);
      const DeviceProfileStep4Ref = ref(null);
      const { createMessage } = useMessage();
      const postDeviceConfogData: any = ref({});
      const getStepOneData: any = ref({});
      const getStepTwoData: any = ref({});
      const getStepThreeData = ref([]);
      const editData = ref({});
      let getBackendData = reactive({});
      let getStepFourData = reactive({});
      const alarmProfileData = reactive({
        alarmProfile: {
          alarmContactId: '',
          messageMode: '',
        },
      });
      const isGetStepThreeData = reactive({
        profileData: {
          alarms: [],
        },
      });
      const postEditId = ref('');
      const current = ref(0);
      const isUpdate = ref(0);
      const getAlarmContactId = ref('');
      const getMessageMode = ref('');
      const isStatus: any = ref(null);
      const isShowOkBtnFalse = ref(true);
      const isShowRule = ref(true);

      const getTitle = computed(() =>
        isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'
      );
      const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));
      const [register, { closeModal }] = useModalInner(async (data) => {
        isUpdate.value = data.isUpdate;
        if (isUpdate.value == 1) {
          proxy.$refs.DeviceProfileStep3Ref.isAddRuleStatusFunc(true);
          isShowRule.value = true;
          isShowOkBtnFalse.value = true;
          current.value = 0;
          isStatus.value = !data.isUpdate;
          //清空第一步数据
          proxy.$refs.DeviceProfileStep1Ref.resetIconFunc();
          proxy.$refs.DeviceProfileStep1Ref.customResetStepOneFunc();
          proxy.$refs.DeviceProfileStep3Ref.clearAllRegisterFormFunc();
          //报警详细信息
          proxy.$refs.DeviceProfileStep3Ref.setRegisterFormChangeDetailFunc({
            isEditStatus: false,
            stepThreeData: {},
          });
        } else if (isUpdate.value == 2) {
          postEditId.value = data.record.id;
          getBackendData = await deviceConfigGetDetail(postEditId.value);
          editData.value = getBackendData;
          proxy.$refs.DeviceProfileStep3Ref.isAddRuleStatusFunc(true);
          isShowRule.value = true;
          isShowOkBtnFalse.value = true;
          current.value = 0;
          isStatus.value = data.isUpdate;
          //清空第一步数据
          proxy.$refs.DeviceProfileStep1Ref.customResetStepOneFunc();
          //回显第一步数据
          proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
            name: editData.value.name,
            defaultRuleChainId: editData.value.defaultRuleChainId,
            defaultQueueName: editData.value.defaultQueueName,
            description: editData.value.description,
          });
          proxy.$refs.DeviceProfileStep3Ref.clearProfileDataFunc();
          proxy.$refs.DeviceProfileStep3Ref.addAlarmRule();
          setTimeout(() => {
            emit('success');
          }, 10);
        } else if (isUpdate.value == 3) {
          postEditId.value = data.record.id;
          getBackendData = await deviceConfigGetDetail(postEditId.value);
          editData.value = getBackendData;
          proxy.$refs.DeviceProfileStep3Ref.isAddRuleStatusFunc(false);
          isShowRule.value = false;
          isShowOkBtnFalse.value = false;
          current.value = 0;
          isStatus.value = data.isUpdate;
          //清空第一步数据
          proxy.$refs.DeviceProfileStep1Ref.customResetStepOneFunc();
          //回显第一步数据
          proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
            name: editData.value.name,
            defaultRuleChainId: editData.value.defaultRuleChainId,
            defaultQueueName: editData.value.defaultQueueName,
            description: editData.value.description,
          });
          proxy.$refs.DeviceProfileStep3Ref.clearProfileDataFunc();
          proxy.$refs.DeviceProfileStep3Ref.addAlarmRule();
          setTimeout(() => {
            emit('success');
          }, 10);
        }
      });
      function handleStepPrev() {
        current.value--;
      }
      function handleStepNext1(v, v1) {
        current.value++;
        getStepOneData.value = v;
        getStepOneData.value.icon = v1;
        if (isUpdate.value == 1) {
        } else if (isUpdate.value == 2) {
          return proxy.$refs.DeviceProfileStep2Ref.setStepTwoFieldsValueFunc({
            transportType: editData.value?.profileData.transportConfiguration.type,
          });
        } else if (isUpdate.value == 3) {
          return proxy.$refs.DeviceProfileStep2Ref.setStepTwoFieldsValueFunc({
            transportType: editData.value?.profileData.transportConfiguration.type,
          });
        }
      }
      function handleStep2Next(v) {
        current.value++;
        getStepTwoData.value = v;
        if (isUpdate.value == 1) {
          proxy.$refs.DeviceProfileStep3Ref.initAddAlarmRuleFunc();
          proxy.$refs.DeviceProfileStep3Ref.resetRegisterFormCreateAlarmFunc();
        } else if (isUpdate.value == 2) {
          proxy.$refs.DeviceProfileStep3Ref.setAlaramTypeFormFunc({
            alarmType: editData.value?.profileData.alarms[0].alarmType,
          });
          proxy.$refs.DeviceProfileStep3Ref.setTransmitAlarmFormFunc({
            propagate: editData.value?.profileData.alarms[0].propagate,
            propagateRelationTypes: editData.value?.profileData.alarms[0].propagateRelationTypes[0],
          });
          //回显报警详细信息
          proxy.$refs.DeviceProfileStep3Ref.setRegisterFormChangeDetailFunc({
            isEditStatus: true,
            stepThreeData: editData.value?.profileData.alarms[0].createRules,
            stepThreeClearData: editData.value?.profileData.alarms[0].clearRule,
          });
          proxy.$refs.DeviceProfileStep3Ref.setCreateRegisterFormChangeDetailFunc(
            editData.value?.profileData.alarms[0].createRules
          );
          proxy.$refs.DeviceProfileStep3Ref.setRegisterFormClearChangeDetailFunc({
            alarmDetails: editData.value?.profileData.alarms[0].clearRule.alarmDetails,
          });
          proxy.$refs.DeviceProfileStep3Ref.setRegisterFormCreateAlarmFunc({
            default: editData.value?.profileData.alarms[0].createRules,
          });
          //回显创建报警规则和清除报警规则
        } else if (isUpdate.value == 3) {
          proxy.$refs.DeviceProfileStep3Ref.setAlaramTypeFormFunc({
            alarmType: editData.value?.profileData.alarms[0].alarmType,
          });
          proxy.$refs.DeviceProfileStep3Ref.setTransmitAlarmFormFunc({
            propagate: editData.value?.profileData.alarms[0].propagate,
            propagateRelationTypes: editData.value?.profileData.alarms[0].propagateRelationTypes[0],
          });
          //回显报警详细信息
          proxy.$refs.DeviceProfileStep3Ref.setRegisterFormChangeDetailFunc({
            isEditStatus: true,
            stepThreeData: editData.value?.profileData.alarms[0].createRules,
            stepThreeClearData: editData.value?.profileData.alarms[0].clearRule,
          });
          proxy.$refs.DeviceProfileStep3Ref.setCreateRegisterFormChangeDetailFunc(
            editData.value?.profileData.alarms[0].createRules
          );
          proxy.$refs.DeviceProfileStep3Ref.setRegisterFormClearChangeDetailFunc({
            alarmDetails: editData.value?.profileData.alarms[0].clearRule.alarmDetails,
          });
          //回显创建报警规则和清除报警规则
        }
      }
      function handleStep3Next(v) {
        current.value++;
        getStepThreeData.value = v;
        if (isUpdate.value == 1) {
        } else if (isUpdate.value == 2) {
          proxy.$refs.DeviceProfileStep4Ref.setAlaramContactAndNoticeMethodFunc({
            alarmContactId: editData.value?.alarmProfile.alarmContactId.split(','),
            messageMode: editData.value?.alarmProfile.messageMode.split(','),
          });
        } else if (isUpdate.value == 3) {
          proxy.$refs.DeviceProfileStep4Ref.setAlaramContactAndNoticeMethodFunc({
            alarmContactId: editData.value?.alarmProfile.alarmContactId.split(','),
            messageMode: editData.value?.alarmProfile.messageMode.split(','),
          });
        }
      }
      function handleRedo() {
        current.value = 0;
      }

      const handleSubmit = async () => {
        if (isUpdate.value == 1) {
          isGetStepThreeData.profileData.alarms = getStepThreeData.value;
          getStepFourData = await proxy.$refs.DeviceProfileStep4Ref.getAllFields();
          const getJoinAlarmContactIdData = getStepFourData.alarmContactId.join(',');
          const getJoinMessageModeData = getStepFourData.messageMode.join(',');
          getAlarmContactId.value = getJoinAlarmContactIdData;
          getMessageMode.value = getJoinMessageModeData;
          alarmProfileData.alarmProfile.alarmContactId = getAlarmContactId.value;
          alarmProfileData.alarmProfile.messageMode = getMessageMode.value;
          Object.assign(
            postDeviceConfogData.value,
            getStepOneData.value,
            getStepTwoData.value,
            isGetStepThreeData,
            alarmProfileData
          );
          await deviceConfigAddOrEdit(postDeviceConfogData.value);
          createMessage.success('新增设备配置成功');
          closeModal();
          emit('success');
        } else if (isUpdate.value == 2) {
          postDeviceConfogData.value.id = postEditId.value;
          isGetStepThreeData.profileData.alarms = getStepThreeData.value;
          getStepFourData = await proxy.$refs.DeviceProfileStep4Ref.getAllFields();
          const getJoinAlarmContactIdData = getStepFourData.alarmContactId.join(',');
          const getJoinMessageModeData = getStepFourData.messageMode.join(',');
          getAlarmContactId.value = getJoinAlarmContactIdData;
          getMessageMode.value = getJoinMessageModeData;
          alarmProfileData.alarmProfile.alarmContactId = getAlarmContactId.value;
          alarmProfileData.alarmProfile.messageMode = getMessageMode.value;
          Object.assign(
            postDeviceConfogData.value,
            getStepOneData.value,
            getStepTwoData.value,
            isGetStepThreeData,
            alarmProfileData
          );
          await deviceConfigAddOrEdit(postDeviceConfogData.value);
          createMessage.success('编辑设备配置成功');
          closeModal();
          emit('success');
        }
      };

      const handleCancel = () => {
        closeModal();
        try {
          proxy.$refs.DeviceProfileStep4Ref.clearAlaramContactAndNoticeMethodFunc();
        } catch (e) {
          return e;
        }
      };
      return {
        isShowRule,
        isShowOkBtnFalse,
        isStatus,
        DeviceProfileStep2Ref,
        DeviceProfileStep3Ref,
        DeviceProfileStep4Ref,
        DeviceProfileStep1Ref,
        editData,
        handleStep3Next,
        handleSubmit,
        handleCancel,
        register,
        getTitle,
        getViewTitle,
        current,
        handleStepPrev,
        handleStepNext1,
        handleStep2Next,
        handleRedo,
      };
    },
  });
</script>