<!-- 报警规则添加列表 -->
<template>
  <div class="layout-pd">
    <el-dialog v-model="Data.isShowDialog" style="width: 60%;">
        <!--操作-->
            <div style="width: 100%;display: flex;justify-content: left;align-items: center;">
              <h1 style="margin-bottom: 10px;font-size: 30px;">报警推送规则</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%;">
                  <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="角&#8195;&#8195;色：" style="width: 100%;">
                  <el-select v-model="Data.Filter.roleMappingId" multiple placeholder="请选择角色">
                    <el-option v-for="item in Data.roleList" :key="item.id" :label="item.name" :value="item.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 style="width: 100%;">
                </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%;">
                  <el-row style="width: 40%;">
                    微信公众号<el-switch v-model="Data.radioValue1" style="margin-left: 3%;" @change="radioChange" />
                  </el-row>
                  <el-row style="width: 40%;">
                    邮箱<el-switch v-model="Data.radioValue2" style="margin-left: 3%;" @change="radioChange" />
                  </el-row>
                </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: 40%;" prop="mode1">
                  <el-select v-model="Data.mode1" class="m-2" placeholder="Select" v-if="Data.radioValue1"
                    @change="modeChange">
                    <el-option v-for="item in templateData.wxList" :key="item.id" :label="item.templateName"
                      :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item style="width: 30%;">
                  <el-select v-model="Data.mode2" class="m-2" placeholder="Select" v-if="Data.radioValue2"
                    @change="modeChange">
                    <el-option v-for="item in templateData.emailList" :key="item.id" :label="item.name"
                      :value="item.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="正则匹配：" style="width: 100%;">
                  <el-input type="textarea" rows="5" 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="互&#8195;&#8195;斥：" style="width: 100%;">
                  <el-switch v-model="Data.Filter.isExclusive" />
                </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%;">
                  <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-radio-group v-model="Data.Filter.triggerMethod">
                    <el-radio :label="0">其中之一条件满足即触发</el-radio>
                    <el-radio :label="1">全部满足时触发</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <div v-for="(index) in Data.num" :key="index"
              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-select v-model="Data.selectValue1[index]" class="m-2" placeholder="Select" style="width: 20%;">
                    <el-option v-for="item in Data.condition" :key="item" :label="item" :value="item"
                      @click="selectChange(Data.selectValue1[index])" />
                  </el-select>
                  <!-- 符号 -->
                  <el-select class="sign" style="width: 7%;" suffix-icon="" v-model="Data.seDefault">
                    <el-option v-for="(item, index) in Data.selectList" :key="index" :value="item" selectd />
                  </el-select>
                  <el-select v-model="Data.selectValue2[index]" class="m-2" placeholder="Select" style="width: 20%;">
                    <el-option v-for="item in Data.selectCondition" :key="item" :label="item" :value="item" />
                  </el-select>
                  <label style="margin-left: 5%;">报警等级</label>
                  <!-- 符号 -->
                  <el-select class="sign" style="width: 7%;" suffix-icon="" v-model="Data.seDefault">
                    <el-option v-for="(item, index) in Data.selectList" :key="index" :value="item" selectd />
                  </el-select>
                  <el-select v-model="Data.selectValue3[index]" class="m-2" placeholder="Select" style="width: 20%;">
                    <el-option v-for="item in Data.alarmLevel" :key="item" :label="item" :value="item" />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
              <el-button :icon="CirclePlusFilled" style="font-size: large" @click="add" />
            </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 type="primary" @click="toSave">保存</el-button>
                </el-row>
              </el-form>
            </div>

    </el-dialog>
  </div>

</template>

<script setup lang="ts" name="">
import { onMounted, reactive, ref, watch } from 'vue';
import { CirclePlusFilled } from '@element-plus/icons-vue'
import { alarmRluesFilterModel } from "/@/api/admin/AlarmService/alarmRulesDto";
import { alarmRulesApi } 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";


const Data = reactive({
  isShowDialog: false,
  Filter: {
    /**规则名称*/
    ruleName: '',
    /**角色 */
    roleMappingId: [],
    /**备注*/
    remark: '',
    /**推送方式 */
    pushMethod: '',
    /**模板 */
    pushTemplateMappingID: [],
    /**正则表达式 */
    regular: '',
    /**是否互斥 */
    isExclusive: false,
    /**优先级 */
    taskPriority: 1,
    /**触发方式 */
    triggerMethod: '',
    /**规则条件 */
    conditionsJson: '' as any,
    pushUserid: []
  } as alarmRluesFilterModel,
  selectList: [">", "<", "="],
  /** 角色列表 */
  roleList: [] as any,
  /** 推送方式绑定数据 */
  radioValue1: false,
  radioValue2: false,
  num: 0,
  seDefault: '=',
  /** 条件列表 */
  selectValue1: [],
  selectValue2: [],
  selectValue3: [],
  /** 模板绑定数据 */
  mode1: '',
  mode2: '',
  /** 条件选择 */
  selectCondition: [] as Array<string>,
  condition: ['报警设备', '报警类型', '报警来源'],
  alarmEquipment: ['加油枪', '编码器', '加密显示屏', '监控微处理器'],
  alarmType: ['绑定错误'],
  alarmSource: ['云平台', '安全监督装置'],
  alarmLevel: [1, 2],

})

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

