<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>
        <div style="margin-left: -30px"> <BasicForm @register="registerForm" /></div>
        <CollapseContainer>
          <template #action> 高级设置 </template>
          <div style="margin-left: 10px">
            <BasicForm @register="registerFormHighSetting">
              <template #checkBox="{ model, field }">
                <Checkbox v-model:checked="model[field]">传递报警</Checkbox>
              </template>
            </BasicForm>
          </div>
        </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">
              <div style="margin-left: -30px"
                ><BasicForm @register="registerFormCreateAlarm"
              /></div>
              <div style="margin-left: 5px">
                <p style="color: #f5594e" class="mt-4 ml-4"
                  >请添加报警规则条件
                  <PlusOutlined
                    @click="handleOpenAlaramRuleConditions"
                    class="cursor-pointer ml-4"
                    style="font-size: 20px"
                  />{{ ruleTemplateData }}
                </p>
                <p style="white-space: wrap" class="mt-4 ml-4"
                  >启用规则：始终启用
                  <EditOutlined
                    @click="handleOpenEnableRule"
                    class="cursor-pointer ml-4"
                    style="font-size: 20px"
                  />{{ enableTemplateData }}
                </p>
                <p class="mt-4 ml-4"
                  >详情模板：<EditOutlined
                    @click="handleOpenDetailTemplate"
                    class="cursor-pointer ml-4"
                    style="font-size: 20px"
                  />{{ detailTemplateData }}
                </p>
                <div style="margin-left: 16px">
                  <BasicForm @register="dashboardForm" />
                </div>
              </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
        >
        <div style="height: 20px"></div>
        <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">
              <div style="margin-left: 5px">
                <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>
                <div style="margin-left: 16px">
                  <BasicForm @register="dashboardForm" />
                </div>
              </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
        >
      </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, watch } from 'vue';
  import type { alarmListItem } from '../types/index';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form';
  import {
    step3Schemas,
    step3HighSetting,
    step3CreateAlarm,
    dashboardFormScheme,
    isWhereType,
  } 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 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({});
      const detailObj: any = ref({});
      const ruleObj: any = ref({});
      const ruleLastObj: any = ref({});
      const enableObj: any = ref({});
      const additionalObj: any = ref({});
      const isWhereTypeValue = ref(null);
      const ruleTemplateData: any = ref(null);
      const enableTemplateData: any = ref(null);
      const detailTemplateData: any = ref(null);
      //告警列表
      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({
          configuration: {},
          transportConfiguration: {},
          provisionConfiguration: {
            provisionDeviceSecret: '',
          },
          alarms: [
            {
              id: Date.now() + Math.random(),
              alarmType: '',
              createRules: {},
              clearRule: {},
              propagate: true,
              propagateRelationTypes: [''],
            },
          ],
        });
      };
      //Mobile dashboard:
      const [dashboardForm] = useForm({
        labelWidth: 120,
        schemas: dashboardFormScheme,
        showResetButton: false,
        showSubmitButton: false,
      });
      // 表单部分 报警类型
      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 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);
      };
      watch(isWhereType, (nV) => {
        isWhereTypeValue.value = nV;
      });
      //详情模板
      const getAllFieldsFunc = (v) => {
        detailObj.value = v;
        detailTemplateData.value = `
         报警详细信息:${v.alarmDetails}
         `;
      };
      //启用规则
      const getAllFieldsEnabFunc = (v) => {
        enableObj.value = v;
        const findDay = [
          {
            label: '星期一',
            value: '1',
          },
          {
            label: '星期二',
            value: '2',
          },
          {
            label: '星期三',
            value: '3',
          },
          {
            label: '星期四',
            value: '4',
          },
          {
            label: '星期五',
            value: '5',
          },
          {
            label: '星期六',
            value: '6',
          },
          {
            label: '星期七',
            value: '7',
          },
        ];
        const findDayByValue = findDay.map((f, i) => {
          try {
            if (f.value == v.daysOfWeek[i]) {
              return f.label;
            }
          } catch (e) {
            console.log(e);
          }
        });

        enableTemplateData.value = `
         开始时间:${v.startsOn}结束时间:${v.endsOn}天数:${findDayByValue}
         `;
      };
      //规则条件
      const getAllFieldsRuleFunc = (v, v1) => {
        ruleObj.value = v;
        const findDay = [
          { label: '等于', value: 'EQUAL' },
          { label: '不等于', value: 'NOT_EQUAL' },
          { label: '开始于', value: 'STARTS_WITH' },
          { label: '结束于', value: 'ENDS_WITH' },
          { label: '包含', value: 'CONTAINS' },
          { label: '不包含', value: 'NOT_CONTAINS' },
          { label: '等于', value: 'EQUAL' },
          { label: '不等于', value: 'NOT_EQUAL' },
          { label: '大于', value: 'GREATER' },
          { label: '小于', value: 'LESS' },
          { label: '大于或等于', value: 'GREATER_OR_EQUAL' },
          { label: '小于或等于', value: 'LESS_OR_EQUAL' },
        ];
        const findRuleByValue = findDay.find((f) => {
          if (f.value == v.operation) {
            return f.label;
          }
        });
        ruleTemplateData.value = `
         键名:${v.key}...操作:${findRuleByValue?.label}...值:${v.value1}
         `;
        ruleLastObj.value = v1;
        const predicate = {
          operation: ruleObj.value.operation,
          value: {
            defaultValue: Number(ruleObj.value.value1),
          },
          type: ruleObj.value.type1,
        };
        const spec1 = {
          type: ruleLastObj.value.conditionType,
          // unit: ruleLastObj.value.unit,
          // predicate: {
          //   defaultValue: Number(ruleLastObj.value.defaultValue),
          //   dynamicValue: {
          //     sourceType: ruleLastObj.value.sourceType,
          //     sourceAttribute: ruleLastObj.value.sourceAttribute,
          //     inherit: ruleLastObj.value.inherit,
          //   },
          // },
        };
        const getCondition = {
          condition: [
            {
              key: {
                type: ruleObj.value?.type,
                key: ruleObj.value?.key,
              },
              valueType: ruleObj.value.type1,
              predicate,
            },
          ],
          spec: spec1,
        };
        const getValueConditon = {
          condition: getCondition,
        };
        Object.assign(additionalObj.value, getValueConditon);
      };

      const handleFormStep3toStep4Next = async () => {
        try {
          const scheduleValue = {
            type: enableObj.value.schedule,
            daysOfWeek: enableObj.value.daysOfWeek,
            // endsOn: enableObj.value.endsOn,
            // startsOn: enableObj.value.startOn,
            timezone: enableObj.value.timezone,
          };
          const getSchedule = {
            schedule: scheduleValue,
          };
          const getAdditionalProp = Object.assign({}, detailObj.value, getSchedule);
          const getScheduleAndAlarmDetails = Object.assign(
            {},
            getAdditionalProp,
            additionalObj.value
          );
          const getIsWhereTypeValue: any = isWhereTypeValue.value;
          const getAdditionalPropObj = {
            [getIsWhereTypeValue]: getScheduleAndAlarmDetails,
          };
          const getCreateRulesAllObj = {
            createRules: getAdditionalPropObj,
          };
          const valueRegisterForm = await validateRegisterForm();
          const valueRegisterFormAndId = {
            alarmType: Object.values(valueRegisterForm)[0],
          };

          const valueRegisterFormHighSetting = await validateRegisterFormHighSetting();
          // const valueRegisterFormCreateAlarm = await validateRegisterFormCreateAlarm();
          const getValueRegisterFormHighSetting = {
            propagate: valueRegisterFormHighSetting?.propagate,
            propagateRelationTypes: [valueRegisterFormHighSetting?.propagateRelationTypes],
          };

          Object.assign(
            emptyObj.value,
            valueRegisterFormAndId,
            getValueRegisterFormHighSetting,
            getCreateRulesAllObj
          );
          alarmss.value.push(emptyObj.value);
          const getAlarms = {
            alarms: alarmss.value,
          };
          Object.assign(getAllFormData.value, getAlarms);
          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;
        setTimeout(() => {
          openModal1(true);
        }, 50);
      };
      const handleOpenEnableRule = () => {
        isRuleAlarmRuleConditions.value = 2;
        setTimeout(() => {
          openModal2(true);
        }, 50);
      };
      const handleOpenAlaramRuleConditions = () => {
        isRuleAlarmRuleConditions.value = 3;
        setTimeout(() => {
          openModal3(true);
        }, 50);
      };

      return {
        detailTemplateData,
        enableTemplateData,
        ruleTemplateData,
        dashboardForm,
        getAllFieldsRuleFunc,
        getAllFieldsEnabFunc,
        getAllFieldsFunc,
        getChildData1,
        getChildData2,
        getChildData3,
        isRuleAlarmRuleConditions,
        registerModal1,
        registerModal2,
        registerModal3,
        handleOpenEnableRule,
        handleOpenAlaramRuleConditions,
        handleOpenDetailTemplate,
        handleFormStep3toStep4Next,
        log,
        profileData,
        deleteAlarmRule,
        prevStep,
        addAlarmRule,
        registerForm,
        registerFormHighSetting,
        registerFormCreateAlarm,
        addCreateRole,
        deleteCondition,
      };
    },
  });
</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>