<template>
  <div class="step3">
    <template v-for="(item, index) in profileData" :key="item.id">
      <CollapseContainer class="border mb-8">
        <template #action>
          <div @click="deleteAlarmRule(index)" class="cursor-pointer">
            <DeleteOutlined style="font-size: 20px" class="mr-2" />
          </div>
        </template>
        <BasicForm @register="registerForm" />
        <CollapseContainer>
          <template #action> 高级设置 </template>
          <BasicForm @register="registerFormHighSetting">
            <template #checkBox="{ model, field }">
              <Checkbox v-model:checked="model[field]">传递报警</Checkbox>
            </template>
          </BasicForm>
        </CollapseContainer>
        <p>创建报警规则</p>
        <template v-for="(childItem, createIndex) in item.alarms" :key="childItem.id">
          <div class="aic mb-4" style="border: 1px solid #bfbfbf">
            <div class="w-3/4">
              <BasicForm @register="registerFormCreateAlarm" />
              <div>
                <p style="color: #f5594e" class="mt-4 ml-4"
                  >请添加报警规则条件
                  <PlusOutlined
                    @click="handleOpenAlaramRuleConditions"
                    class="cursor-pointer ml-4"
                    style="font-size: 20px"
                /></p>
                <p class="mt-4 ml-4"
                  >启用规则：始终启用
                  <EditOutlined
                    @click="handleOpenEnableRule"
                    class="cursor-pointer ml-4"
                    style="font-size: 20px"
                /></p>
                <p class="mt-4 ml-4"
                  >详情模板：<EditOutlined
                    @click="handleOpenDetailTemplate"
                    class="cursor-pointer ml-4"
                    style="font-size: 20px"
                /></p>
                <p class="mt-4 ml-4">dashboard:</p>
              </div>
            </div>
            <div class="w-1/4 flex justify-center">
              <Tooltip title="移除">
                <MinusCircleOutlined
                  style="font-size: 25px; color: #305680"
                  class="cursor-pointer"
                  @click="deleteCondition(index, createIndex)"
                />
              </Tooltip>
            </div>
          </div>
        </template>
        <a-button class="mt-5" @click="addCreateRole(index)"
          ><PlusCircleOutlined />添加创建条件</a-button
        >
        <p>清除报警规则</p>
        <BasicForm @register="registerFormClearAlarm">
          <template #formHeader> </template>
        </BasicForm>
      </CollapseContainer>
    </template>
  </div>
  <div class="flex justify-start" style="display: fixed; top: 100px">
    <a-button class="mr-5" @click="prevStep">上一步</a-button>
    <a-button @click="handleFormStep3toStep4Next">下一步</a-button>
    <a-button style="margin-left: 20px" type="primary" @click="addAlarmRule">添加报警规则</a-button>
  </div>
  <!-- 详情模板 -->
  <DetailTemplate
    v-if="isRuleAlarmRuleConditions == 1"
    @getAllFields="getAllFieldsFunc"
    @register="registerModal1"
  />
  <!-- 启用规则 -->
  <EnableRule
    v-if="isRuleAlarmRuleConditions == 2"
    ref="getChildData2"
    @getAllFieldsEnab="getAllFieldsEnabFunc"
    @register="registerModal2"
  />
  <!-- 报警规则条件 -->
  <AlarmRuleConditions
    v-if="isRuleAlarmRuleConditions == 3"
    ref="getChildData3"
    @getAllFieldsRule="getAllFieldsRuleFunc"
    @register="registerModal3"
  />
</template>

