<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="报警规则">
          <div style="padding-top: 10px">
            <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"
            />
            <BasicForm
              :showSubmitButton="false"
              :showResetButton="false"
              @register="registerStep3Condition"
            />
            <BasicForm
              :showSubmitButton="false"
              :showResetButton="false"
              @register="registerStep3Enable"
            />
            <BasicForm
              :showSubmitButton="false"
              :showResetButton="false"
              @register="registerStep3TemplateDetail"
            />
          </div>
        </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,
    echoFormSchema,
  } from './step/data';

  import { formSchema as conditionFormSchema } from './step/cpns/alarmruleconditions/config';
  import { formSchema as enableSchema } from './step/cpns/enablerule/config';
  import { formSchema as detailSchema } from './step/cpns/detailtemplate/config';

  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;
          // switch (dataInfo.value) {
          //   case '1':
          //     console.log(1);
          //     break;
          //   case '2':
          //     console.log(2);
          //     break;
          //   case '3':
          //     console.log(3);
          //     break;
          //   case '4':
          //     console.log(4);
          //     break;
          // }
        }
      );
      const [registerDetail, { setFieldsValue: setRegisterDetail }] = useForm({
        schemas: step1Schemas,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerTrans, { setFieldsValue: setRegisterTrans }] = useForm({
        schemas: step2Schemas,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerStep3Schemas, { setFieldsValue: setRegisterStep3Schemas }] = useForm({
        schemas: step3Schemas,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerStep3HighSetting, { setFieldsValue: setRegisterStep3HighSetting }] = useForm({
        schemas: step3HighSetting,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerStep3CreateAlarm, { setFieldsValue: setRegisterStep3CreateAlarm }] = useForm({
        schemas: step3CreateAlarm,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerContact, { setFieldsValue: setRegisterContact }] = useForm({
        schemas: alertContactsSchemas,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerStep3RuleAlarm, { setFieldsValue: setRegisterStep3RuleAlarm }] = useForm({
        schemas: echoFormSchema,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerStep3Condition, { setFieldsValue: setRegisterStep3Condition }] = useForm({
        schemas: conditionFormSchema,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerStep3Enable, { setFieldsValue: setRegisterStep3Enable }] = useForm({
        schemas: enableSchema,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerStep3TemplateDetail, { setFieldsValue: setRegisterStep3TemplateDetail }] =
        useForm({
          schemas: detailSchema,
          actionColOptions: {
            span: 24,
          },
        });

      const [register] = useModalInner(async (data) => {
        activeKey.value = '1';
        isUpdate.value = !!data?.isUpdate;
        descInfo.value = await deviceConfigGetDetail(data.record.id);
        try {
          await setRegisterDetail({ ...descInfo.value });
          await setRegisterTrans({ ...descInfo.value });
          await setRegisterStep3Schemas({ ...descInfo.value });
          await setRegisterStep3HighSetting({ ...descInfo.value });
          await setRegisterStep3CreateAlarm({ ...descInfo.value });
          await setRegisterStep3RuleAlarm({ ...descInfo.value });
          await setRegisterContact({ ...descInfo.value });
          await setRegisterStep3Condition({ ...descInfo.value });
          await setRegisterStep3Enable({ ...descInfo.value });
          await setRegisterStep3TemplateDetail({ ...descInfo.value });
        } catch (e) {
          return e;
        }
      });
      const getTitle = computed(() => {
        return '设备配置详情';
      });

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