<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"
          :ref="item"
        >
          <span style="display: none">{{ item }}</span>
          <span style="display: none">{{ index }}</span>
          <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="commonCpnsRef"
              :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 } 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([]);
      let profileData: any = reactive({});
      const echoEditData: any = ref([]);
      const getIsEchoEditStatus = ref(false);
      const btnClose = ref(true);
      let getO = reactive({});
      const prevStepFunc = () => {
        emit('prev');
      };
      const nextStepFunc = async () => {
        profileData = await proxy.$refs.commonCpnsRef?.getStep3AllDataFunc();
        alarmsData.value.push(profileData);
        emit('next', {
          alarms: alarmsData.value,
        });
      };
      const getStep3AllDataFunc = async () => {
        profileData = await proxy.$refs.commonCpnsRef?.getStep3AllDataFunc();
        alarmsData.value.push(profileData);
        console.log(await proxy.$refs.commonCpnsRef?.getStep3AllDataFunc());
        if (getIsEchoEditStatus.value) {
          for (let i = 0; i < echoEditData.value.length; i++) {
            getO = await proxy.$refs.commonCpnsRef?.getStep3AllDataFunc();
            alarmsData.value.push(getO);
          }
        }
        console.log(alarmsData.value);
        alarmsData.value = alarmsData.value.filter((i) => i);
        alarmsData.value = deteleObject(alarmsData.value);
        console.log(alarmsData.value);
        return alarmsData.value;
      };
      const clickAddAlaramRuleFunc = async () => {
        try {
          profileData = await proxy.$refs.commonCpnsRef?.getStep3AllDataFunc();
          alarmsData.value.push(profileData);
          if (getIsEchoEditStatus.value) {
            echoEditData.value.push(profileData);
            // proxy.$refs.commonCpnsRef?.clearStep3CpnDataFunc();
          }
        } catch {}
      };
      const removeAlarmRule = (e, i) => {
        const key = alarmsData.value.indexOf(e);
        console.log(i);
        alarmsData.value.splice(key, 1);
      };
      /**
       * 清空数据
       */
      const clearStep3DataFunc = () => {
        try {
          alarmsData.value.length = 0;
          echoEditData.value.length = 0;
          // profileData = {};
          proxy.$refs.commonCpnsRef?.clearStep3CpnDataFunc();
          getIsEchoEditStatus.value = false;
          getO = {};
        } catch {}
      };
      /**
       * 回显数据
       */
      const echoStep3DataFunc = (e, s) => {
        try {
          getIsEchoEditStatus.value = s;
          if (getIsEchoEditStatus.value === true) {
            echoEditData.value = e;
            if (echoEditData.value == null) {
              echoEditData.value = [];
            }
          }
        } catch {}
      };
      watch(
        () => props.isShowAddRule,
        (v) => {
          btnClose.value = v;
        }
      );
      return {
        clickAddAlaramRuleFunc,
        prevStepFunc,
        nextStepFunc,
        alarmsData,
        removeAlarmRule,
        commonCpnsRef,
        clearStep3DataFunc,
        echoStep3DataFunc,
        echoEditData,
        getIsEchoEditStatus,
        getStep3AllDataFunc,
        btnClose,
      };
    },
  });
</script>

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