Web/admin.ui.plus-master/src/views/admin/yujing/alarmRules/components/add-alarmRules.vue

<template>
  <div class="layout-pd">
    <el-dialog 
      v-model="Data.isShowDialog" 
      style="width: 75%;"
      @close="handleDialogClose"
      @open="handleDialogOpen"
    >
      <!-- 标题区域 -->
      <div style="width: 100%;display: flex;justify-content: left;align-items: center;">
        <h1 style="margin-bottom: 10px;font-size: 24px;">{{ isEditing ? '编辑报警推送规则' : '添加报警推送规则' }}</h1>
      </div>
      <div style="margin-bottom: 10px ;">
        <hr />
      </div>
      
      <!-- 规则名称 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="规则名称：" style="width: 100%;" prop="ruleName">
            <el-input v-model="Data.Filter.ruleName" style="width: 100%;" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 标签选择 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="标签：" style="width: 100%;" prop="labelId">
            <el-select v-model="Data.Filter.labelId" placeholder="请选择标签">
              <el-option v-for="item in Data.labelList" :key="item.id" :label="item.name" :value="item.id.toString()" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 推送用户选择（树形组件） -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="推送用户：" style="width: 100%;" prop="pushUserid">
            <el-tree
              ref="userTreeRef"
              :data="treeUserData"
              show-checkbox
              node-key="id"
              :props="treeProps"
              :check-strictly="false"
              :default-checked-keys="selectedUserIds"
              :default-expanded-keys="expandedKeys"
              @check="handleUserCheck"
              @node-click="handleNodeClick"
              style="width: 100%; max-height: 300px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 4px; padding: 10px;"
            >
              <template #default="{ node, data }">
                <div class="tree-node-content">
                  <span :class="{'role-node': data.isRole}">{{ data.label }}</span>
                  <!-- 角色节点显示展开/折叠按钮 -->
                  <el-button 
                    v-if="data.isRole" 
                    type="text" 
                    size="small"
                    @click.stop="toggleRoleExpand(node)"
                    class="expand-btn"
                  >
                    <!-- {{ node.expanded ? '折叠' : '展开' }} -->
                  </el-button>
                </div>
              </template>
            </el-tree>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 新增：报警等级筛选下拉框 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="报警等级：" style="width: 100%;" prop="alarmLevel">
            <el-select 
              v-model="Data.Filter.alarmLevel" 
              placeholder="请选择报警等级" 
              clearable
              @change="handleAlarmLevelChange"
            >
              <el-option 
                v-for="item in alarmLevelDict" 
                :key="item.id" 
                :label="`${item.name}(${item.value})`" 
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 油站选择 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="油站：" style="width: 100%;" prop="stationid">
            <el-select
              v-model="selectedStationIds"
              placeholder="请选择油站"
              multiple
              style="width: 100%;"
              ref="stationSelectRef"
              @change="handleStationChange"
              :key="stationSelectKey"
            >
              <el-option
                v-for="station in Data.stationList"
                :key="station.id"
                :label="station.name"
                :value="station.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 备注信息 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="备&#8195;&#8195;注：" style="width: 100%;">
            <el-input type="textarea" rows="5" v-model="Data.Filter.remark" style="width: 100%;" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 推送方式选择 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="推送方式：" style="width: 100%;" prop="pushMethod">
            <!-- 推送总开关 -->
            <el-row style="width: 100%;margin-bottom: 10px;">
              是否推送<el-switch v-model="Data.pushEnabled" style="margin-left: 3%;" />
            </el-row>
            
            <!-- 微信和邮箱开关（仅在总开关打开时显示） -->
            <template v-if="Data.pushEnabled">
              <el-row style="width: 100%;">
                微信公众号<el-switch v-model="Data.radioValue1" style="margin-left: 3%;" @change="radioChange" />
              </el-row>
              <el-row style="width: 100%;">
                邮&#8195;&#8195;&#8195;箱<el-switch v-model="Data.radioValue2" style="margin-left: 3%;" @change="radioChange" />
              </el-row>
            </template>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 模板选择（受总开关控制） -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;" v-if="Data.pushEnabled">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="模&#8195;&#8195;板：" style="width: 50%;" prop="mode1">
            <el-select v-model="Data.mode1" class="m-2" placeholder="微信模板" v-if="Data.radioValue1" @change="modeChange">
              <el-option v-for="item in templateData.wxList" :key="item.id" :label="item.templateName" :value="item.id.toString()" />
            </el-select>
          </el-form-item>
          <el-form-item label="&#8195;&#8195;&#8195;&#8195;" style="width: 100%;" prop="mode2">
            <el-select v-model="Data.mode2" class="m-2" placeholder="邮箱模板" v-if="Data.radioValue2" @change="modeChange">
              <el-option v-for="item in templateData.emailList" :key="item.id" :label="item.templateName" :value="item.id.toString()" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 正则匹配 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="正则匹配：" style="width: 100%;">
            <el-input type="textarea" rows="2" v-model="Data.Filter.regular" style="width: 100%;" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 关键字匹配 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="关键字匹配：" style="width: 100%;">
            <el-input type="textarea" rows="5" v-model="Data.Filter.keyWord" style="width: 100%;" placeholder="如有多个关键字，请用英文“,”分割" />
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 优先级设置 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="&#8195;优先级:" style="width: 100%;" prop="taskPriority">
            <el-input-number v-model="Data.Filter.taskPriority" :controls="false" :min="1" :max="9" />
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 报警条件配置 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="报警条件配置" style="width: 100%;">
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 报警条件部分 -->
      <div v-if="Data.showAlarmConditions">
        <div v-for="(condition, index) in Data.condition" :key="index" 
             style="width: 100%;display: flex;justify-content: center;align-items: center; margin-top: 10px;">
          <el-form :inline="true" @submit.stop.prevent :model="condition" :rules="conditionRules">
            <el-form-item :label="index === 0 ? '条&#8195;&#8195;件:' : '附加条件:'" style="width: 130%; ">
              <el-row :gutter="20" style="width: 100%;">
                <!-- 报警设备 -->
                <el-col :span="8">
                  <div style="flex:1;">
                    <span style="margin-right: 13px;">报警设备:</span>
                    <el-form-item prop="Left" style="display:flex">
                      <el-select v-model="condition.Left" placeholder="请选择" >
                        <el-option 
                          v-for="item in Data.alarmEquipment" 
                          :key="item" 
                          :label="item" 
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                
                <!-- 报警类型 -->
                <el-col :span="8">
                  <div style="flex:1;">
                    <span style="margin-right: 13px;">报警类型:</span>
                    <el-form-item prop="inthe"  style="display:flex">
                      <el-select v-model="condition.inthe" placeholder="请选择" >
                        <el-option 
                          v-for="item in Data.alarmType" 
                          :key="item" 
                          :label="item" 
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                
                <!-- 报警来源 -->
                <el-col :span="8">
                  <div style="flex:1;">
                    <span style="margin-right: 13px;">报警来源:</span>
                    <el-form-item prop="Right" style="display:flex">
                      <el-select v-model="condition.Right" placeholder="请选择">
                        <el-option 
                          v-for="item in Data.alarmSource" 
                          :key="item" 
                          :label="item" 
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
      </div>
      
      <!-- 报警条件添加/删除按钮 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-button type="primary" icon="ele-Plus" style="font-size: large" @click="addCondition" />
        <el-button v-if="Data.condition.length > 1" type="primary" icon="ele-Minus" style="font-size: large" @click="removeCondition" />
      </div>

      <!-- 维修条件配置 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent>
          <el-form-item label="维修条件配置" style="width: 100%;">
          </el-form-item>
        </el-form>
      </div>

      <!-- 维修条件部分 -->
      <div v-if="Data.showRepairConditions">
        <div v-for="(condition2, index) in Data.condition2" :key="index" 
             style="width: 100%;display: flex;justify-content: center;align-items: center; margin-top: 10px;">
          <el-form :inline="true" @submit.stop.prevent :model="condition2" :rules="condition2Rules">
            <el-form-item :label="index === 0 ? '条&#8195;&#8195;件:' : '附加条件:'" style="width: 130%;">
              <el-row :gutter="20" style="width: 100%;">
                <el-col :span="8">
                  <div style="flex:1;">
                    <span style="margin-right: 13px;">维修类型：</span>
                    <el-form-item prop="Left" style="display:flex">
                      <el-select v-model="condition2.Left" placeholder="请选择">
                        <el-option 
                          v-for="item in Data.alarmproType" 
                          :key="item" 
                          :label="item" 
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                
                <el-col :span="8">
                  <div style="flex:1;">
                    <span style="margin-right: 13px;">维修状态：</span>
                    <el-form-item prop="Right" style="display:flex">
                      <el-select v-model="condition2.Right" placeholder="请选择" >
                        <el-option 
                          v-for="item in Data.alarmproStatus" 
                          :key="item" 
                          :label="item" 
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
      </div>
      
      <!-- 维修条件添加/删除按钮 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-button type="primary" icon="ele-Plus" style="font-size: large" @click="addRepairCondition" />
        <el-button v-if="Data.condition2.length > 1" type="primary" icon="ele-Minus" style="font-size: large" @click="removeCondition2" />
      </div>

      <!-- 保存按钮 -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
          <el-row justify="end" style="margin-top: 30px;">
            <el-button @click="Data.isShowDialog = false">取消</el-button>
            <el-button type="primary" @click="submitForm" style="margin-left: 10px;">{{ isEditing ? '更新' : '保存' }}</el-button>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="AlarmRuleDialog">
