<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-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" />
        </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 { 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,
    [Steps.name]: Steps,
    [Steps.Step.name]: Steps.Step,
  },
  props: {
    userData: { type: Object },
  },
  emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],
  setup(_, { emit }) {
    const { proxy } = getCurrentInstance() as any;
    const DeviceProfileStep1Ref = ref(null);
    const DeviceProfileStep2Ref = ref(null);
    const { createMessage } = useMessage();
    let postDeviceConfogData: any = reactive({});
    let getStepOneData: any = reactive({});
    let getStepTwoData: any = reactive({});
    const editData: any = ref({});
    const postEditId = ref('');
    const createTime = ref('');
    const current = ref(0);
    const isUpdate = ref(0);
    const isShowOkBtnFalse = ref(true);
    const isNextStatus = ref(false);
    let transportTypeObj = reactive({
      transportType: '',
    });
    let profileDataObj: any = reactive({
      profileData: null,
    });
    let isEdit = ref(true);
    let noEditObj: any = reactive({});
    const getTitle = computed(() =>
      isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'
    );
    const editTransportType = ref('');
    const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));
    const [register, { closeModal }] = useModalInner(async (data) => {
      isUpdate.value = data.isUpdate;
      if (isUpdate.value == 1) {
        handleCancel();
        isShowOkBtnFalse.value = true;
        current.value = 0;
        isEdit.value = false;
        proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false)
      } else if (isUpdate.value == 2) {
        isEdit.value = true;
        handleCancel();
        isShowOkBtnFalse.value = true;
        current.value = 0;
        postEditId.value = data.record.id;
        createTime.value = data.record.createTime;
        editTransportType.value = data.record.transportType;
        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,
        });
        if (editData.value.default) {
          proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(true)

        } else {
          proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false)

        }
        noEditObj = {
          id: editData.value.id,
          name: editData.value?.name,
          createTime: createTime.value,
          transportType: editTransportType.value,
          type: editData.value?.type,
          profileData: editData.value?.profileData,
          defaultQueueName: editData.value.defaultQueueName,
          image: editData.value.image,
          defaultRuleChainId: editData.value.defaultRuleChainId,
          description: editData.value.description,
          tenantId: editData.value.tenantId,
        };
      } else if (isUpdate.value == 3) {
        handleCancel();
        isShowOkBtnFalse.value = false;
        current.value = 0;
        postEditId.value = data.record.id;
        createTime.value = data.record.createTime;
        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--;
      if (isUpdate.value == 2) {
        isEdit.value = true;
        noEditObj = {
          id: editData.value.id,
          name: editData.value?.name,
          createTime: createTime.value,
          transportType: editTransportType.value,
          type: editData.value?.type,
          profileData: editData.value?.profileData,
          defaultQueueName: editData.value.defaultQueueName,
          image: editData.value.image,
          defaultRuleChainId: editData.value.defaultRuleChainId,
          description: editData.value.description,
          tenantId: editData.value.tenantId,
        };
        nextTick(async () => {
          let getPic = null;
          const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
          getPic = getStep1Obj.icon;
          Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
        });
      }
    }
    //第一步
    function handleStepNext1(v, v1) {
      isNextStatus.value = true;
      if (isNextStatus.value) {
        getStepOneData = {
          ...v,
          ...{ image: v1 },
        };
      }
      current.value++;
      if (isUpdate.value == 2) {
        isEdit.value = false;
        proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
      } else if (isUpdate.value == 3) {
        proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
      }
    }
    const handleSubmit = async () => {
      let getPic = null;
      getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();
      profileDataObj.profileData = getStepTwoData;
      transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;
      delete profileDataObj?.profileData?.transportConfiguration?.transportType;
      //没有点击下一步
      if (!isNextStatus.value) {
        const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
        getPic = getStep1Obj.icon;
        getStepOneData = {
          ...getStep1Obj.key,
          ...{ image: getPic },
        };
        Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
      }
      const id = isUpdate.value == 1 ? '' : postEditId.value;
      const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };

      if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {
        profileDataObj.profileData = null;
      }
      postDeviceConfogData = {
        ...getStepOneData,
        ...profileDataObj,
        ...transportTypeObj,
        id,
        ...createTimePost,
      };
      if (isUpdate.value == 1) {
        delete postDeviceConfogData.id;
      }
      let isMappingsKey = ref(false);
      let isMappingValue = ref(false);
      let isQueryings = ref(false);
      let isOIDRepet = ref(false);
      postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
        (f: any) => {
          if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {
            if (f.queryingFrequencyMs == null) {
              isQueryings.value = true;
              return createMessage.error('请填写查询频率');
            } else {
              isQueryings.value = false;
            }
          }
          if (f.mappings.length == 0) {
            isMappingsKey.value = true;
            isMappingValue.value = true;
          } else {
            f.mappings.forEach((f1) => {
              const findNoneKey = Object.keys(f1).includes('');
              if (findNoneKey) {
                isMappingsKey.value = true;
              }
            });
            f.mappings.forEach((f2) => {
              const findNoneVal = Object.values(f2).includes('');
              if (findNoneVal) {
                isMappingValue.value = true;
              }
            });
            //新增OID不能重复=====同一层级的OID不能重复
            f.mappings.forEach((item, _) => {
              if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {
                isOIDRepet.value = true;
              }
            });
          }
        }
      );
      if (isQueryings.value) return createMessage.error('请填写查询频率');
      if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');
      if (isMappingValue.value) return createMessage.error('请填写Date key和OID');
      if (isOIDRepet.value) return createMessage.error('OID不能重复');
      deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)
        .then((res) => {
          if (!res) return;
          createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');
          closeModal();
          emit('success');
          isNextStatus.value = false;
        })
        .catch((e) => {
          createMessage.error(e);
        });
    };
    const handleCancel = () => {
      nextTick(() => {
        proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();
        proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();
      });
    };
    function handleRedo() {
      current.value = 0;
    }
    return {
      isShowOkBtnFalse,
      DeviceProfileStep2Ref,
      DeviceProfileStep1Ref,
      editData,
      handleSubmit,
      handleCancel,
      register,
      getTitle,
      getViewTitle,
      current,
      handleStepPrev,
      handleStepNext1,
      handleRedo,
    };
  },
});
</script>