<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">
            <div style="border-radius: 10px; border: 1px solid #f0f0f0">
              <div style="margin-left: 15px">
                <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>
            </div>
            <div style="border-radius: 10px; border: 1px solid #f0f0f0; margin-top: 15px">
              <p>清除报警规则</p>
              <div style="margin-left: 15px">
                <BasicForm
                  :showSubmitButton="false"
                  :showResetButton="false"
                  @register="registerStep3ClearRuleAlarm"
                />
                <BasicForm
                  :showSubmitButton="false"
                  :showResetButton="false"
                  @register="registerStep3ClearCondition"
                />
                <BasicForm
                  :showSubmitButton="false"
                  :showResetButton="false"
                  @register="registerStep3ClearEnable"
                />
                <BasicForm
                  :showSubmitButton="false"
                  :showResetButton="false"
                  @register="registerStep3ClearTemplateDetail"
                />
              </div>
            </div>
          </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 } from 'ant-design-vue';
  import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import {
    step1Schemas,
    step2Schemas,
    step3Schemas,
    step3ViewHighSetting,
    step3CreateAlarm,
    alertContactsSchemas,
  } 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';
  import { formSchema as echoFormSchema } from './step/cpns/alarmruleconditions/cpns/config';
  import { formSchema as conditionFormClearschema } from './step/cpns/alarmruleconditions/config';
  import { formSchema as enableClearSchema } from './step/cpns/enablerule/config';
  import { formSchema as detailClearSchema } from './step/cpns/detailtemplate/config';
  import { formSchema as echoFormClearSchema } from './step/cpns/alarmruleconditions/cpns/config';

  export default defineComponent({
    name: 'ConfigDrawer',
    components: { Tabs, TabPane: 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, { resetFields, 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 [registerStep3ClearRuleAlarm, { setFieldsValue: setRegisterStep3ClearRuleAlarm }] =
        useForm({
          schemas: echoFormClearSchema,
          actionColOptions: {
            span: 24,
          },
        });
      const [registerStep3ClearCondition, { setFieldsValue: setRegisterStep3ClearCondition }] =
        useForm({
          schemas: conditionFormClearschema,
          actionColOptions: {
            span: 24,
          },
        });
      const [registerStep3ClearEnable, { setFieldsValue: setRegisterStep3ClearEnable }] = useForm({
        schemas: enableClearSchema,
        actionColOptions: {
          span: 24,
        },
      });
      const [
        registerStep3ClearTemplateDetail,
        { setFieldsValue: setRegisterStep3ClearTemplateDetail },
      ] = useForm({
        schemas: detailClearSchema,
        actionColOptions: {
          span: 24,
        },
      });

      const [register] = useModalInner(async (data) => {
        activeKey.value = '1';
        isUpdate.value = !!data?.isUpdate;
        const getV = await deviceConfigGetDetail(data.record.id);
        descInfo.value = getV;
        try {
          resetFields();
          await setRegisterDetail({ ...descInfo.value });
        } catch (e) {
          return e;
        }
      });
      const handleChange = (v) => {
        try {
          switch (v) {
            // case '1':
            //   setRegisterDetail({ ...descInfo.value });
            //   break;
            case '2':
              setRegisterTrans({
                transportType: descInfo.value.profileData?.transportConfiguration.type,
              });
              break;
            case '3':
              setTimeout(() => {
                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);
                setRegisterStep3CreateAlarm({
                  default: getKey[0],
                });
                setRegisterStep3RuleAlarm({
                  type: descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition
                    .condition[0].key.type,
                  key1: descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition
                    .condition[0].key.key,
                  type1:
                    descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition
                      .condition[0].valueType,
                  value1:
                    descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition
                      .condition[0].predicate.value.defaultValue,
                  operation:
                    descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition
                      .condition[0].predicate.operation,
                });
                setRegisterStep3Condition({
                  conditionType:
                    descInfo.value.profileData?.alarms[0].createRules[getKey[0]].condition.spec
                      .type,
                });
                setRegisterStep3Enable({
                  schedule:
                    descInfo.value.profileData?.alarms[0].createRules[getKey[0]].schedule.type,
                });
                setRegisterStep3TemplateDetail({
                  alarmDetails:
                    descInfo.value.profileData?.alarms[0].createRules[getKey[0]].alarmDetails,
                });
                //清除报警
                setRegisterStep3ClearRuleAlarm({
                  type: descInfo.value.profileData?.alarms[0].clearRule.condition.condition[0].key
                    .type,
                  key1: descInfo.value.profileData?.alarms[0].clearRule.condition.condition[0].key
                    .key,
                  type1:
                    descInfo.value.profileData?.alarms[0].clearRule.condition.condition[0]
                      .valueType,
                  value1:
                    descInfo.value.profileData?.alarms[0].clearRule.condition.condition[0].predicate
                      .value.defaultValue,
                  operation:
                    descInfo.value.profileData?.alarms[0].clearRule.condition.condition[0].predicate
                      .operation,
                });
                setRegisterStep3ClearCondition({
                  conditionType:
                    descInfo.value.profileData?.alarms[0].clearRule.condition.spec.type,
                });
                setRegisterStep3ClearEnable({
                  schedule: descInfo.value.profileData?.alarms[0].clearRule.schedule.type,
                });
                setRegisterStep3ClearTemplateDetail({
                  alarmDetails: descInfo.value.profileData?.alarms[0].clearRule.alarmDetails,
                });
              }, 1000);
            case '4':
              setTimeout(() => {
                setRegisterContact({
                  alarmContactId: descInfo.value.alarmProfile.alarmContactId,
                  messageMode: descInfo.value.alarmProfile.messageMode,
                });
              }, 1000);
              break;
          }
        } catch (e) {
          return e;
        }
      };

      watch(
        () => activeKey.value,
        (v) => {
          dataInfo.value = v;
        }
      );
      const getTitle = computed(() => {
        return '设备配置详情';
      });

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