import { onMounted, reactive, ref, nextTick, watch, computed } from 'vue';
import { alarmRluesFilterModel } from "/@/api/admin/AlarmService/alarmRulesDto";
import { alarmRulesApi, stationApi } from "/@/api/admin/AlarmService/alarmRulesApi";
import { RoleApi } from '/@/api/admin/Role'
import { pushTemplateApi } from "/@/api/admin/AlarmService/pushTemplateApi";
import { TemplateFilterDto } from "/@/api/admin/AlarmService/pushTemplateDto";
import eventBus from "/@/utils/mitt";
import { ElMessage, type FormRules } from 'element-plus'
import { UserListItem, StationItem } from "/@/api/admin/AlarmService/alarmRulesDto";
import { DictApi } from "/@/api/admin/Dict";
import { PageInputDictGetPageDto } from "/@/api/admin/data-contracts";

// 报警等级字典项接口定义
interface DictItem {
  id: number;
  name: string;
  code: string;
  value: string;
  enabled: boolean;
  sort: number;
}

// 状态标识：是否为编辑模式
const isEditing = ref(false);

// 油站选择器相关引用和状态
const stationSelectRef = ref();
const stationSelectKey = ref(0);
const selectedStationIds = ref<number[]>([]);
const stationListLoaded = ref(false);

