<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"
                /></p>
                <p class="mt-4 ml-4"
                  >启用规则：始终启用
                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
                /></p>
                <p class="mt-4 ml-4"
                  >详情：1 <EditOutlined 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>
        </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"
                  >详情：1 <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
                /></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>
        </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,
    Button,
    Select,
    Tooltip,
  } from 'ant-design-vue';
  import {
    DeleteOutlined,
    MinusCircleOutlined,
    PlusCircleOutlined,
    PlusOutlined,
    EditOutlined,
  } from '@ant-design/icons-vue';

  import { CollapseContainer } from '/@/components/Container/index';
  interface alarmListItem {
    alarmType: string;
    isPass: boolean;
    alarmRule: [];
    removeRule: [];
  }
  export default defineComponent({
    components: {
      DeleteOutlined,
      MinusCircleOutlined,
      PlusCircleOutlined,
      CollapseContainer,
      EditOutlined,
      PlusOutlined,
      [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 rules = {
        alarmType: [
          {
            required: true,
            message: '报警类型必填',
            trigger: 'blur',
          },
        ],
      };

      const prevStep = () => {
        emit('prev');
      };
      // 添加报警规则
      const addAlarmRule = () => {
        alarmList.value.push({
          alarmType: '',
          isPass: false,
          alarmRule: [],
          removeRule: [],
        });
      };
      const handleDeleteAlarm = (index) => {
        alarmList.value.splice(index, 1);
      };
      // 添加创建条件
      const addCreateRole = (index) => {
        alarmList.value[index].alarmRule.push('1');
      };
      const handleDeleteCondition = (index, index1) => {
        alarmList.value[index].alarmRule.splice(index1, 1);
      };

      // 清除报警规则
      const addRemoveRule = (index) => {
        alarmList.value[index].removeRule.push('1');
      };
      const handleDeleteRemoveCondition = (index, index1) => {
        alarmList.value[index].removeRule.splice(index1, 1);
      };

      return {
        rules,
        alarmList,
        options,
        prevStep,
        addAlarmRule,
        addCreateRole,
        handleDeleteAlarm,
        handleDeleteCondition,
        addRemoveRule,
        handleDeleteRemoveCondition,
        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>