<template>
  <ns-drawer
    v-model:visible="visible"
    width="520"
    :title="infoObject?.id ? '编辑告警规则' : '新增告警规则'"
    :footer-style="{ textAlign: 'right' }"
    :ok="btnClick"
    :cancel="handleClose"
    placement="right"
    @close="handleClose">
    <div style="padding: 18px; width: 100%; overflow: hidden">
      <a-form ref="formRef" :model="infoObject" :rules="rules">
        <a-form-item ref="site" label="站点" name="site">
          <a-tree-select
            v-model:value="infoObject.site"
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择站点"
            allow-clear
            tree-default-expand-all
            :field-names="{
              children: 'linkList',
              label: 'orgName',
              value: 'orgId',
            }"
            :tree-data="siteDataTree"
            tree-node-filter-prop="orgName" />
        </a-form-item>
        <a-form-item label="设备类型" name="deviceType">
          <a-cascader
            v-model:value="infoObject.deviceType"
            :options="deviceTypeTreeData"
            :field-names="{
              children: 'children',
              label: 'deviceType',
              value: 'id',
            }"
            :show-search="{ filterDeviceType }"
            @change="selectDeviceType"
            placeholder="请选择设备类型" />
        </a-form-item>
        <a-form-item label="设备名称" name="deviceName">
          <a-select
            v-model:value="infoObject.deviceName"
            :disabled="!(infoObject && infoObject.deviceType && infoObject.deviceType.length > 0)"
            style="width: 100%"
            :autoClearSearchValue="true"
            @change="selectDevice"
            placeholder="请选择设备名称">
            <template v-for="(item, index) in deviceNameTreeData" :key="index">
              <a-select-option :value="item.id">
                {{ item.deviceName }}
              </a-select-option>
            </template>
          </a-select>
        </a-form-item>
        <a-form-item label="设备点位" name="devicePoint">
          <a-select
            v-model:value="infoObject.devicePoint"
            show-search
            placeholder="请选择设备点位"
            style="width: 100%"
            :disabled="!infoObject?.deviceName"
            :options="devicePointData"
            :filter-option="filterDevicePoint" />
        </a-form-item>
        <a-form-item label="启用规则">
          <a-switch
            :checked="infoObject.enableRules === 1 ? true : false"
            :class="{
              'blue-background': infoObject.enableRules === 1 ? true : false,
              'grey-background': infoObject.enableRules === 1 ? false : true,
            }"
            @click="clickSwitch" />
        </a-form-item>
        <a-form-item label="取值类型" name="valueType">
          <a-select
            v-model:value="infoObject.valueType"
            placeholder="请选择取值类型"
            style="width: 100%"
            :options="qzOptions" />
        </a-form-item>
        <a-form-item label="异常描述" name="abnormalDescription">
          <a-textarea
            v-model:value="infoObject.abnormalDescription"
            style="height: 32px"
            placeholder="请输入异常描述"
            :autoSize="{ minRows: 1, maxRows: 1 }"
            show-count
            :maxlength="30" />
        </a-form-item>
        <a-form-item label="规则类型" name="ruleType">
          <a-radio-group v-model:value="infoObject.ruleType">
            <a-radio value="1">且 (and) </a-radio>
            <a-radio value="2">或 (or) </a-radio>
          </a-radio-group>
        </a-form-item>
        <template v-for="index in infoObject.alarmList?.length" :key="index">
          <div
            style="
              width: 100%;
              display: flex;
              margin-left: 42px;
              padding: 12px;
              border-color: #ff4d4f !important;
            ">
            <span style="line-height: 32px">{{ `逻辑${index}:` }}</span>
            <a-select
              v-model:value="infoObject.alarmList[index - 1].logic"
              style="width: 70px; margin-left: 12px"
              :options="ljOptions" />
            <span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span>
            <a-input
              style="width: 65px; margin-left: 6px"
              type="number"
              v-model:value="infoObject.alarmList[index - 1].num" />
            <div
              style="width: 70px; align-items: center; cursor: pointer"
              @click="deleteAlarmList(index - 1)">
              <img
                style="width: 14px; margin: 0 12px"
                src="https://files.axshare.com/gsc/4T0UQR/5a/e6/81/5ae6813d499c422383c7a15dd956523f/images/设备规则/u72.svg?pageId=cbce6e61-bc6a-4283-802d-993fce6151c0" />
            </div>
          </div>
          <div
            v-if="
              infoObject.alarmList[index - 1]?.num === null ||
              infoObject.alarmList[index - 1]?.logic === null
            "
            style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
            请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
          </div>
        </template>
        <div
          v-if="infoObject?.alarmList?.length < 2"
          style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
          逻辑至少2条
        </div>
        <div style="width: 100%; margin-top: 12px; display: flex; justify-content: flex-end">
          <a-button type="primary" @click="addAlarmList"> 新增</a-button>
        </div>
      </a-form>
    </div>
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { NsMessage } from '/nerv-lib/component';
  import { ref, toRaw } from 'vue';
  import type { SelectProps } from 'ant-design-vue';
  import type { ShowSearchType } from 'ant-design-vue/es/cascader';
  import { device } from '/@/api/deviceManage';
  import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';

  import { http } from '/nerv-lib/util';

  import type { Rule } from 'ant-design-vue/es/form';
  import { async } from '@antv/x6/lib/registry/marker/async';

  const visible = ref(false);
  // 父级数据
  const equipmentAlarm = ref({});
  //表单数据
  const infoObject = ref({
    site: null,
    ruleType: null,
    abnormalDescription: null,
    deviceType: [],
    devicePoint: null,
    valueType: null,
    deviceName: null,
    enableRules: 0,
    alarmList: [{ logic: null, num: null, isDelete: 0 }],
  });
  //删除的逻辑列表
  const delAlarmList = ref([]);
  const formRef = ref();
  //组织数
  const orgId = ref('');
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;
  //站点数
  const siteDataTree = ref([]);

  //设备类型树
  let deviceTypeTreeData = ref([]);
  //设备树
  let deviceNameTreeData = ref([]);
  //选择设备类型方法
  const selectDeviceType = (value: any, selectedOptions: any) => {
    //获取该类型设备
    getDevicePage({
      orgId: orgId.value,
      code: selectedOptions[selectedOptions.length - 1].code,
      pageNum: 1,
      pageSize: 999,
    });
  };
  //选择设备方法
  const selectDevice = (value: string) => {
    console.log(`selected ${value}`);
  };
  //获取设备列表
  const getDevicePage = (value: any) => {
    http.post(device.queryDevicePage, value).then((res) => {
      if (res.msg === 'success') {
        deviceNameTreeData.value = res.data.records;
      }
    });
  };
  //获取设备点位
  const getDevicePoint = (value: any) => {
    devicePointData.value = [];
    http.post(device.queryDevicePoint, value).then((res) => {
      if (res.msg === 'success') {
        res.data.forEach((item: any) => {
          devicePointData.value.push({
            value: item.id,
            label: item.code + ' ( ' + item.unit + ' ) ',
          });
        });
      }
    });
  };
  //设备点位
  const devicePointData = ref([]);
  //设备点位搜索
  const filterDevicePoint = (input: string, option: any) => {
    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
  //搜索设备类型
  const filterDeviceType: ShowSearchType['filter'] = (inputValue: any, path: any) => {
    return path.some(
      (option: any) => option.deviceType.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
    );
  };
  //取值类型
  const qzOptions = ref<SelectProps['options']>([
    { value: 1, label: '实时值', code: '1' },
    { value: 2, label: '平均值', code: '2' },
  ]);
  //逻辑
  const ljOptions = ref<SelectProps['options']>([
    { value: 0, label: '≥' },
    { value: 1, label: '>' },
    { value: 2, label: '≤' },
    { value: 3, label: '<' },
    { value: 4, label: '=' },
  ]);

  //开关
  const clickSwitch = () => {
    if (infoObject.value.enableRules === 1) {
      infoObject.value.enableRules = 0;
    } else {
      infoObject.value.enableRules = 1;
    }
  };
  const emit = defineEmits(['editObject']);

  // 定义一个递归函数来查找每一级的id 设备类型回显 层级方法
  function findParentIds(tree: any, targetId: number, result: any) {
    for (let item of tree) {
      if (item.children && item.children.length > 0) {
        if (item.children.some((child: any) => child.id === targetId)) {
          result.unshift(item.id); // 将当前节点的id添加到结果数组的最前面
          findParentIds(tree, item.id, result); // 递归查找父级节点的id
          break; // 找到后可以退出循环
        }
      }
    }
  }
  // 递归 获取当前 选择的设备类型 对象  用来获取设备列表
  const findNodeById = (nodes: any, id: any) => {
    for (let node of nodes) {
      if (node.id === id) {
        //获取设备树
        getDevicePage({ orgId: orgId.value, code: node.code, pageNum: 1, pageSize: 99 });
        return;
      } else if (node.children.length > 0) {
        const found = findNodeById(node.children, id);
        if (found) {
          //获取设备树
          getDevicePage({ orgId: orgId.value, code: found.code, pageNum: 1, pageSize: 99 });
          return;
        }
      }
    }
    return null; // 没有找到目标节点，返回 null
  };
  //父调子 页面显示方法
  const toggle = async (value: any, info: any) => {
    equipmentAlarm.value = info;

    //获取设备类型
    await http
      .post(device.queryDeviceTree, { orgId: orgId.value, pageNum: 1, pageSize: 10 })
      .then((res) => {
        if (res.msg === 'success') {
          deviceTypeTreeData.value = res.data;
        }
      });
    // 获取站点数据
    http.post('/carbon-smart/user/login/logInInfo', {}).then((res) => {
      if (res.msg === 'success') {
        siteDataTree.value = res.data.linkList;
      }
    });

    //判断 是新增 还是修改
    if (value) {
      //获取详情接口
      await http.post(deviceAlarms.configFindById, { id: value.id }).then((res) => {
        if (res.msg === 'success') {
          infoObject.value = res.data;
          // 获取 选择的设备类型对象
          let selectDevice = ref([Number(infoObject.value.deviceType)]);
          findNodeById(deviceTypeTreeData.value, Number(infoObject.value.deviceType));
          //获取设备点位
          getDevicePoint({ id: infoObject.value.deviceName });
          // 回显 选择设备类型
          findParentIds(deviceTypeTreeData.value, infoObject.value.deviceType, selectDevice.value);
          //枚举 需要重新赋值
          if (
            infoObject.value.hxAlarmRuleLogicList &&
            infoObject.value.hxAlarmRuleLogicList.length > 0
          ) {
            infoObject.value.hxAlarmRuleLogicList.forEach((item: any) => {
              item.logic = item.logic.value;
            });
          }
          infoObject.value.alarmList = infoObject.value.hxAlarmRuleLogicList || [];
          delete infoObject.value.hxAlarmRuleLogicList;
          infoObject.value.deviceType = selectDevice;
          infoObject.value.ruleType = infoObject.value.ruleType + '';
        }
      });
    } else {
      //获取设备树
      infoObject.value = {
        site: null,
        ruleType: null,
        abnormalDescription: null,
        deviceType: [],
        devicePoint: null,
        valueType: null,
        deviceName: null,
        enableRules: 0,
        alarmList: [{ logic: null, num: null, isDelete: 0 }],
      };
    }

    visible.value = !visible.value;
  };
  //表单 判断规格
  const rules = {
    site: [{ required: true, message: '请选择站点', trigger: 'change' }],
    deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
    enableRules: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
    deviceName: [{ required: true, message: '请选择设备名称', trigger: 'change' }],
    devicePoint: [{ required: true, message: '请选择设备点位', trigger: 'change' }],
    valueType: [{ required: true, message: '请选择取值类型', trigger: 'change' }],
    ruleType: [{ required: true, message: '请选择规则类型', trigger: 'change' }],
    abnormalDescription: [
      {
        required: true,
        message: '请输入异常描述',
        trigger: 'blur',
        validator: (rules: any, abnormalDescription: any, cbfn: any) => {
          if (abnormalDescription.trim() !== '') {
            cbfn();
          } else {
            cbfn('告警标题不能为空');
          }
        },
      },
    ],
    alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
    number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
  };
  // 确认按钮
  const btnClick = () => {
    infoObject.value.alarmList.forEach((item) => {
      if (item.logic === null || item.num === null) {
        return;
      }
    });
    if (infoObject.value.alarmList.length < 2) {
      NsMessage.error('请选择逻辑和数值');
      return;
    }
    //数据是否验证通过
    formRef.value.validate().then(() => {
      let data = { ...infoObject.value };
      // 配置关联id
      data.equipmentAlarmId = equipmentAlarm.value.id;
      // 逻辑列表
      data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
      data.hxAlarmRuleLogicList.forEach((item) => {
        const num = Number(item.num);
        if (!isNaN(num)) {
          item.num = Number(num.toFixed(2));
        } else {
          item.num = 0; // 可以设置为0或其他默认值
        }
      });
      // 设备类型 只取最后一级的id
      data.deviceType = infoObject.value.deviceType[infoObject.value.deviceType.length - 1];
      data.ruleType = Number(data.ruleType);
      data.errorCode = equipmentAlarm.value.errorCode;
      delete data.alarmList;
      // 发起 HTTP POST 请求
      http
        .post(deviceAlarms.configAddOrUpNewData, data)
        .then((res) => {
          if (res.msg === 'success') {
            // 操作成功时的处理
            if (data.id) {
              NsMessage.success('告警规则编辑成功');
            } else {
              NsMessage.success('告警规则新增成功');
            }
            emit('editObject', null);
            handleClose();
          }
        })
        .catch((error) => {
          // 错误处理
          console.error('请求失败：', error);
        });
    });
  };
  //取消按钮
  const handleClose = () => {
    // 清楚校验错误信息
    formRef.value.resetFields();
    siteDataTree.value = [];
    //对象清空
    infoObject.value = {
      site: null,
      ruleType: null,
      abnormalDescription: null,
      deviceType: [],
      devicePoint: null,
      enableRules: 0,
      alarmList: [{ logic: null, num: null, isDelete: 0 }],
    };
    visible.value = false;
    //清空删除列表
    delAlarmList.value = [];
  };
  // 新增逻辑列表
  const addAlarmList = () => {
    if (infoObject.value.alarmList) {
      infoObject.value.alarmList.push({ logic: null, num: null, isDelete: 0 });
    } else {
      infoObject.value.alarmList = [{ logic: null, num: null, isDelete: 0 }];
    }
  };
  // 删除 逻辑列表、
  const deleteAlarmList = (index: number) => {
    // 确保 index 在有效范围内
    if (index < infoObject.value.alarmList.length && index >= 0) {
      const alarmItemToDelete = infoObject.value.alarmList[index];
      if (alarmItemToDelete?.id) {
        // 添加到 delAlarmList 中，并标记为已删除
        delAlarmList.value.push({ ...alarmItemToDelete, isDelete: 1 });
      }
      // 从 infoObject 中删除该元素
      infoObject.value.alarmList.splice(index, 1);
    }
  };
  defineExpose({
    toggle,
    handleClose,
    formRef,
  });
</script>
<style scoped lang="less">
  .drawerContainer {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  .blue-background.ant-switch-checked {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(0, 150, 229, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch {
    background-color: grey !important;
  }

  .blue-background.ant-switch-checked .ant-switch-handle {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(0, 150, 229, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch .ant-switch-handle {
    background-color: grey !important;
  }
  /deep/ .ant-form-item-label {
    z-index: 20;
    text-align: right;
    width: 23%;
  }
</style>