// 树形组件引用
const userTreeRef = ref();

// 推送用户选择专用变量
const selectedUserIds = ref<number[]>([]); // 存储选中的用户ID
const expandedKeys = ref<string[]>([]); // 存储展开的角色节点ID

// 树形结构配置
const treeProps = {
  label: 'label',
  children: 'children',
  disabled: 'disabled'
};

// 条件验证规则
const conditionRules = reactive<FormRules>({
  Left: [{ required: true, message: '请选择报警设备', trigger: 'change' }],
  inthe: [{ required: true, message: '请选择报警类型', trigger: 'change' }],
  Right: [{ required: true, message: '请选择报警来源', trigger: 'change' }]
})

const condition2Rules = reactive<FormRules>({
  Left: [{ required: true, message: '请选择维修类型', trigger: 'change' }],
  Right: [{ required: true, message: '请选择维修状态', trigger: 'change' }]
})

// 报警等级字典数据
const alarmLevelDict = ref<DictItem[]>([]);

const Data = reactive({
  isShowDialog: false,
  showAlarmConditions: false,
  showRepairConditions: false,
  pushEnabled: false, // 推送总开关状态
  stationList: [] as StationItem[],
  Filter: {
    ruleName: '',
    roleMappingId: [] as number[],
    labelId: "",
    remark: '',
    pushMethod: '',
    pushTemplateMappingID: [] as number[],
    regular: '',
    keyWord:"",
    isExclusive: false,
    isExclusiveMaintenance: false,
    taskPriority: 1,
    triggerMethod: null,
    maintenanceTriggerMethod: null,
    conditionsJson: '' as any,
    maintenanceJson: '' as any,
    pushUserid: [] as number[], // 最终提交的用户ID数组
    stationid: [] as number[],
    userName: "",
    userPhone: "",
    userId: "",
    condition2: "",
    condition: "",
    mode1: '',
    id: 0,
    alarmLevel: undefined, // 新增：报警等级筛选值
  } as unknown as alarmRluesFilterModel & { alarmLevel?: string },
  roleList: [] as any,
  labelList: [] as any,
  userList: [] as UserListItem[],
  radioValue1: false,
  radioValue2: false,
  mode1: '',
  mode2: '',
  condition: [{ Left: '', inthe: '', Right: '' }],
  condition2: [{ Right: '', Left: '' }],
  alarmEquipment: ["安全装置","编码器","计控主板","监控微处理器","智能型控制阀","油气回收控制板","显示屏","计量器","加油机","油枪"],
  alarmType: ["加油机离线","通信异常","非法部件","厂商不符","绑定错误","监控微处理器报警","安全装置报警","加油机报警","检定"],
  alarmSource: ['云平台', '安全装置'],
  alarmproType: ["油机维修","装置维修"],
  alarmproStatus: ["正在维修","结束维修"]
})

