<template>
  <div>
    <BasicModal
      :showCancelBtn="true"
      :showOkBtn="false"
      v-bind="$attrs"
      width="55rem"
      @register="register"
      :title="getTitle"
    >
      <Tabs @change="handleChange" 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,
    step3ViewHighSetting,
    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('');
      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: step3ViewHighSetting,
        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({
          //   transportType: descInfo.value.profileData.transportConfiguration.type,
          // });
          // await setRegisterStep3Schemas({
          //   alarmType: descInfo.value.profileData.alarms[0].alarmType,
          // });
          // await setRegisterStep3HighSetting({
          //   propagate: descInfo.value.profileData.alarms[0].propagate,
          //   propagateRelationTypes: descInfo.value.profileData.alarms[0].propagateRelationTypes[0],
          // });
          // 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 handleChange = (v) => {
        switch (v) {
          case '1':
            setRegisterDetail({ ...descInfo.value });
            break;
          case '2':
            setRegisterTrans({
              transportType: descInfo.value.profileData?.transportConfiguration.type,
            });
            break;
          case '3':
            setRegisterStep3Schemas({
              alarmType: descInfo.value.profileData?.alarms[0].alarmType,
            });
            setRegisterStep3HighSetting({
              propagate: descInfo.value.profileData?.alarms[0].propagate,
              propagateRelationTypes: descInfo.value.profileData?.alarms[0].propagateRelationTypes,
            });
            const getKey = Object.keys(descInfo.value.profileData?.alarms[0].createRules);
            console.log(descInfo.value.profileData?.alarms[0].createRules[getKey[0]]);
            // console.log(descInfo.value.profileData.alarms[0].createRules.MAJOR);
            // console.log(descInfo.value.profileData.alarms[0].createRules['MAJOR']);
            setRegisterStep3CreateAlarm({
              WARNING: descInfo.value.profileData?.alarms[0].createRules[getKey[0]],
            });
            setRegisterStep3RuleAlarm({
              type: descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition
                .condition[0].key.type,
              key: descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition
                .condition[0].key.key,
              valueType:
                descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition.condition[0]
                  .valueType,
              value:
                descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition.condition[0]
                  .value,
              predicate:
                descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition.condition[0]
                  .predicate,
            });
            setRegisterStep3Condition({
              conditionType:
                descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition.spec.type,
            });
            setRegisterStep3Enable({
              schedule: descInfo.value.profileData?.alarms[0].createRules[getKey[0]].schedule,
            });
            setRegisterStep3TemplateDetail({
              alarmDetails:
                descInfo.value.profileData?.alarms[0].createRules[getKey[0]].alarmDetails,
            });
            break;
          case '4':
            setRegisterContact({
              alarmContactId: descInfo.value.alarmProfile.alarmContactId,
              messageMode: descInfo.value.alarmProfile.messageMode,
            });
            break;
        }
      };
      watch(
        () => activeKey.value,
        (v) => {
          dataInfo.value = v;
        }
      );
      const getTitle = computed(() => {
        return '设备配置详情';
      });

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