<template>
  <div style="margin-left: 0.6vw">
    <!-- 报警类型和传递报警-->
    <div>
      <div class="alert-type" style="margin-left: -2.1vw; margin-top: 1vh">
        <BasicForm @register="registerForm"
      /></div>
      <div style="margin-top: -15px">
        <div style="margin-left: -8px; margin-top: -10px">
          <BasicForm
            @register="registerFormHighSetting"
            style="margin-left: 12px; margin-top: -10px"
          >
            <template #checkBox="{ model, field }">
              <Checkbox v-model:checked="model[field]">传递报警</Checkbox>
            </template>
          </BasicForm>
        </div>
      </div>
    </div>
    <!-- 报警类型和传递报警 -->
    <!-- 创建报警规则 -->
    <div style="margin-top: -6vh">
      <p style="margin-left: 10px; font-size: medium">创建报警规则</p>
      <p v-if="createAlarmRuleData.length === 0" style="text-align: center; font-size: large"
        >请添加创建报警规则</p
      >
      <div v-if="createAlarmRuleData.length > 0">
        <template v-for="(item, index) in createAlarmRuleData" :key="index">
          <span style="display: none">{{ item }}</span>
          <span style="display: none">{{ index }}</span>
          <div class="cursor-pointer" style="position: relative; top: 15.5vh; right: -40.8vw">
            <img
              style="cursor: pointer"
              @click="removeAddCreateRuleFunc(index)"
              alt="移除"
              src="../../../../../../src/assets/images/close.png"
            />
          </div>
          <div style="width: 38vw; height: 30vh; border: 1px solid grey; border-radius: 4px">
            <div style="margin-top: 1vh">
              <AlarmSeverityCpn ref="AlarmSeverityRef" />
              <DetailTemplateCpn ref="DetailTemplateRef" />
              <AlarmRuleConditionsCpn
                ref="AlarmRuleConditionsRef"
                @register="registerAlarmRuleConditionsModal"
                @getAllFieldsRule="getAlarmRuleConditionsValFunc"
              />
              <EnableRuleCpn
                ref="EnableRuleRef"
                @register="registerEnableRuleModal"
                @getAllFieldsEnab="getEnableRuleFunc"
              />
              <div style="margin-left: 0.5vw">
                <span style="color: red">请添加报警规则条件：</span>
                <a-button
                  style="border-radius: 10px"
                  class="mt-5"
                  @click="clickAddAlarmRuleConditionsFunc"
                  ><PlusCircleOutlined
                /></a-button>
                <div>
                  <template v-for="(item1, index1) in formatAlarmRuleConditions" :key="index1">
                    <p v-if="index1 == index">
                      报警规则条件：{{ formatAlarmRuleConditionsFunc(item1) }}
                    </p>
                  </template>
                </div>
              </div>
              <div style="margin-left: 0.5vw">
                <span style="color: red">启用规则：</span>
                <a-button style="border-radius: 10px" class="mt-5" @click="clickAddEnableRuleFunc"
                  ><PlusCircleOutlined
                /></a-button>
                <div>
                  <p v-if="formatEnableRule.length == 0">始终启用</p>
                  <template v-for="(item2, index2) in formatEnableRule" :key="index2">
                    <p v-if="index2 == index"> 启用规则：{{ formatEnableRuleFunc(item2) }} </p>
                  </template>
                </div>
              </div>
              <div></div>
              <div></div>
            </div>
          </div>
        </template>
      </div>
      <div>
        <a-button style="border-radius: 10px" class="mt-5" @click="clickAddCreateRuleFunc"
          ><PlusCircleOutlined />添加创建条件</a-button
        >
      </div>
      <!-- 清除报警规则 -->
      <div style="margin-top: 2vh">
        <p style="margin-left: 10px; font-size: medium">清除报警规则</p>
        <div
          v-if="isClearStatus"
          class="cursor-pointer"
          style="position: relative; top: 15.5vh; right: -40.8vw"
        >
          <img
            style="cursor: pointer"
            @click="removeAddClearRuleFunc"
            alt="移除"
            src="../../../../../../src/assets/images/close.png"
          />
        </div>
        <div
          v-if="isClearStatus"
          style="width: 38vw; height: 30vh; border: 1px solid grey; border-radius: 4px"
        >
          <div style="margin-top: 2vh">
            <div style="height: 3vh">
              <BasicForm @register="registerFormChangeClearDetail" />
            </div>
            <AlarmRuleConditionsCpn
              ref="AlarmRuleConditionsRef"
              @register="registerClearAlarmRuleConditionsModal"
              @getAllFieldsRule="getClearAlarmRuleConditionsValFunc"
            />
            <EnableRuleCpn
              ref="EnableRuleRef"
              @register="registerClearEnableRuleModal"
              @getAllFieldsEnab="getClearEnableRuleFunc"
            />
            <div style="margin-left: 0.5vw">
              <span style="color: red">请添加报警规则条件：</span>
              <a-button
                style="border-radius: 10px"
                class="mt-5"
                @click="clickClearAlarmRuleConditionsFunc"
                ><PlusCircleOutlined
              /></a-button>
              <div>
                <template v-for="(item3, index3) in formatClearAlarmRuleConditions" :key="index3">
                  <span style="display: none">{{ index3 }}</span>
                  <p> 报警规则条件：{{ formatClearAlarmRuleConditionsFunc(item3) }} </p>
                </template>
              </div>
            </div>
            <div style="margin-left: 0.5vw">
              <span style="color: red">启用规则：</span>
              <a-button style="border-radius: 10px" class="mt-5" @click="clickClearEnableRuleFunc"
                ><PlusCircleOutlined
              /></a-button>
              <div>
                <p v-if="formatEnableRule.length == 0">始终启用</p>
                <template v-for="(item4, index4) in formatClearEnableRule" :key="index4">
                  <span style="display: none">{{ index4 }}</span>
                  <p> 启用规则：{{ formatClearEnableRuleFunc(item4) }} </p>
                </template>
              </div>
            </div>
            <div></div>
            <div></div>
          </div>
        </div>
        <div>
          <a-button style="border-radius: 10px" class="mt-5" @click="clickAddClearRuleFunc"
            ><PlusCircleOutlined />添加清除条件</a-button
          >
        </div>
      </div>
      <!-- 清除报警规则 -->
    </div>
    <!-- 创建报警规则 -->
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, getCurrentInstance, nextTick, reactive } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step3Schemas, step3HighSetting, formChangeDetailSchema } from '../data';
  import { Checkbox } from 'ant-design-vue';
  import { PlusCircleOutlined } from '@ant-design/icons-vue';
  import AlarmSeverityCpn from '../cpns/alarmseverity/index.vue';
  import DetailTemplateCpn from '../cpns/detailtemplate/index.vue';
  import AlarmRuleConditionsCpn from '../cpns/alarmruleconditions/index.vue';
  import EnableRuleCpn from '../cpns/enablerule/index.vue';
  import { useModal } from '/@/components/Modal';
  import { formatAlarmRuleConditionsData, formatEnableRuleData } from '../common/format-data/index';

  export default defineComponent({
    components: {
      BasicForm,
      Checkbox,
      PlusCircleOutlined,
      AlarmSeverityCpn,
      DetailTemplateCpn,
      AlarmRuleConditionsCpn,
      EnableRuleCpn,
    },

    setup() {
      const { proxy } = getCurrentInstance() as any;
      const createAlarmRuleData: any = ref([1]);
      const AlarmRuleConditionsRef = ref(null);
      const EnableRuleRef = ref(null);
      const formatAlarmRuleConditions: any = ref([]);
      const formatClearAlarmRuleConditions: any = ref([]);
      const formatEnableRule: any = ref([]);
      const formatClearEnableRule: any = ref({});
      let alaramsObj: any = reactive({
        alarmType: null,
        propagate: null,
        propagateRelationTypes: null,
        clearRule: {},
        createRules: {},
      });
      const AlarmSeverityRef = ref(null);
      const DetailTemplateRef = ref(null);
      const tempDetailTemplateData: any = ref([]);
      const isClearStatus = ref(false);

      const [registerAlarmRuleConditionsModal, { openModal: openModalAlarmRuleConditions }] =
        useModal();
      const [registerEnableRuleModal, { openModal: openModalEnableRule }] = useModal();
      const [
        registerClearAlarmRuleConditionsModal,
        { openModal: openModalClearAlarmRuleConditions },
      ] = useModal();
      const [registerClearEnableRuleModal, { openModal: openModalClearEnableRule }] = useModal();
      const [registerForm, { validate: getAlarmTypeValFunc }] = useForm({
        labelWidth: 120,
        schemas: step3Schemas,
        showResetButton: false,
        showSubmitButton: false,
      });
      const [registerFormHighSetting, { getFieldsValue: getDeliverAlertsValFunc }] = useForm({
        labelWidth: 120,
        schemas: step3HighSetting,
        showResetButton: false,
        showSubmitButton: false,
        actionColOptions: {
          span: 24,
        },
      });
      const [registerFormChangeClearDetail, { getFieldsValue: getRegisterFormClearChangeDetail }] =
        useForm({
          labelWidth: 120,
          schemas: formChangeDetailSchema,
          showResetButton: false,
          showSubmitButton: false,
          actionColOptions: {
            span: 24,
          },
        });

      const clickAddCreateRuleFunc = () => {
        createAlarmRuleData.value.push(1);
        getAddCreateRuleFunc();
      };
      /**
       * 获取创建报警规则数据
       */
      const getAddCreateRuleFunc = () => {
        const val4 = proxy.$refs.AlarmSeverityRef?.getFieldsValueFunc();
        const val5 = proxy.$refs.DetailTemplateRef?.getFieldsValueFunc();
        let kongDetail = {};
        let kongRule = {};
        let kongEnable = {};
        tempDetailTemplateData.value.push(val5 as never);
        tempDetailTemplateData.value.forEach((f) => {
          kongDetail = f;
        });
        formatAlarmRuleConditions.value.forEach((f) => {
          kongRule = f;
        });
        formatEnableRule.value.forEach((f) => {
          kongEnable = f;
        });
        alaramsObj.createRules[val4?.default] = {
          ...kongDetail,
          ...{ condition: Object.keys(kongRule).length == 0 ? null : kongRule },
          ...{ schedule: Object.keys(kongEnable).length == 0 ? null : kongEnable },
        };
      };
      const clickAddClearRuleFunc = () => {
        isClearStatus.value = true;
        const val6 = getRegisterFormClearChangeDetail();
        let kongClearRule = {};
        formatClearAlarmRuleConditions.value.forEach((f) => {
          kongClearRule = f;
        });
        alaramsObj.clearRule = {
          ...val6,
          ...{
            schedule:
              Object.keys(formatClearEnableRule.value).length == 0
                ? null
                : formatClearEnableRule.value,
          },
          ...{
            condition: formatClearAlarmRuleConditions.value.length == 0 ? null : kongClearRule,
          },
        };
      };
      const removeAddClearRuleFunc = () => {
        isClearStatus.value = false;
        alaramsObj.clearRule = null;
      };
      const removeAddCreateRuleFunc = (i) => {
        let delI = i;
        createAlarmRuleData.value.splice(delI, 1);
        for (let i1 in alaramsObj.createRules) {
          if (delI) {
            delete alaramsObj.createRules[i1];
          }
        }
      };
      const clickAddAlarmRuleConditionsFunc = () => {
        nextTick(() => {
          openModalAlarmRuleConditions(true);
        });
      };
      const clickAddEnableRuleFunc = () => {
        nextTick(() => {
          openModalEnableRule(true);
        });
      };

      const clickClearAlarmRuleConditionsFunc = () => {
        nextTick(() => {
          openModalClearAlarmRuleConditions(true);
        });
      };
      const clickClearEnableRuleFunc = () => {
        nextTick(() => {
          openModalClearEnableRule(true);
        });
      };
      const getAlarmRuleConditionsValFunc = (e) => {
        formatAlarmRuleConditions.value.push({
          condition: e,
        } as never);
      };
      const getClearAlarmRuleConditionsValFunc = (e) => {
        formatClearAlarmRuleConditions.value.push({
          condition: e,
        } as never);
      };
      const formatAlarmRuleConditionsFunc = (e) => {
        let formatMap = e.condition.map((f: any) => formatAlarmRuleConditionsData(f));
        return formatMap;
      };
      const formatClearAlarmRuleConditionsFunc = (e) => {
        let formatMap = e.condition.map((f: any) => formatAlarmRuleConditionsData(f));
        return formatMap;
      };

      const getEnableRuleFunc = (e) => {
        formatEnableRule.value.push(e);
      };
      const getClearEnableRuleFunc = (e) => {
        formatClearEnableRule.value = e;
      };

      const formatEnableRuleFunc = (e) => {
        let formatMap = formatEnableRuleData(e);
        return formatMap;
      };
      const formatClearEnableRuleFunc = (e) => {
        let formatMap = formatEnableRuleData(e);
        return formatMap;
      };

      const getStep3AllDataFunc = async () => {
        const val1 = await getAlarmTypeValFunc();
        const val2 = getDeliverAlertsValFunc();
        const val3 = [];
        val3.push(val2.propagateRelationTypes as never);
        alaramsObj.alarmType = val1.alarmType;
        alaramsObj.propagate = val2.propagate;
        if (val2.propagateRelationTypes == undefined) {
          alaramsObj.propagateRelationTypes = null;
        } else {
          alaramsObj.propagateRelationTypes = val3;
        }
        getAddCreateRuleFunc();
        clickAddClearRuleFunc();
        if (alaramsObj.clearRule.condition == null) {
          isClearStatus.value = false;
        }
        return alaramsObj;
      };

      return {
        registerForm,
        registerFormHighSetting,
        clickAddCreateRuleFunc,
        createAlarmRuleData,
        clickAddClearRuleFunc,
        removeAddCreateRuleFunc,
        clickAddEnableRuleFunc,
        clickAddAlarmRuleConditionsFunc,
        AlarmRuleConditionsRef,
        EnableRuleRef,
        registerAlarmRuleConditionsModal,
        registerEnableRuleModal,
        getAlarmRuleConditionsValFunc,
        formatAlarmRuleConditions,
        formatAlarmRuleConditionsFunc,
        formatEnableRule,
        formatEnableRuleFunc,
        getEnableRuleFunc,
        getStep3AllDataFunc,
        AlarmSeverityRef,
        DetailTemplateRef,
        isClearStatus,
        removeAddClearRuleFunc,
        formatClearAlarmRuleConditions,
        formatClearAlarmRuleConditionsFunc,
        formatClearEnableRule,
        formatClearEnableRuleFunc,
        registerClearAlarmRuleConditionsModal,
        registerClearEnableRuleModal,
        clickClearAlarmRuleConditionsFunc,
        clickClearEnableRuleFunc,
        getClearAlarmRuleConditionsValFunc,
        getClearEnableRuleFunc,
        registerFormChangeClearDetail,
      };
    },
  });
</script>

<style lang="less" scoped></style>