// 转换用户列表为树形结构数据 - 确保用户ID为数字，角色ID为字符串
const treeUserData = computed(() => {
  return Data.userList.map((group: any) => {
    // 为角色生成唯一ID（字符串类型，带前缀）
    const roleId = `role_${group.roleName.replace(/\s+/g, '_')}`;
    return {
      id: roleId,
      label: `角色：${group.roleName}`,
      isRole: true,
      children: group.users.map((user: any) => ({
        id: Number(user.id), // 强制转换为数字类型
        label: user.name || `用户${user.id}`,
        phone: user.phone || '',
        isRole: false,
        disabled: false
      }))
    };
  });
});

// 处理角色展开/折叠
const toggleRoleExpand = (node: any) => {
  node.expanded = !node.expanded;
  if (node.expanded) {
    expandedKeys.value.push(node.id);
  } else {
    expandedKeys.value = expandedKeys.value.filter(key => key !== node.id);
  }
};

// 处理节点点击
const handleNodeClick = (data: any, node: any) => {
  if (data.isRole) {
    toggleRoleExpand(node);
  }
};

// 处理用户选择
const handleUserCheck = (data: any, checkInfo: any) => {
  // 获取所有选中的节点ID
  const allCheckedIds = checkInfo.checkedKeys || [];
  
  // 过滤出用户ID（仅保留数字类型，排除角色ID）
  const userIds = allCheckedIds
    .filter((id: any) => {
      // 角色ID是带前缀的字符串，用户ID是数字
      return typeof id === 'number' && !isNaN(id);
    });
  
  // 去重并更新选中的用户ID
  const uniqueUserIds = [...new Set(userIds)];
  selectedUserIds.value = uniqueUserIds;
  Data.Filter.pushUserid = uniqueUserIds;
};

