<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,
    nextTick,
    ref,
    computed,
    unref,
    getCurrentInstance,
    reactive,
  } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';
  import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';
  import DeviceProfileStep3 from '/@/views/device/profiles/step/DeviceProfileStep3.vue';
  import DeviceProfileStep4 from '/@/views/device/profiles/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() as any;
      const DeviceProfileStep1Ref = ref(null);
      const DeviceProfileStep2Ref = ref(null);
      const DeviceProfileStep3Ref = ref(null);
      const DeviceProfileStep4Ref = ref(null);
      const { createMessage } = useMessage();
      const postDeviceConfogData: any = ref({});
      let getStepOneData: any = reactive({});
      let getStepTwoData: any = reactive({});
      const editData: any = ref({});
      let getStepFourData: any = reactive({});
      const alarmProfileData = reactive({
        alarmProfile: {
          alarmContactId: '',
          messageMode: '',
        },
      });
      let isGetStepThreeData: any = 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 isEditAndChange = ref(true);
      const isEchoEditStatus = ref(false);
      const isNextStatus = ref(false);

      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) {
          handleCancel();
          isShowRule.value = true;
          isShowOkBtnFalse.value = true;
          current.value = 0;
          isStatus.value = !data.isUpdate;
          isEchoEditStatus.value = false;
        } else if (isUpdate.value == 2) {
          handleCancel();
          isShowRule.value = true;
          isShowOkBtnFalse.value = true;
          isEchoEditStatus.value = true;
          current.value = 0;
          postEditId.value = data.record.id;
          editData.value = await deviceConfigGetDetail(postEditId.value);
          proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
            name: editData.value.name,
            defaultRuleChainId: editData.value.defaultRuleChainId,
            defaultQueueName: editData.value.defaultQueueName,
            description: editData.value.description,
            image: editData.value.image,
          });
        } else if (isUpdate.value == 3) {
          handleCancel();
          isShowRule.value = false;
          isShowOkBtnFalse.value = false;
          current.value = 0;
          postEditId.value = data.record.id;
          editData.value = await deviceConfigGetDetail(postEditId.value);
          proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
            name: editData.value.name,
            defaultRuleChainId: editData.value.defaultRuleChainId,
            defaultQueueName: editData.value.defaultQueueName,
            description: editData.value.description,
            image: editData.value.image,
          });
        }
      });
      function handleStepPrev() {
        current.value--;
      }
      //第一步
      function handleStepNext1(v, v1) {
        isNextStatus.value = true;
        if (isNextStatus.value) {
          getStepOneData = {
            ...v,
            ...{ icon: v1 },
          };
        }
        current.value++;
        if (isUpdate.value == 2) {
          proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc({
            transportType: editData.value?.profileData.transportConfiguration.type,
          });
        } else if (isUpdate.value == 3) {
          proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc({
            transportType: editData.value?.profileData.transportConfiguration.type,
          });
        }
      }
      //第二步
      function handleStep2Next(v) {
        isNextStatus.value = true;
        if ((isNextStatus.value = true)) {
          getStepTwoData = {
            ...v,
          };
        }
        current.value++;
        if (isUpdate.value == 2) {
          try {
            isEchoEditStatus.value = true;
            proxy.$refs.DeviceProfileStep3Ref?.echoStep3DataFunc(
              editData.value.profileData.alarms,
              isEchoEditStatus.value
            );
          } catch {}
        } else if (isUpdate.value == 3) {
          try {
            isEchoEditStatus.value = true;
            proxy.$refs.DeviceProfileStep3Ref?.echoStep3DataFunc(
              editData.value.profileData.alarms,
              isEchoEditStatus.value
            );
          } catch {}
        }
      }
      //第三步
      async function handleStep3Next(_, v1) {
        try {
          isNextStatus.value = true;
          isEditAndChange.value = v1;
          current.value++;
          let step3NextVal = await proxy.$refs.DeviceProfileStep3Ref?.getStep3AllDataFunc(
            isUpdate.value
          );
          if (step3NextVal.length === 0) {
            isGetStepThreeData.profileData.alarms = null;
          } else {
            isGetStepThreeData.profileData.alarms = step3NextVal;
          }
          proxy.$refs.DeviceProfileStep4Ref?.step3LinkStep4DefalutClose();
          if (isUpdate.value == 2) {
            if (
              editData.value?.alarmProfile.messageMode !== null ||
              editData.value?.alarmProfile.alarmContactId !== null
            ) {
              proxy.$refs.DeviceProfileStep4Ref?.addStep4();
            } else {
              proxy.$refs.DeviceProfileStep4Ref?.closeStep4();
            }
            nextTick(() => {
              proxy.$refs.DeviceProfileStep4Ref?.setAlaramContactAndNoticeMethodFunc({
                alarmContactId: editData.value?.alarmProfile.alarmContactId.split(','),
                messageMode: editData.value?.alarmProfile.messageMode.split(','),
              });
            });
          } else if (isUpdate.value == 3) {
            if (
              editData.value?.alarmProfile.messageMode !== null ||
              editData.value?.alarmProfile.alarmContactId !== null
            ) {
              proxy.$refs.DeviceProfileStep4Ref?.addStep4();
            } else {
              proxy.$refs.DeviceProfileStep4Ref?.closeStep4();
            }
            nextTick(() => {
              proxy.$refs.DeviceProfileStep4Ref?.setAlaramContactAndNoticeMethodFunc({
                alarmContactId: editData.value?.alarmProfile.alarmContactId.split(','),
                messageMode: editData.value?.alarmProfile.messageMode.split(','),
              });
            });
          }
        } catch {}
      }
      const handleSubmit = async () => {
        let getPic = null;
        let getStep2Obj = proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();
        Object.assign(getStepTwoData, getStep2Obj);
        try {
          //没有点击下一步
          if (!isNextStatus.value) {
            const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
            getPic = getStep1Obj.icon;
            getStepOneData = {
              ...getStep1Obj.key,
              ...{ image: getPic },
            };
            Object.assign(getStepOneData, getStep1Obj.key);
          }
          let step3Val = await proxy.$refs.DeviceProfileStep3Ref?.getStep3AllDataFunc(
            isUpdate.value
          );
          if (step3Val.length === 0) {
            isGetStepThreeData.profileData.alarms = null;
          } else {
            isGetStepThreeData.profileData.alarms = step3Val;
          }
          try {
            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;
          } catch {}
          if (isUpdate.value == 1) {
            Object.assign(
              postDeviceConfogData.value,
              getStepOneData,
              getStepTwoData,
              isGetStepThreeData,
              alarmProfileData.alarmProfile.alarmContactId == '' ? null : alarmProfileData
            );
            await deviceConfigAddOrEdit(postDeviceConfogData.value);
            createMessage.success('新增成功');
            closeModal();
            emit('success');
          } else if (isUpdate.value == 2) {
            const id = {
              id: postEditId,
            };
            Object.assign(
              postDeviceConfogData.value,
              getStepOneData,
              getStepTwoData,
              isGetStepThreeData,
              id,
              alarmProfileData.alarmProfile.alarmContactId == '' ? null : alarmProfileData
            );
            await deviceConfigAddOrEdit(postDeviceConfogData.value);
            createMessage.success('编辑成功');
            closeModal();
            emit('success');
          }
        } catch {}
      };
      const handleCancel = () => {
        try {
          nextTick(() => {
            proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();
            proxy.$refs.DeviceProfileStep1Ref?.resetIconFunc();
            proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();
            proxy.$refs.DeviceProfileStep3Ref?.clearStep3DataFunc();
            proxy.$refs.DeviceProfileStep4Ref?.clearAlaramContactAndNoticeMethodFunc();
            getStepOneData = {};
            getStepTwoData = {};
            isGetStepThreeData.profileData.alarms.length = 0;
            alarmProfileData.alarmProfile.alarmContactId = '';
            alarmProfileData.alarmProfile.messageMode = '';
          });
        } catch {}
      };
      function handleRedo() {
        current.value = 0;
      }
      return {
        isShowRule,
        isShowOkBtnFalse,
        isStatus,
        DeviceProfileStep2Ref,
        DeviceProfileStep3Ref,
        DeviceProfileStep4Ref,
        DeviceProfileStep1Ref,
        editData,
        handleStep3Next,
        handleSubmit,
        handleCancel,
        register,
        getTitle,
        getViewTitle,
        current,
        handleStepPrev,
        handleStepNext1,
        handleStep2Next,
        handleRedo,
      };
    },
  });
</script>