<template>
  <div>
    <div>
      <div
        v-if="!getIsEchoEditStatus ? alarmsData.length == 0 : echoEditData.length == 0"
        style="text-align: center"
      >
        <p style="font-size: large">未配置报警规则</p>
      </div>
      <div>
        <template
          v-for="(item, index) in !getIsEchoEditStatus ? alarmsData : echoEditData"
          :key="index"
        >
          <div class="cursor-pointer" style="position: relative; top: 3.5vh; right: -41.6vw">
            <img
              style="cursor: pointer"
              @click="removeAlarmRule(item, index)"
              alt="移除"
              src="../../../../assets/images/delete.png"
            />
          </div>
          <div
            style="
              margin-left: 0.21vw;
              border-radius: 4px;
              width: 44vw;
              height: 47vh;
              border: 1px solid grey;
              overflow-y: scroll;
            "
          >
            <CommonCpns
              :ref="ruleRef.createRuleRefs"
              :step3FatherEmitCpnData="!getIsEchoEditStatus ? 1 : item"
              :step3FatherEmitCpnStatus="
                !getIsEchoEditStatus ? !getIsEchoEditStatus : getIsEchoEditStatus
              "
            />
          </div>
        </template>
      </div>
    </div>
    <!-- 按钮 -->
    <div style="margin-left: 14.5vw; margin-top: 2vh">
      <a-button class="mr-5" @click="prevStepFunc">上一步</a-button>
      <a-button @click="nextStepFunc">下一步</a-button>
      <a-button
        v-if="btnClose"
        style="margin-left: 20px"
        type="primary"
        @click="clickAddAlaramRuleFunc"
        >添加报警规则</a-button
      >
    </div>
    <!-- 按钮 -->
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, getCurrentInstance, reactive, watch, nextTick } from 'vue';
  import CommonCpns from './common/index.vue';
  import { deteleObject } from '/@/hooks/web/useFilter';

  export default defineComponent({
    components: {
      CommonCpns,
    },
    props: ['isShowAddRule'],
    emits: ['next', 'prev'],
    setup(props, { emit }) {
      const { proxy } = getCurrentInstance() as any;
      const commonCpnsRef = ref(null);
      const alarmsData: any = ref([]);
      const echoEditData: any = ref([]);
      const getIsEchoEditStatus = ref(false);
      const btnClose = ref(true);
      let addObj = reactive({});
      const ruleRef = {
        createRuleRefs: ref([]),
      };
      const prevStepFunc = () => {
        emit('prev');
      };
      const nextStepFunc = async () => {
        emit('next', {
          alarms: alarmsData.value,
        });
      };
      const getStep3AllDataFunc = async (e) => {
        let temp = [];
        if (e == 1) {
          temp = alarmsData.value;
        } else {
          temp = echoEditData.value;
        }
        for (let i = 0; i < temp.length; i++) {
          for (const item of ruleRef.createRuleRefs.value) {
            addObj = await item.getStep3AllDataFunc();
            alarmsData.value.push(addObj);
          }
        }
        /**
         * 过滤null和重复对象和1
         */
        alarmsData.value = alarmsData.value.filter((i) => i);
        alarmsData.value = deteleObject(alarmsData.value);
        alarmsData.value = alarmsData.value.filter((f) => f !== 1);
        return alarmsData.value;
      };
      const clickAddAlaramRuleFunc = async () => {
        alarmsData.value.push(1);
        nextTick(() => {
          ruleRef.createRuleRefs.value[alarmsData.value.length - 1].updateCpnSchemaSelectEnableFunc(
            alarmsData.value.length - 1
          );
        });

        // try {
        //   // proxy.$refs['commonCpnsRef' + 0].updateCpnSchemaSelectEnableFunc();
        //   // proxy.$refs['commonCpnsRef' + 1].updateCpnSchemaSelectEnableFunc();
        //   if (getIsEchoEditStatus.value) {
        //     echoEditData.value.push(1);
        //   }
        // } catch {}
      };
      const removeAlarmRule = (e, i) => {
        const key = alarmsData.value.indexOf(e);
        console.log(i);
        alarmsData.value.splice(key, 1);
        if (getIsEchoEditStatus.value) {
          const key1 = echoEditData.value.indexOf(e);
          console.log(i);
          echoEditData.value.splice(key1, 1);
        }
      };
      /**
       * 清空数据
       */
      const clearStep3DataFunc = () => {
        alarmsData.value.length = 0;
        echoEditData.value.length = 0;
        proxy.$refs.commonCpnsRef?.clearStep3CpnDataFunc();
        getIsEchoEditStatus.value = false;
      };
      /**
       * 回显数据
       */
      const echoStep3DataFunc = (e, s) => {
        getIsEchoEditStatus.value = s;
        if (getIsEchoEditStatus.value === true) {
          echoEditData.value = e;
          if (echoEditData.value == null) {
            echoEditData.value = [];
          }
        }
      };
      watch(
        () => props.isShowAddRule,
        (v) => {
          btnClose.value = v;
        }
      );
      return {
        clickAddAlaramRuleFunc,
        prevStepFunc,
        nextStepFunc,
        alarmsData,
        removeAlarmRule,
        commonCpnsRef,
        clearStep3DataFunc,
        echoStep3DataFunc,
        echoEditData,
        getIsEchoEditStatus,
        getStep3AllDataFunc,
        btnClose,
        ruleRef,
      };
    },
  });
</script>

<style lang="less" scoped>
  ::-webkit-scrollbar {
    display: none;
  }
</style>