// 监听油站选择变化
const handleStationChange = (values: number[]) => {
  Data.Filter.stationid = [...values];
};

// 处理报警等级变化
const handleAlarmLevelChange = (value: string) => {
  Data.Filter.alarmLevel = value;
};

// 获取用户列表
const getUserList = async () => {
  try {
    const res = await new alarmRulesApi().getWxUserRole({});
    const userDataArray = res.data || [];
    const userMap = new Map<string, UserListItem[]>();
    
    userDataArray.forEach((roleObj: any) => {
      const roleName = roleObj.roleName || '未知角色';
      // 过滤出有效用户（确保ID存在且可转换为数字）
      const validUsers = (roleObj.users || []).filter((user: any) => {
        const id = Number(user.id);
        return !isNaN(id) && id > 0;
      });
      
      validUsers.forEach((userObj: any) => {
        if (!userMap.has(roleName)) {
          userMap.set(roleName, []);
        }
        userMap.get(roleName)!.push({
          id: Number(userObj.id), // 确保ID是数字
          name: userObj.name || `用户${userObj.id}`,
          phone: userObj.phone || '',
          roleName: roleName
        });
      });
    });
    
    Data.userList = Array.from(userMap.entries()).map(([role, users]) => ({
      roleName: role,
      users: users
    }));
  } catch (error) {
    console.error("获取用户列表失败:", error);
    ElMessage.error("用户列表加载失败");
    Data.userList = [];
  }
};

// 获取油站列表
const getStationList = async () => {
  try {
    const requestData = {
      currentPage: 1,
      pageSize: 1000,
      dynamicFilter: {},
      filter: {}
    };
    const res = await new stationApi().getStationList(requestData);
    Data.stationList = res.data?.list || [];
    stationListLoaded = ref(true);
  } catch (error) {
    stationListLoaded = ref(true);
  }
};

// 获取报警等级字典数据
const fetchAlarmLevelDict = async () => {
  try {
    // 构造字典查询参数
    const data: PageInputDictGetPageDto = {
      CurrentPage: 1,
      PageSize: 100,
      Filter: {
        dictTypeId: 685895581360197, // 报警等级字典类型ID
        name: ""
      }
    };
    
    // 调用字典接口
    const res = await new DictApi().getPage(data);
    
    // 处理返回数据
    if (res.success && res.data) {
      alarmLevelDict.value = res.data.list || [];
      console.log("报警等级字典数据获取成功", alarmLevelDict.value);
    } else {
      console.error("获取报警等级字典数据失败", res.msg);
    }
  } catch (error) {
    console.error("获取报警等级字典数据异常", error);
  }
};

// 设置油站选择
const setStationSelection = (ids: number[]) => {
  if (!stationListLoaded.value) {
    const checkLoaded = setInterval(() => {
      if (stationListLoaded.value) {
        clearInterval(checkLoaded);
        setStationSelection(ids);
      }
    }, 100);
    return;
  }
  
  const validIds = ids.filter(id => 
    Data.stationList.some(station => station.id === id)
  );
  
  nextTick(() => {
    selectedStationIds.value = [...validIds];
    Data.Filter.stationid = [...validIds];
    stationSelectKey.value++;
  });
};

const templateData = reactive({
  Filter: {
    currentPage: 1,
    pageSize: 100,
    filter: {
      templateName: "",
      templateType: "",
      templateContent: "",
      id: 0
    }
  } as TemplateFilterDto,
  wxList: [] as any,
  emailList: [] as any
})

const radioChange = () => {
  if (Data.pushEnabled) { // 只有总开关打开时才处理推送方式
    if (Data.radioValue1) {
      Data.Filter.pushMethod = 'wx'
      if (Data.radioValue2) {
        Data.Filter.pushMethod += ',email'
      }
    } else {
      Data.Filter.pushMethod = Data.radioValue2 ? 'email' : '';
    }
  } else {
    Data.Filter.pushMethod = ''; // 总开关关闭时清空推送方式
  }
};

