<template>
  <div class="step3">
    <template v-for="(item, index) in alarms" :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.createRule" :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 class="cursor-pointer ml-4" style="font-size: 20px"
                /></p>
                <p class="mt-4 ml-4"
                  >启用规则：始终启用
                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
                /></p>
                <p class="mt-4 ml-4"
                  >详情：<EditOutlined 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>
</template>

<script lang="ts">
  import { defineComponent, ref, unref } 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';

  export default defineComponent({
    components: {
      BasicForm,
      CollapseContainer,
      DeleteOutlined,
      MinusCircleOutlined,
      PlusCircleOutlined,
      PlusOutlined,
      EditOutlined,
      Checkbox,
      Tooltip,
    },
    emits: ['prev', 'next'],
    setup(_, { emit }) {
      const getAllFormData: any = ref({});
      //告警列表
      let alarms = ref<alarmListItem[]>([]);
      const log = (e) => {
        console.log(e);
      };
      // 添加和删除告警配置
      const deleteAlarmRule = (index: number) => {
        unref(alarms).splice(index, 1);
      };
      // 上一步
      const prevStep = () => {
        emit('prev');
      };
      const addAlarmRule = () => {
        unref(alarms).push({
          id: Date.now(),
          messageMode: '',
          enabled: false,
          createRule: [
            {
              id: Date.now() + Math.random(),
              alarmVisible: false,
              addKeyFilterVisible: false,
              detailVisible: false,
              detail: '',
              filterList: [],
            },
          ],
          clearRule: [],
        });
      };

      // 表单部分 报警类型
      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(alarms)[index].createRule.push({
          id: Date.now() + Math.random(),
          alarmVisible: false,
          addKeyFilterVisible: false,
          detailVisible: false,
          detail: '',
          filterList: [],
        });
      };
      // 删除‘创建条件’
      const deleteCondition = (index: number, createIndex: number) => {
        alarms.value[index].createRule.splice(createIndex, 1);
      };

      const handleFormStep3toStep4Next = async () => {
        try {
          // const values = 1;
          const valueRegisterForm = await validateRegisterForm();
          const valueRegisterFormHighSetting = await validateRegisterFormHighSetting();
          const valueRegisterFormCreateAlarm = await validateRegisterFormCreateAlarm();
          const valueRegisterFormClearAlarm = await validateRegisterFormClearAlarm();
          Object.assign(
            getAllFormData.value,
            valueRegisterForm,
            valueRegisterFormHighSetting,
            valueRegisterFormCreateAlarm,
            valueRegisterFormClearAlarm
          );
          console.log('第三步的数据', getAllFormData.value);
          emit('next', getAllFormData.value);
        } catch (error) {}
      };

      return {
        handleFormStep3toStep4Next,
        log,
        alarms,
        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>