<template>
  <div>
    <BasicModal
      :showCancelBtn="true"
      :showOkBtn="false"
      v-bind="$attrs"
      width="55rem"
      @register="register"
      :title="getTitle"
    >
      <Tabs v-model:activeKey="activeKey">
        <TabPane key="1" tab="详情">
          <BasicForm
            :showSubmitButton="false"
            :showResetButton="false"
            @register="registerDetail"
          />
        </TabPane>
        <TabPane key="2" tab="传输配置" force-render>
          <BasicForm :showSubmitButton="false" :showResetButton="false" @register="registerTrans"
        /></TabPane>
        <TabPane key="3" tab="报警规则">
          <BasicForm
            :showSubmitButton="false"
            :showResetButton="false"
            @register="registerStep3Schemas"
          />
          <BasicForm
            :showSubmitButton="false"
            :showResetButton="false"
            @register="registerStep3HighSetting"
          />
          <BasicForm
            :showSubmitButton="false"
            :showResetButton="false"
            @register="registerStep3CreateAlarm"
          />
          <BasicForm
            :showSubmitButton="false"
            :showResetButton="false"
            @register="registerStep3RuleAlarm"
          />
        </TabPane>
        <TabPane key="4" tab="告警管理">
          <BasicForm :showSubmitButton="false" :showResetButton="false" @register="registerContact"
        /></TabPane>
      </Tabs>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import {
    step1Schemas,
    step2Schemas,
    step3Schemas,
    step3HighSetting,
    step3CreateAlarm,
    alertContactsSchemas,
  } from './step/data';

  export default defineComponent({
    name: 'ConfigDrawer',
    components: { Tabs, TabPane, BasicModal, BasicForm },
    emits: ['success', 'register'],
    setup() {
      const activeKey = ref('1');
      const isUpdate = ref(true);
      const descInfo: any = ref(null);
      const dataInfo: any = ref('');
      watch(
        () => activeKey.value,
        (v) => {
          dataInfo.value = v;
        }
      );
      const [registerDetail, { setFieldsValue }] = useForm({
        schemas: step1Schemas,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerTrans, { setFieldsValue }] = useForm({
        schemas: step2Schemas,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerStep3Schemas, { setFieldsValue }] = useForm({
        schemas: step3Schemas,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerStep3HighSetting, { setFieldsValue }] = useForm({
        schemas: step3HighSetting,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerStep3CreateAlarm, { setFieldsValue }] = useForm({
        schemas: step3CreateAlarm,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerContact, { setFieldsValue }] = useForm({
        schemas: alertContactsSchemas,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerStep3RuleAlarm, { setFieldsValue }] = useForm({
        schemas: alertContactsSchemas,
        actionColOptions: {
          span: 24,
        },
      });
      const [register] = useModalInner(async (data) => {
        activeKey.value = '1';
        isUpdate.value = !!data?.isUpdate;
        descInfo.value = await deviceConfigGetDetail(data.record.id);
        console.log(descInfo.value);
        switch (dataInfo.value) {
          case '1':
            // await setRegisterDetail({ ...descInfo.value });
            setFieldsFunc(descInfo.value);
            break;
          case '2':
            // await setRegisterTrans({ ...descInfo.value });
            setFieldsFunc(descInfo.value);

            break;
          case '3':
            // await setRegisterStep3Schemas({ ...descInfo.value });
            // await setRegisterStep3HighSetting({ ...descInfo.value });
            // await setRegisterStep3CreateAlarm({ ...descInfo.value });
            // await setRegisterStep3RuleAlarm({ ...descInfo.value });
            setFieldsFunc(descInfo.value);

            break;
          case '4':
            // await setRegisterContact({ ...descInfo.value });
            setFieldsFunc(descInfo.value);

            break;
            deault: break;
        }
      });
      const setFieldsFunc = (v) => {
        setFieldsValue(v);
      };
      const getTitle = computed(() => {
        return '设备配置详情';
      });

      return {
        registerStep3RuleAlarm,
        registerContact,
        registerStep3HighSetting,
        registerStep3CreateAlarm,
        registerStep3Schemas,
        registerTrans,
        activeKey,
        registerDetail,
        register,
        getTitle,
      };
    },
  });
</script>