// 获取报警标签
const getLabel = async () => {
  try {
    const res = await new RoleApi().getLabel({
      currentPage: 1,
      pageSize: 100,
      filter: {
        dictTypeId: 677693042573381
      }
    })
    Data.labelList = res.data?.list?.map((item: any) => ({
      id: item.id.toString(),
      name: item.name
    })) || []
  } catch (error) {
    console.error('获取标签失败:', error)
    Data.labelList = []
  }
}

// 获取角色列表
const getRole = async () => {
  const res = await new RoleApi().getList()
  Data.roleList = res.data?.map((item: any) => ({ 'id': item.id, 'name': item.name })) || []
}

// 查询模板信息
const funSelect = async () => {
  try {
    const res = await new pushTemplateApi().getData(templateData.Filter)
    const data = res?.data || [];
    
    templateData.wxList = data
      .filter((item: any) => item.templateType === "微信")
      .map((item: any) => ({ ...item, id: item.id.toString() }));
    templateData.emailList = data
      .filter((item: any) => item.templateType === "邮箱")
      .map((item: any) => ({ ...item, id: item.id.toString() }));
  } catch (error) {
    console.error('获取模板列表失败:', error);
  }
}

const modeChange = () => {
  Data.Filter.pushTemplateMappingID = [];
  
  if (Data.pushEnabled && Data.radioValue1 && Data.mode1) {
    const wxItem = templateData.wxList.find((item: any) => item.id === Data.mode1);
    if (wxItem) Data.Filter.pushTemplateMappingID.push(Number(wxItem.id));
  }
  
  if (Data.pushEnabled && Data.radioValue2 && Data.mode2) {
    const emailItem = templateData.emailList.find((item: any) => item.id === Data.mode2);
    if (emailItem) Data.Filter.pushTemplateMappingID.push(Number(emailItem.id));
  }
}

// 弹窗关闭处理
const handleDialogClose = () => {};

// 弹窗打开处理
const handleDialogOpen = () => {
  if (!stationListLoaded.value) {
    getStationList();
  } else if (!isEditing.value) {
    selectedStationIds.value = [];
  }
};

// 重置表单
const resetForm = () => {
  selectedUserIds.value = [];
  expandedKeys.value = [];
  
  Data.Filter = {
    ruleName: '',
    roleMappingId: [],
    labelId: "",
    remark: '',
    pushMethod: '',
    pushTemplateMappingID: [],
    regular: '',
    keyWord: "",
    isExclusive: false,
    isExclusiveMaintenance: false,
    taskPriority: 1,
    triggerMethod: null,
    maintenanceTriggerMethod: null,
    conditionsJson: '',
    maintenanceJson: '',
    pushUserid: [],
    stationid: [],
    userName: "",
    userPhone: "",
    userId: "",
    condition2: "",
    condition: "",
    mode1: '',
    id: 0,
    alarmLevel: undefined, // 重置报警等级筛选
  } as unknown as alarmRluesFilterModel & { alarmLevel?: string };
  
  Data.radioValue1 = false;
  Data.radioValue2 = false;
  Data.pushEnabled = false; // 重置总开关状态
  Data.mode1 = '';
  Data.mode2 = '';
  Data.showAlarmConditions = false;
  Data.showRepairConditions = false;
  Data.condition = [{ Left: '', inthe: '', Right: '' }];
  Data.condition2 = [{ Left: '', Right: '' }];
  selectedStationIds.value = [];
};

onMounted(() => {
  getLabel();
  getRole();
  funSelect();
  getUserList();
  getStationList();
  fetchAlarmLevelDict(); // 加载报警等级字典数据
});

// 添加报警条件
const addCondition = () => {
  if (!Data.showAlarmConditions) {
    Data.showAlarmConditions = true
  } else {
    const lastCondition = Data.condition[Data.condition.length - 1]
    if (!lastCondition.Left || !lastCondition.inthe || !lastCondition.Right) {
      ElMessage.warning('请先填写当前条件的所有字段')
      return
    }
    Data.condition.push({ Left: '', inthe: '', Right: '' })
  }
}