// 数量增加 - 实现dom节点的增加
const add = (() => {
  Data.num += 1

})

const radioChange = (() => {
  if (Data.radioValue1 == true) {
    Data.Filter.pushMethod = 'wx'
    if (Data.radioValue2 == true) {
      Data.Filter.pushMethod += ',email'
    }
  } else {
    if (Data.radioValue2 == true) {
      Data.Filter.pushMethod = 'email'
    }
  }
})

const selectChange = ((key: any) => {
  if (key == '报警设备') {
    Data.selectCondition = Data.alarmEquipment
  } else if (key == '报警类型') {
    Data.selectCondition = Data.alarmType
  } else if (key == '报警来源') {
    Data.selectCondition = Data.alarmSource
  }
})

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

// 查询模板信息
const funSelect = async () => {
  const res = await new pushTemplateApi().getData(templateData.Filter)
  const data = res?.data
  templateData.wxList = (data as any)?.filter((item: any) => {
    if (item.templateType == "wx") {
      return { 'id': item.id, 'name': item.templateName }
    }
  })
  templateData.emailList = (data as any)?.filter((item: any) => {
    if (item.templateType == "email") {
      return { 'id': item.id, 'name': item.templateName }
    }
  })
}

// 获取模板元素id
const modeChange = (() => {
  Data.Filter.pushTemplateMappingID = []
  if (Data.Filter.pushTemplateMappingID.includes(Number(Data.mode1)) == false && Data.mode1 != '') {
    Data.Filter.pushTemplateMappingID?.push(Number(Data.mode1))
  }
  if (Data.Filter.pushTemplateMappingID.includes(Number(Data.mode2)) == false && Data.mode2 != '') {
    Data.Filter.pushTemplateMappingID?.push(Number(Data.mode2))
  }
})

// 钩子函数 -- 挂载后
onMounted(() => {
  getRole()
  funSelect()
})

// 条件数据，事件监听 -- num改变，json数据添加
watch([() => [...Data.selectValue1], () => [...Data.selectValue2], () => [...Data.selectValue3]], (newVal) => {
  const second = {} as any
  for (var i = 1; i < Data.num + 1; i++) {
    const first = [Data.selectValue1[i], Data.selectValue2[i], Data.selectValue3[i]]
    second[i] = first
  }
  Data.Filter.conditionsJson = JSON.stringify(second)
})



// 保存提交内容
const toSave = async () => {
  const res = await new alarmRulesApi().addForm(Data.Filter)
  console.log(Data.Filter)
  // console.log(res)
  Data.isShowDialog = false
  reset()
}

// 重置
const reset = (() => {
  /**规则名称*/
  Data.Filter.ruleName = '',
    /**角色 */
    Data.Filter.roleMappingId = [],
    /**备注*/
    Data.Filter.remark = '',
    /**推送方式 */
    Data.Filter.pushMethod = '',
    Data.radioValue1 = false,
    Data.radioValue2 = false,
    /**模板 */
    Data.Filter.pushTemplateMappingID = [],
    Data.mode1 = '',
    Data.mode2 = '',
    /**正则表达式 */
    Data.Filter.regular = '',
    /**是否互斥 */
    Data.Filter.isExclusive = false,
    /**优先级 */
    Data.Filter.taskPriority = 1,
    /**触发方式 */
    Data.Filter.triggerMethod = '',
    /**规则条件 */
    Data.Filter.conditionsJson = '',
    Data.num = 0
})

/**
 * 根据参数 打开表单
 * @param val
 */
const openDialog = () => {
  Data.isShowDialog = true
}


defineExpose({
  openDialog,
})


</script>

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

.el-form {
  width: 60%;
}

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

/* 输入框标签固定四个字符宽度 */
::v-deep .el-form-item__label {
    // 字体大小14，4个字符，12px右间距
    width: 100px;
    justify-content: start;
}

.el-input {
  width: 240px;
}

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

.sign {
  border: 0;
}

:deep(.sign .el-input__wrapper) {
  // 去除选择框边框
  box-shadow: none !important;
}

.el-select-dropdown__item {
  text-align: center;
}
</style>
