<template>
  <div class="step3">
    <h1 v-if="alarmList.length === 0" style="font-size: 24px" class="text-center"
      >未配置报警规则</h1
    >

    <template v-else v-for="(item, index) in alarmList" :key="item">
      <CollapseContainer :title="item.alarmType" style="border: 1px solid #bfbfbf" class="mb-6">
        <template #action>
          <div @click="handleDeleteAlarm(index)" class="cursor-pointer">
            <DeleteOutlined style="font-size: 20px" class="mr-2" />
          </div>
        </template>
        <a-form :wrapper-col="wrapperCol" labelAlign="left" :model="item" :rules="rules">
          <a-form-item label="报警类型" :labelCol="{ style: { width: '80px' } }" name="alarmType">
            <a-input v-model:value="item.alarmType" />
          </a-form-item>
        </a-form>

        <CollapseContainer>
          <template #action> 高级设置 </template>
          <div class="flex" style="align-items: center">
            <input type="checkbox" v-model="item.isPass" /> <div class="ml-2">传递警报</div>
          </div>

          <a-form :wrapper-col="wrapperCol" labelAlign="left" v-if="item.isPass">
            <a-form-item label="传递的关联类型" :labelCol="{ style: { width: '120px' } }">
              <a-input />
            </a-form-item>
          </a-form>
        </CollapseContainer>
        <p style="color: #3c3c3c">创建报警规则</p>
        <template v-for="(item1, index1) in item.alarmRule" :key="item1">
          <div class="alarm-rule mb-4">
            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
              <div style="width: 30%; height: 100%; border-right: 1px solid #e0e0e0">
                <span style="color: #305680; margin-left: 10px">严重程度</span>
                <a-select :options="options" style="width: 100px; margin-left: 10px" />
              </div>
              <div style="width: 70%; height: 100%">
                <p style="color: #f5594e" class="mt-4 ml-4"
                  >请添加报警规则条件
                  <PlusOutlined
                    class="cursor-pointer ml-4"
                    style="font-size: 20px"
                    @click="editAlarmCondition(index, index1)"
                /></p>
                <p class="mt-4 ml-4"
                  >启用规则：始终启用
                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
                /></p>
                <p class="mt-4 ml-4"
                  >详情：{{ item1.detail }}
                  <EditOutlined
                    @click="item1.detailVisible = true"
                    class="cursor-pointer ml-4"
                    style="font-size: 20px"
                /></p>
                <p class="mt-4 ml-4">dashboard: <a-select style="width: 180px" /></p>
              </div>
            </div>
            <div style="width: 10%" class="alarm-remove">
              <a-tooltip title="移除">
                <MinusCircleOutlined
                  style="font-size: 25px color:#305680"
                  class="cursor-pointer"
                  @click="handleDeleteCondition(index, index1)"
                />
              </a-tooltip>
            </div>
          </div>
          <!-- 编辑报警规则条件 -->
          <a-modal
            v-model:visible="item1.alarmVisible"
            title="编辑报警规则条件"
            centered
            width="800px"
            @cancel="handleAlarmCancel(index, index1)"
            @ok="item1.alarmVisible = false"
          >
            <CollapseContainer title="键名筛选器" style="border: 1px solid #bfbfbf" class="mb-6">
              <a-modal
                v-model:visible="item1.addKeyFilterVisible"
                title="添加键名筛选器"
                centered
                width="600px"
                @ok="item1.addKeyFilterVisible = false"
              >
                <a-form
                  :wrapper-col="wrapperCol"
                  :labelCol="{ style: { width: '80px' } }"
                  labelAlign="right"
                >
                  <a-form-item label="键类型">
                    <a-select :options="keyTypeOptions" default-value="Timeseries" />
                  </a-form-item>
                  <a-form-item label="键名">
                    <a-input />
                  </a-form-item>
                  <a-form-item label="值类型">
                    <a-select :options="valueTypeOptions" />
                  </a-form-item>
                </a-form>
                <collapseContainer title="筛选器">
                  <template v-for="filterItem in item1.filterList" :key="filterItem">
                    <div class="flex justify-between mb-4" style="align-items: center">
                      <a-select
                        style="width: 150px"
                        :options="operatorOptions"
                        default-value="="
                      /><a-input style="width: 350px" />
                      <a-tooltip title="删除筛选器">
                        <CloseOutlined @click="deleteFilter(index, index1)" />
                      </a-tooltip>
                    </div>
                  </template>
                  <div class="flex">
                    <a-button type="primary" class="mr-4" @click="addFilter(index, index1)"
                      >添加</a-button
                    >
                    <a-button type="primary">添加复合</a-button>
                  </div>
                </collapseContainer>
              </a-modal>
              <div class="flex justify-start">
                <a-button type="primary" @click="item1.addKeyFilterVisible = true"
                  >添加键名筛选器</a-button
                >
              </div>
            </CollapseContainer>
            <CollapseContainer title="筛选器预览" style="border: 1px solid #bfbfbf" class="mb-6" />
          </a-modal>
          <!-- 启用规则-->
          <!-- <a-modal
            v-model:visible="visible"
            title="编辑报警规则条件"
            centered
            @cancel="handleCancel(index, index1)"
            @ok="visible = false"
          >
            编辑报警规则条件123
          </a-modal> -->

          <!-- 创建报警规则详情的弹框 -->
          <a-modal
            v-model:visible="item1.detailVisible"
            title="详情"
            centered
            @cancel="handleCancel(index, index1)"
            @ok="item1.detailVisible = false"
          >
            <a-textarea v-model:value="item1.detail" placeholder="报警详细信息" :rows="4" />
          </a-modal>
        </template>
        <a-button class="mt-5" @click="addCreateRole(index)"
          ><PlusCircleOutlined />添加创建条件</a-button
        >
        <p style="color: #3c3c3c">清除报警规则</p>
        <template v-for="(item2, index2) in item.removeRule" :key="item2">
          <div class="alarm-rule mb-4">
            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
              <div style="width: 70%; height: 100%">
                <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"
                  >详情：{{ item2.detail }}
                  <EditOutlined
                    class="cursor-pointer ml-4"
                    style="font-size: 20px"
                    @click="editRemoveVisible = true"
                  />
                </p>

                <p class="mt-4 ml-4">Mobile dashboard: <a-select style="width: 150px" /></p>
              </div>
            </div>
            <div style="width: 10%" class="alarm-remove">
              <a-tooltip title="移除">
                <MinusCircleOutlined
                  style="font-size: 25px color:#305680"
                  class="cursor-pointer"
                  @click="handleDeleteRemoveCondition(index, index2)"
                />
              </a-tooltip>
            </div>
          </div>
          <a-modal
            v-model:visible="editRemoveVisible"
            title="详情"
            centered
            @cancel="handleCancel1(index, index2)"
            @ok="editRemoveVisible = false"
          >
            <a-textarea v-model:value="item2.detail" placeholder="报警详细信息" :rows="4" />
          </a-modal>
        </template>
        <a-button class="mt-5" @click="addRemoveRule(index)"
          ><PlusCircleOutlined />添加清除条件</a-button
        >
      </CollapseContainer>
    </template>
    <div class="flex justify-start">
      <a-button class="mr-5" @click="prevStep">上一步</a-button>
      <a-button type="primary" @click="addAlarmRule">添加报警规则</a-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import {
    Alert,
    Divider,
    Descriptions,
    Input,
    Form,
    FormItem,
    Button,
    Select,
    Tooltip,
    Textarea,
    Modal,
  } from 'ant-design-vue';
  import {
    DeleteOutlined,
    MinusCircleOutlined,
    PlusCircleOutlined,
    PlusOutlined,
    EditOutlined,
    CloseOutlined,
  } from '@ant-design/icons-vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { alarmListItem } from '../types/index';
  export default defineComponent({
    components: {
      DeleteOutlined,
      MinusCircleOutlined,
      PlusCircleOutlined,
      CollapseContainer,
      EditOutlined,
      PlusOutlined,
      CloseOutlined,
      [Form.name]: Form,
      [FormItem.name]: FormItem,
      [Modal.name]: Modal,
      [Textarea.name]: Textarea,
      [Tooltip.name]: Tooltip,
      [Button.name]: Button,
      [Input.name]: Input,
      [Select.name]: Select,
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [Alert.name]: Alert,
      [Divider.name]: Divider,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
    },
    emits: ['prev'],
    setup(_, { emit }) {
      const alarmList = ref<alarmListItem[]>([]);

      const options = ref([
        {
          value: '1',
          label: '危险',
        },

        {
          value: '2',
          label: '重要',
        },
        {
          value: '3',
          label: '次要',
        },
        {
          value: '4',
          label: '警告',
        },
        {
          value: '5',
          label: '不确定',
        },
      ]);
      const keyTypeOptions = ref([
        {
          value: 'properties',
          label: '属性',
        },

        {
          value: 'Timeseries',
          label: 'Timeseries',
        },
        {
          value: 'constant',
          label: '常量',
        },
      ]);
      const valueTypeOptions = ref([
        {
          value: 'string',
          label: '字符串',
        },
        {
          value: 'number',
          label: '数字',
        },
        {
          value: 'boolean',
          label: '布尔值',
        },
        {
          value: 'dateTime',
          label: '日期时间',
        },
      ]);
      const operatorOptions = ref([
        {
          value: '=',
          label: '等于',
        },
        {
          value: '!=',
          label: '不等于',
        },
        {
          value: '>',
          label: '大于',
        },
        {
          value: '<',
          label: '小于',
        },
        {
          value: '>=',
          label: '大于或等于',
        },
        {
          value: '<=',
          label: '小于或等于',
        },
      ]);
      const rules = {
        alarmType: [
          {
            required: true,
            message: '报警类型必填',
            trigger: 'blur',
          },
        ],
      };

      const prevStep = () => {
        emit('prev');
      };
      // 添加报警规则
      const addAlarmRule = () => {
        alarmList.value.push({
          alarmType: '',
          isPass: false,
          createRule: [],
          clearRule: [],
        });
      };
      const handleDeleteAlarm = (index: number) => {
        alarmList.value.splice(index, 1);
      };
      // 添加‘创建条件’
      const addCreateRole = (index: number) => {
        alarmList.value[index].createRule.push({
          alarmVisible: false,
          addKeyFilterVisible: false,
          detailVisible: false,
          detail: '',
          filterList: [],
        });
      };
      const handleDeleteCondition = (index: number, index1: number) => {
        alarmList.value[index].createRule.splice(index1, 1);
      };

      // 添加‘清除报警规则’
      const addRemoveRule = (index: number) => {
        alarmList.value[index].clearRule.push({
          detail: '',
        });
      };
      const handleDeleteRemoveCondition = (index: number, index1: number) => {
        alarmList.value[index].clearRule.splice(index1, 1);
      };

      // 弹框取消事件 --2个
      const visible = ref(false);
      const editRemoveVisible = ref(false);
      const handleCancel = (index: number, index1: number) => {
        alarmList.value[index].createRule[index1].detail = '';
        alarmList.value[index].createRule[index1].detailVisible = false;
      };

      const handleCancel1 = (index: number, index2: number) => {
        alarmList.value[index].clearRule[index2].detail = '';
        editRemoveVisible.value = false;
      };

      const handleAlarmCancel = (index, index1) => {
        alarmList.value[index].createRule[index1].alarmVisible = false;
        console.log('object---');
      };
      const editAlarmCondition = (index, index1) => {
        alarmList.value[index].createRule[index1].alarmVisible = true;
        console.log('object');
      };
      // 添加键名筛选器
      const addFilter = (index, index1) => {
        console.log(index, index1);
        alarmList.value[index].createRule[index1].filterList?.push({
          operator: '=',
          value: '',
        });
      };
      const deleteFilter = (index: number, index1: number) => {
        alarmList.value[index].createRule[index1].filterList?.splice(index1, 1);
      };
      return {
        rules,
        alarmList,
        options,
        visible,
        editRemoveVisible,
        prevStep,
        addAlarmRule,
        addCreateRole,
        handleDeleteAlarm,
        handleDeleteCondition,
        addRemoveRule,
        handleDeleteRemoveCondition,
        handleCancel,
        handleCancel1,
        handleAlarmCancel,
        editAlarmCondition,
        keyTypeOptions,
        valueTypeOptions,
        operatorOptions,
        deleteFilter,
        addFilter,
        labelCol: { style: { width: '150px' } },
        wrapperCol: { span: 18 },
      };
    },
  });
</script>
<style lang="less" scoped>
  .step3 {
    width: 500px;
    margin: 0 auto;
  }
  .alarm-rule {
    height: 200px;
    display: flex;
    .alarm-remove {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>