// 添加维修条件
const addRepairCondition = () => {
  if (!Data.showRepairConditions) {
    Data.showRepairConditions = true
  } else {
    const lastCondition = Data.condition2[Data.condition2.length - 1]
    if (!lastCondition.Left || !lastCondition.Right) {
      ElMessage.warning('请先填写当前条件的所有字段')
      return
    }
    Data.condition2.push({ Left: '', Right: '' })
  }
}

// 删除报警条件
const removeCondition = () => {
  if (Data.condition.length > 1) {
    Data.condition.pop()
  } else {
    Data.showAlarmConditions = false
    Data.condition = [{ Left: '', inthe: '', Right: '' }]
  }
}

// 删除维修条件
const removeCondition2 = () => {
  if (Data.condition2.length > 1) {
    Data.condition2.pop()
  } else {
    Data.showRepairConditions = false
    Data.condition2 = [{ Left: '', Right: '' }]
  }
}

// 提交表单
const submitForm = async () => {
  console.log('提交时选中的用户ID:', selectedUserIds.value);
  
  // 验证规则名称
  if (!Data.Filter.ruleName) {
    ElMessage.warning('请输入规则名称')
    return
  }
  
  // 验证推送用户
  if (!Array.isArray(selectedUserIds.value) || selectedUserIds.value.length === 0) {
    ElMessage.warning('请选择推送用户');
    return;
  }
  
  // 验证油站选择
  if (selectedStationIds.value.length === 0) {
    ElMessage.warning('请选择油站');
    return;
  }
  
  // 如果开启了推送，验证模板选择
  if (Data.pushEnabled) {
    if (Data.radioValue1 && !Data.mode1) {
      ElMessage.warning('请选择微信模板')
      return
    }
    if (Data.radioValue2 && !Data.mode2) {
      ElMessage.warning('请选择邮箱模板')
      return
    }
    // 验证至少选择一种推送方式
    if (!Data.radioValue1 && !Data.radioValue2) {
      ElMessage.warning('请至少选择一种推送方式')
      return
    }
  }
  
  // 准备提交数据
  const submitData = {
    ...Data.Filter,
    conditionsJson: Data.showAlarmConditions ? JSON.stringify(Data.condition) : null,
    maintenanceJson: Data.showRepairConditions ? JSON.stringify(Data.condition2) : null,
    pushUserid: selectedUserIds.value,
    stationid: selectedStationIds.value,
    pushTemplateMappingID: Data.Filter.pushTemplateMappingID,
    labelId: Data.Filter.labelId || null,
    alarmLevel: Data.Filter.alarmLevel // 包含报警等级筛选值
  }
  
  try {
    const api = new alarmRulesApi(); 
    if (isEditing.value && Data.Filter.id) {
      await api.addForm(submitData);
      ElMessage.success('更新成功');
    } else {
      await api.addForm(submitData);
      ElMessage.success('保存成功');
    }
    eventBus.emit('refreshView');
    Data.isShowDialog = false;
  } catch (error) {
    console.error(`${isEditing.value ? '更新' : '保存'}失败:`, error);
    ElMessage.error(`${isEditing.value ? '更新' : '保存'}失败，请稍后重试`);
  }
}

/**
 * 打开表单对话框
 */