<script lang="ts">
  import { defineComponent, ref, unref, getCurrentInstance } from 'vue';
  import type { alarmListItem } from '../types/index';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step3Schemas, step3HighSetting, step3CreateAlarm, step3ClearAlarm } from './data';
  import {
    DeleteOutlined,
    MinusCircleOutlined,
    PlusCircleOutlined,
    PlusOutlined,
    EditOutlined,
  } from '@ant-design/icons-vue';
  import { Tooltip, Checkbox } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import DetailTemplate from './cpns/detailtemplate/index.vue';
  import EnableRule from './cpns/enablerule/index.vue';
  import AlarmRuleConditions from './cpns/alarmruleconditions/index.vue';

  export default defineComponent({
    components: {
      BasicForm,
      CollapseContainer,
      DeleteOutlined,
      MinusCircleOutlined,
      PlusCircleOutlined,
      PlusOutlined,
      EditOutlined,
      Checkbox,
      Tooltip,
      DetailTemplate,
      EnableRule,
      AlarmRuleConditions,
    },
    emits: ['prev', 'next'],
    setup(_, { emit }) {
      const { proxy } = getCurrentInstance();
      // const isDetailTemplateEnableRuleAlarmRuleConditions = ref(true);
      const getChildData1 = ref(null);
      const getChildData2 = ref(null);
      const getChildData3 = ref(null);
      const isRuleAlarmRuleConditions = ref(0);
      const getAllFormData: any = ref({});
      const alarmss: any = ref([]);
      const emptyObj: any = ref({});
      //告警列表
      let profileData = ref<alarmListItem[]>([]);
      const log = (e) => {
        console.log(e);
      };
      // 添加和删除告警配置
      const deleteAlarmRule = (index: number) => {
        unref(profileData).splice(index, 1);
      };
      // 上一步
      const prevStep = () => {
        emit('prev');
      };
      const addAlarmRule = () => {
        unref(profileData).push({
          // id: Date.now(),
          // messageMode: '',
          // propagate: false,
          // propagateRelationTypes: [''],
          configuration: {},
          transportConfiguration: {},
          provisionConfiguration: {
            provisionDeviceSecret: '',
          },
          // alarms: [
          //   {
          //     id: Date.now() + Math.random(),
          //     alarmVisible: false,
          //     addKeyFilterVisible: false,
          //     detailVisible: false,
          //     detail: '',
          //   },
          // ],
          // clearRule: [],
          alarms: [
            {
              id: Date.now() + Math.random(),
              alarmType: '',
              createRules: {},
              clearRule: {},
              propagate: true,
              propagateRelationTypes: [''],
            },
          ],
        });
      };

      // 表单部分 报警类型
      const [registerForm, { validate: validateRegisterForm }] = useForm({
        labelWidth: 120,
        schemas: step3Schemas,
        showResetButton: false,
        showSubmitButton: false,
      });

      // 高级设置
      const [registerFormHighSetting, { validate: validateRegisterFormHighSetting }] = useForm({
        labelWidth: 120,
        schemas: step3HighSetting,
        showResetButton: false,
        showSubmitButton: false,
        actionColOptions: {
          span: 24,
        },
      });

      // 添加创建条件表单
      const [registerFormCreateAlarm, { validate: validateRegisterFormCreateAlarm }] = useForm({
        labelWidth: 120,
        schemas: step3CreateAlarm,
        showResetButton: false,
        showSubmitButton: false,
        actionColOptions: {
          span: 24,
        },
      });

      // 清除条件表单
      const [registerFormClearAlarm, { validate: validateRegisterFormClearAlarm }] = useForm({
        labelWidth: 120,
        schemas: step3ClearAlarm,
        showResetButton: false,
        showSubmitButton: false,
        actionColOptions: {
          span: 24,
        },
      });

      // 添加‘创建条件’
      const addCreateRole = (index: number) => {
        unref(profileData)[index].alarms.push({
          id: Date.now() + Math.random(),
          alarmVisible: false,
          addKeyFilterVisible: false,
          detailVisible: false,
          detail: '',
          filterList: [],
        });
      };
      // 删除‘创建条件’
      const deleteCondition = (index: number, createIndex: number) => {
        profileData.value[index].alarms.splice(createIndex, 1);
      };
      const getAllFieldsFunc = (v) => {
        console.log(v);
      };
      const getAllFieldsEnabFunc = (v) => {
        console.log(v);
      };
      const getAllFieldsRuleFunc = (v) => {
        console.log(v);
      };

      const handleFormStep3toStep4Next = async () => {
        try {
          // const values = 1;
          const valueRegisterForm = await validateRegisterForm();
          const valueRegisterFormHighSetting = await validateRegisterFormHighSetting();
          const valueRegisterFormCreateAlarm = await validateRegisterFormCreateAlarm();
          const valueRegisterFormClearAlarm = await validateRegisterFormClearAlarm();
          const getValueRegisterFormHighSetting = {
            propagate: valueRegisterFormHighSetting?.propagate,
            propagateRelationTypes: [valueRegisterFormHighSetting?.propagateRelationTypes],
          };
          // console.log(proxy.$refs.getChildData1);
          // console.log(proxy.$refs.getChildData2);
          // console.log(proxy.$refs.getChildData3);
          // let getChildValues1 = proxy.$refs.getChildData1.getAllFields();
          // console.log('详情模板', getChildValues1);
          // let getChildValues2 = proxy.$refs.getChildData2.getAllFieldsEnab();
          // console.log('启用规则', getChildValues2);
          // let getChildValues3 = proxy.$refs.getChildData3.getAllFieldsRule();
          // console.log('报警规则条件', getChildValues3);

          Object.assign(emptyObj.value, valueRegisterForm, getValueRegisterFormHighSetting);
          alarmss.value.push(emptyObj.value);
          const getAlarms = {
            alarms: alarmss.value,
          };
          Object.assign(
            getAllFormData.value,
            getAlarms
            // valueRegisterFormCreateAlarm,
            // valueRegisterFormClearAlarm
            // profileData.value
          );
          console.log('第三步的数据', getAllFormData.value);
          emit('next', getAllFormData.value);
        } catch (error) {}
      };

      const [registerModal1, { openModal: openModal1 }] = useModal();
      const [registerModal2, { openModal: openModal2 }] = useModal();
      const [registerModal3, { openModal: openModal3 }] = useModal();

      const handleOpenDetailTemplate = () => {
        isRuleAlarmRuleConditions.value = 1;
        openModal1(true);
      };
      const handleOpenEnableRule = () => {
        isRuleAlarmRuleConditions.value = 2;
        openModal2(true);
      };
      const handleOpenAlaramRuleConditions = () => {
        isRuleAlarmRuleConditions.value = 3;
        openModal3(true);
      };

      return {
        getAllFieldsRuleFunc,
        getAllFieldsEnabFunc,
        getAllFieldsFunc,
        getChildData1,
        getChildData2,
        getChildData3,
        isRuleAlarmRuleConditions,
        registerModal1,
        registerModal2,
        registerModal3,
        handleOpenEnableRule,
        handleOpenAlaramRuleConditions,
        handleOpenDetailTemplate,
        handleFormStep3toStep4Next,
        log,
        profileData,
        deleteAlarmRule,
        prevStep,
        addAlarmRule,
        registerForm,
        registerFormHighSetting,
        registerFormCreateAlarm,
        addCreateRole,
        deleteCondition,
        registerFormClearAlarm,
      };
    },
  });
</script>

<style lang="less" scoped>
  .step3 {
    width: 100%;
  }
  .border {
    border: 1px solid #bfbfbf;
  }

  .aic {
    display: flex;
    align-items: center;
  }

  :deep(.vben-collapse-container__header) {
    border: none;
  }
</style>