const openDialog = (row?: alarmRluesFilterModel & { alarmLevel?: string }) => {
  try {
    isEditing.value = !!row;
    resetForm();
    
    if (row) {
      // 处理用户ID
      let pushUserIds: number[] = [];
      if (row.pushUserid) {
        if (Array.isArray(row.pushUserid)) {
          pushUserIds = row.pushUserid.map(id => Number(id)).filter(id => !isNaN(id) && id > 0);
        } else if (typeof row.pushUserid === 'string') {
          pushUserIds = row.pushUserid
            .split(',')
            .map(id => Number(id))
            .filter(id => !isNaN(id) && id > 0);
        } else if (typeof row.pushUserid === 'number' && !isNaN(row.pushUserid)) {
          pushUserIds = [row.pushUserid];
        }
      }
      
      // 设置用户选择
      selectedUserIds.value = pushUserIds;
      Data.Filter.pushUserid = pushUserIds;
      
      // 处理油站ID
      const stationIds = row.stationid
        ? (Array.isArray(row.stationid) 
          ? row.stationid.map(Number) 
          : [Number(row.stationid)])
        : [];

      // 复制行数据到表单
      Data.Filter = {
        ...row,
        roleMappingId: row.roleMappingId || [],
        pushTemplateMappingID: row.pushTemplateMappingID ? 
          (Array.isArray(row.pushTemplateMappingID) 
            ? row.pushTemplateMappingID.map(Number) 
            : [Number(row.pushTemplateMappingID)]) : [],
        stationid: stationIds,
        labelId: row.labelId?.toString() || "",
        id: row.id || 0,
        alarmLevel: row.alarmLevel // 设置报警等级
      } as unknown as alarmRluesFilterModel & { alarmLevel?: string };
      
      // 处理推送方式和总开关状态
      const pushMethods = Array.isArray(row.pushMethod) 
        ? row.pushMethod 
        : (row.pushMethod?.split(',') || []);
      Data.pushEnabled = pushMethods.length > 0;
      Data.radioValue1 = pushMethods.includes('wx');
      Data.radioValue2 = pushMethods.includes('email');
      radioChange();
      
      // 处理油站数据
      setStationSelection(stationIds);
      
      // 处理模板
      const templateIds = Data.Filter.pushTemplateMappingID.map(id => id.toString());
      Data.mode1 = '';
      Data.mode2 = '';
      templateIds.forEach(strId => {
        const wxItem = templateData.wxList.find((item: any) => item.id === strId);
        if (wxItem) Data.mode1 = strId;
        const emailItem = templateData.emailList.find((item: any) => item.id === strId);
        if (emailItem) Data.mode2 = strId;
      });
    }

    Data.isShowDialog = true;
  } catch (error) {
    console.error('打开弹窗时出错:', error);
    Data.isShowDialog = true;
    ElMessage.error('打开弹窗时出错，但已尝试显示');
  }
};

// 监听模板列表加载完成
watch(
  () => [templateData.wxList.length, templateData.emailList.length],
  () => {
    if (isEditing.value && Data.Filter.pushTemplateMappingID.length > 0) {
      const templateIds = Data.Filter.pushTemplateMappingID.map(id => id.toString());
      Data.mode1 = '';
      Data.mode2 = '';
      templateIds.forEach(strId => {
        const wxItem = templateData.wxList.find((item: any) => item.id === strId);
        if (wxItem) Data.mode1 = strId;
        const emailItem = templateData.emailList.find((item: any) => item.id === strId);
        if (emailItem) Data.mode2 = strId;
      });
      modeChange();
    }
  }
);

defineExpose({
  openDialog,
})
</script>

<style scoped lang="scss">
.my-el-link {
  font-size: 12px;
}

.el-form {
  width: 60%;
}

.el-form .el-col{
  margin: 0 !important;
}

::v-deep .el-form-item__label {
  width: 100px;
  justify-content: start;
}

.el-input {
  width: 240px;
}

.el-select .el-input {
  width: 500px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  padding: 0 10px;
}

/* 树形组件样式 */
.tree-node-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 2px 0;
}

.expand-btn {
  color: #409eff;
  padding: 0 5px;
  font-size: 12px;
}

::v-deep .el-tree-node__content {
  padding: 2px 0;
}

::v-deep .el-tree-node__label {
  font-weight: normal;
}

::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color: #f5f7fa;
}

::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #f5f7fa;
}
</style>