<!--预警配置-->
<template>
  <div class="page-container forewarningConfig">
    <div class="title-max-box">
      <div class="title-box" :class="checkTypeA == 1?'title-check':''" @click="checkTypeClickA(1)">
        <p>危险源预警</p>
        <p></p>
      </div>
      <div class="title-box" :class="checkTypeA == 2?'title-check':''" @click="checkTypeClickA(2)">
        <p>算法预警</p>
        <p></p>
      </div>
      <p class="null-p"></p>
      <p class="page-out-common-style-button out-p" @click="outButton">返回</p>
      <p class="page-save-common-style-button out-p" @click="submitButton">保存</p>
    </div>
    <!--危险源预警-->
    <div class="page-max-big-box-a scrollbar-box" v-show="checkTypeA == 1">
      <!--选项卡-->
      <div class="tab-max-big-box">
        <div class="tab-title-box">
          <p :class="configType == 1?'title-check':''" @click="checkTypeClickB(1)">化学品预警配置</p>
          <!--<p :class="configType == 2?'title-check':''" @click="checkTypeClickB(2)">气瓶预警配置</p>-->
        </div>
        <div class="tab-max-box-a" v-show="configType == 1">
          <el-form class="form-box" :model="chemicalsForm" ref="chemicalsForm"
                   :inline="true" :rules="chemicalsRules" label-width="180px">
            <div class="tab-box-left">
              <!--<div>-->
              <!--<el-form-item label="过期报警：" prop="expireWarnNum">-->
              <!--<el-input-number v-model="chemicalsForm.expireWarnNum" style="width:130px;"-->
              <!--:min="1" :max="20">-->
              <!--</el-input-number>-->
              <!--<span style="margin-left:20px;">化学品过期后报警通知次数</span>-->
              <!--</el-form-item>-->
              <!--</div>-->
              <div>
                <p style="font-size:14px;margin-left:40px;margin-bottom:20px;">临期/过期报警配置</p>
              </div>
              <div>
                <el-form-item label="报警时间：" prop="expireMessage">
                  <el-time-select v-model="chemicalsForm.expireMessage" placeholder="请选择" style="width:130px;"
                                  :picker-options="{
                      start: '00:00',
                      step: '00:15',
                      end: '23:45'
                    }">
                  </el-time-select>
                  <span style="margin-left:20px;">化学品临期/过期报警通知定时推送时间</span>
                </el-form-item>
              </div>
              <!--<div>-->
                <!--<el-form-item label="即将过期：" prop="expireSoon">-->
                  <!--<el-select v-model="chemicalsForm.expireSoon" multiple placeholder="请选择" style="width:500px;">-->
                    <!--<el-option-->
                      <!--v-for="item in chemicalsOptionsA"-->
                      <!--:key="item.value"-->
                      <!--:label="item.label"-->
                      <!--:value="item.value">-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                <!--</el-form-item>-->
              <!--</div>-->
              <div>
                <el-form-item label="报警方式：" prop="expireWarn">
                  <el-select v-model="chemicalsForm.expireWarn" multiple placeholder="请选择" style="width:500px;">
                    <el-option
                      v-for="item in chemicalsOptionsA"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="临期报警天数：化学品过期 " prop="adventWarnDay" label-width="250px">
                  <el-input-number v-model="chemicalsForm.adventWarnDay" style="width:100px;"
                                   :controls="false" :min="1" :max="360">
                  </el-input-number>
                  <span style="margin-left:20px;">天前提醒通知</span>
                </el-form-item>
              </div>
            </div>
            <div class="tab-box-right">
              <div>
                <el-form-item label="违规带离：" prop="violationTake">
                  <el-select v-model="chemicalsForm.violationTake" multiple placeholder="请选择" style="width:500px;">
                    <el-option
                      v-for="item in chemicalsOptionsA"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="超时未归还：" prop="timeoutNoreturn">
                  <el-select v-model="chemicalsForm.timeoutNoreturn" multiple placeholder="请选择" style="width:500px;">
                    <el-option
                      v-for="item in chemicalsOptionsA"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="超期未入库：" prop="overdueStorage">
                  <el-select v-model="chemicalsForm.overdueStorage" multiple placeholder="请选择" style="width:500px;">
                    <el-option
                      v-for="item in chemicalsOptionsA"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="业务操作超时：" prop="businessTimeout">
                  <el-select v-model="chemicalsForm.businessTimeout" multiple placeholder="请选择" style="width:500px;">
                    <el-option
                      v-for="item in chemicalsOptionsA"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
        <div class="tab-max-box-b" v-show="configType == 2">
          <el-form class="form-box" :model="gasBottleForm" ref="gasBottleForm"
                   :inline="true" :rules="gasBottleRules" label-width="140px">
            <div class="tab-box">
              <div>
                <el-form-item label="违规带离：" prop="data10">
                  <el-select v-model="gasBottleForm.data10" multiple placeholder="请选择" style="width:500px;">
                    <el-option
                      v-for="item in chemicalsOptionsA"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <!--提示-->
      <div class="tips-box">
        <p>预警升级规则</p>
        <p>化学品超时未归还、化学品违规带离、化学品超期未入库预警升级配置</p>
      </div>
      <!--表格部分-->
      <div class="table-bottom-box">
        <div class="page-form-title-box">
          <el-form :model="queryParams" class="form-box" ref="queryForm"
                   :inline="true" style="width:100%;">
            <el-form-item label="状态" prop="ruleStatus">
              <el-select v-model="queryParams.ruleStatus" placeholder="请选择" style="width: 200px">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="学院" prop="deptId">
              <el-select v-model="queryParams.deptId" placeholder="请选择" style="width: 200px">
                <el-option
                  v-for="item in deptOptions"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="创建人" prop="createName">
              <el-input
                maxLength="30"
                v-model="queryParams.createName"
                placeholder="创建人"
                clearable
                style="width: 200px"
              />
            </el-form-item>
            <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
            <p class="page-submit-common-style-button"
               style="float: right;"
               @click="tableButton(1)"
            >新增</p>
          </el-form>
        </div>
        <div class="page-content-box">
          <el-table class="table-box" border :data="dataList">
            <el-table-column label="适用学院" prop="deptName" show-overflow-tooltip/>
            <el-table-column label="报警层级" prop="warningLevel" width="180" show-overflow-tooltip/>
            <el-table-column label="通知人数" prop="noticeNum" width="150" show-overflow-tooltip/>
            <el-table-column label="状态" prop="ruleStatus" width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-switch
                  @click.native="tableButton(4,scope.row)"
                  class="switch captcha-img"
                  :active-value="true"
                  :inactive-value="false"
                  active-color="#0183FA"
                  inactive-color="#999"
                  v-model="scope.row.ruleStatus"
                  active-text="启用"
                  inactive-text="停用"
                  disabled
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="200" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime,'{y}-{m}-{d} {h}:{i}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" prop="createName" width="150" show-overflow-tooltip/>
            <el-table-column label="操作" width="180" show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p"
                     @click="tableButton(2,scope.row)"
                  >编辑</p>
                  <p class="table-button-p"
                     @click="tableButton(3,scope.row)"
                  >删除</p>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination :page-sizes="[10]"
                      v-show="total>0"
                      :total="total"
                      :page.sync="queryParams.page"
                      :limit.sync="queryParams.pageSize"
                      @pagination="getList"
          />
        </div>
      </div>
    </div>
    <!--算法预警-->
    <div class="page-max-big-box-b scrollbar-box" v-show="checkTypeA == 2">
      <el-form class="form-box" :model="algorithmForm" ref="algorithmForm"
               :inline="true" :rules="algorithmRules" label-width="140px">
        <div>
          <el-form-item label="穿戴抓拍周期" prop="wearSnap" label-width="170px">
            <el-input-number v-model="algorithmForm.wearSnap" style="width:320px;"
                             :min="1" :max="360">
            </el-input-number>
          </el-form-item>
          <el-form-item label="异常再识别数" prop="abnormalIdentifyNum" label-width="170px">
            <el-input-number v-model="algorithmForm.abnormalIdentifyNum" style="width:320px;"
                             :min="1" :max="100">
            </el-input-number>
          </el-form-item>
          <el-form-item label="异常再识别数" prop="abnormalIdentifyRate" label-width="170px">
            <el-input-number v-model="algorithmForm.abnormalIdentifyRate" style="width:320px;"
                             :min="1" :max="100">
            </el-input-number>
          </el-form-item>
        </div>
        <p class="text-p">穿戴识别</p>
        <div>
          <el-form-item label="系统通知 监测异常" prop="sysNoticeNum" label-width="234px">
            <el-select v-model="algorithmForm.sysNoticeNum" placeholder="请选择" style="width:90px;">
              <el-option
                v-for="item in numOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span class="span-a">次</span>
            <span class="span-b">监测到实验人员未正确穿戴实验服，三次后通过该方式惊醒预警通知。</span>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="短信通知 监测异常" prop="messageNoticeNum" label-width="234px">
            <el-select v-model="algorithmForm.messageNoticeNum" placeholder="请选择" style="width:90px;">
              <el-option
                v-for="item in numOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span class="span-a">次</span>
            <span class="span-b">监测到实验人员未正确穿戴实验服，三次后通过该方式惊醒预警通知。</span>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="语音播报 监测异常" prop="voiceNum" label-width="234px">
            <el-select v-model="algorithmForm.voiceNum" placeholder="请选择" style="width:90px;">
              <el-option
                v-for="item in numOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span class="span-a">次</span>
            <span class="span-b">监测到实验人员未正确穿戴实验服，三次后通过该方式惊醒预警通知。</span>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-dialog class="forewarningUp-dialog" title='预警升级配置' width="1300px" append-to-body
               :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="shade-big-box" v-if="shadeType">
        <div class="shade-box">
          <div class="shade-min-box">
            <el-form :model="shadeForm" ref="shadeForm" :inline="true" :rules="shadeRules">
              <el-form-item label="人员查询" prop="userId" class="form-item" label-width="90px">
                <el-select
                  style="width:300px;"
                  v-model="shadeForm.userId"
                  filterable
                  remote
                  clearable
                  reserve-keyword
                  @change="userChange"
                  placeholder="请输入姓名/工号/手机号"
                  :remote-method="userSelectList">
                  <el-option
                    v-for="item in optionsUser"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="dialog-footer dialog-footer-box">
            <p class="dialog-footer-button-null"></p>
            <p class="dialog-footer-button-info" @click="shadeOut()">取消</p>
            <p class="dialog-footer-button-primary" @click="shadeUp">提交</p>
            <p class="dialog-footer-button-null"></p>
          </div>
        </div>
      </div>
      <div class="forewarningUp-dialog-max-box scrollbar-box">
        <div class="question-box">
          <p class="el-icon-question question-icon"></p>
          <p class="question-text">如在设定的处理时间内未处理，则报警升级执行下一步流程。</p>
        </div>
        <el-form :model="dialogForm" ref="dialogForm" :inline="true"
                 :rules="dialogRules" class="addCheckPage-min">
          <el-form-item label="适用学院：" prop="deptId" label-width="100px">
            <el-select v-model="dialogForm.deptId" placeholder="请选择" @change="deptChange" style="width: 435px">
              <el-option
                v-for="dict in deptOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
          <div class="for-max-big-box" v-for="(item,index) in dialogForm.warningConfigRuleDetailDtoList" :key="index">
            <div class="for-max-big-title-box">
              <p class="position-index">{{index+1}}</p>
              <el-form-item label="处理时间：" class="time-form-item" label-width="142px"
                            :prop="'warningConfigRuleDetailDtoList.' + index + '.handleTime'"
                            :rules="dialogRules.handleTime">
                <el-input-number v-model="item.handleTime" style="width:435px;"
                                 :controls="false" :min="1" :max="1440">
                </el-input-number>
              </el-form-item>
              <p class="time-p">分钟</p>
              <p class="null-p"></p>
              <p class="page-submit-common-style-button for-del-button"
                 v-if="dialogForm.warningConfigRuleDetailDtoList[1]" @click="delBigDialogData(index)">删除</p>
              <p class="page-submit-common-style-button for-add-button" @click="addBigDialogData(index)">+ 添加处理流程</p>
            </div>
            <div class="for-max-box">
              <div class="for-box" v-for="(minItem,minIndex) in item.dialogUserList" :key="minIndex">
                <el-form-item label="通知对象：" label-width="142px"
                              :prop="'warningConfigRuleDetailDtoList.'+ index +'.dialogUserList.'+ minIndex +'.userName'"
                              :rules="dialogRules.userName">
                  <el-input
                    style="width:300px;"
                    disabled
                    maxlength="8"
                    v-model="minItem.userName"
                    placeholder="未填写"
                  />
                </el-form-item>
                <p class="el-icon-search look-min-button" @click="shadeOpen(index,minIndex)"></p>
                <el-form-item label="手机号码：" label-width="120px"
                              :prop="'warningConfigRuleDetailDtoList.'+ index +'.dialogUserList.'+ minIndex +'.mobile'"
                              :rules="dialogRules.mobile">
                  <el-input
                    style="width:300px;"
                    maxlength="11"
                    v-model="minItem.mobile"
                    placeholder="未填写"
                    onkeyup="this.value=this.value.replace(/\D/g,'')"
                    onafterpaste="this.value=this.value.replace(/\D/g,'')"
                  />
                </el-form-item>
                <p class="el-icon-delete del-min-button" v-if="item.dialogUserList[1]"
                   @click="delMinDialogData(index,minIndex)"></p>
                <p class="el-icon-circle-plus-outline add-min-button" @click="addMinDialogData(index,minIndex)"></p>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogOff">取消</p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getDeptDropList, systemUserSelect } from '@/api/commonality/permission'
  import {
    systemConfigAlgorithmDetail, systemConfigAlgorithmUpdate,
    systemConfigRuleAdd,
    systemConfigRuleDelete,
    systemConfigRuleDetail,
    systemConfigRuleEnableOrDisable,
    systemConfigRuleList, systemConfigRuleUpdate,
    systemWarningConfigDetail,
    systemWarningConfigUpdate
  } from '@/api/chemicalManage'
  import { getDicts } from '@/api/commonality/noPermission'

  export default {
    name: 'addPage',
    props: {
      propsData: {}
    },
    data() {
      const repeatPhone = (rule, value, callback) => {
        let fieldList = rule.field.split('.');
        let num = 0;
        this.dialogForm.warningConfigRuleDetailDtoList[fieldList[1]].dialogUserList.forEach((item)=>{
          if(item.mobile == value){
            num++
          }
        })
        if(num > 1){
          callback(new Error("手机号码重复"));
        }else{
          callback();
        }
      };
      return {
        //大类型状态
        checkTypeA: 1,
        //小类型状态
        configType: 1,
        //化学品预警数据
        chemicalsForm: {
          adventWarnDay: 30,
          expireWarnNum: 1,
          expireMessage: null,
          violationTake: null,
          timeoutNoreturn: null,
          expireSoon: null,
          expireWarn: null,
          overdueStorage: null,
          businessTimeout: null
        },
        chemicalsRules: {
          adventWarnDay: [
            { required: true, message: '请输入临期预警通知时间', trigger: 'blur' },
            { required: true, message: '请输入临期预警通知时间', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          expireWarnNum: [
            { required: true, message: '请选择过期报警次数', trigger: 'blur' },
            { required: true, message: '请选择过期报警次数', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          expireMessage: [
            { required: true, message: '请选择过期短信通知时间', trigger: 'blur' },
            { required: true, message: '请选择过期短信通知时间', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          violationTake: [
            { required: true, message: '请选择违规带离通知方式', trigger: 'blur' },
            { required: true, message: '请选择违规带离通知方式', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          timeoutNoreturn: [
            { required: true, message: '请选择超时未归还通知方式', trigger: 'blur' },
            { required: true, message: '请选择超时未归还通知方式', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          expireSoon: [
            { required: true, message: '请选择即将过期通知方式', trigger: 'blur' },
            { required: true, message: '请选择即将过期通知方式', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          expireWarn: [
            { required: true, message: '请选择过期报警通知方式', trigger: 'blur' },
            { required: true, message: '请选择过期报警通知方式', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          overdueStorage: [
            { required: true, message: '请选择超期未入库通知方式', trigger: 'blur' },
            { required: true, message: '请选择超期未入库通知方式', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          businessTimeout: [
            { required: true, message: '请选择业务操作超时通知方式', trigger: 'blur' },
            { required: true, message: '请选择业务操作超时通知方式', validator: this.spaceJudgment, trigger: 'blur' }
          ]
        },
        //气瓶预警数据
        gasBottleForm: {
          data10: null
        },
        gasBottleRules: {
          data10: [
            { required: true, message: '请选择违规带离通知方式', trigger: 'blur' },
            { required: true, message: '请选择违规带离通知方式', validator: this.spaceJudgment, trigger: 'blur' }
          ]
        },
        //算法预警数据
        algorithmForm: {
          wearSnap: null,
          abnormalIdentifyNum: null,
          abnormalIdentifyRate: null,
          sysNoticeNum: null,
          messageNoticeNum: null,
          voiceNum: null
        },
        algorithmRules: {
          wearSnap: [
            { required: true, message: '请输入穿戴抓拍周期', trigger: 'blur' },
            { required: true, message: '请输入穿戴抓拍周期', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          abnormalIdentifyNum: [
            { required: true, message: '请输入异常再识别数', trigger: 'blur' },
            { required: true, message: '请输入异常再识别数', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          abnormalIdentifyRate: [
            { required: true, message: '请输入异常再识别数', trigger: 'blur' },
            { required: true, message: '请输入异常再识别数', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          sysNoticeNum: [
            { required: true, message: '请输入系统通知监测异常次数', trigger: 'blur' },
            { required: true, message: '请输入系统通知监测异常次数', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          messageNoticeNum: [
            { required: true, message: '请输入短信通知监测异常次数', trigger: 'blur' },
            { required: true, message: '请输入短信通知监测异常次数', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          voiceNum: [
            { required: true, message: '请输入语音播报监测异常次数', trigger: 'blur' },
            { required: true, message: '请输入语音播报监测异常次数', validator: this.spaceJudgment, trigger: 'blur' }
          ]
        },
        //通知类别
        chemicalsOptionsA: [],
        //超时未归还
        chemicalsOptionsB: [
          { label: '短信通知', value: '1' },
          { label: '报警电话', value: '2' },
          { label: '企业微信', value: '3' }
        ],
        //次数
        numOptions: [
          { label: '1', value: 1 },
          { label: '2', value: 2 },
          { label: '3', value: 3 },
          { label: '4', value: 4 },
          { label: '5', value: 5 },
          { label: '6', value: 6 },
          { label: '7', value: 7 },
          { label: '8', value: 8 },
          { label: '9', value: 9 },
          { label: '10', value: 10 }
        ],
        //预警升级规则
        queryParams: {
          page: 1,
          pageSize: 20,
          ruleStatus: '',
          deptId: '',
          createName: ''
        },
        //状态列表
        typeOptions: [{ label: '停用', value: 0 }, { label: '启用', value: 1 }],
        //部门列表
        sectionOptions: [],
        //升级规则列表
        dataList: [],
        total: 10,
        //dialog配置
        dialogType: false,
        dialogForm: {
          ruleId: null,
          deptId: null,
          warningConfigRuleDetailDtoList: [
            {
              handleTime: null,//处理时间
              dialogUserList: [
                {
                  userName: null,
                  mobile: null,
                  userId: null
                }
              ]
            }
          ]
        },
        dialogRules: {
          deptId: [
            { required: true, message: '请选择学院', trigger: 'blur' },
            { required: true, message: '请选择学院', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          handleTime: [
            { required: true, message: '请输入处理时间', trigger: 'blur' },
            { required: true, message: '请输入处理时间', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          userName: [
            { required: true, message: '请输入通知对象', trigger: 'change' },
            { required: true, message: '请输入通知对象', validator: this.spaceJudgment, trigger: 'change' }
          ],
          mobile: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { validator: this.checkPhone, trigger: 'blur' },
            { required: true, message: '请输入手机号码', validator: this.spaceJudgment, trigger: 'blur' },
            { required: true, message: '手机号码重复', validator: repeatPhone, trigger: 'blur' }
          ]
        },
        //学院列表
        deptOptions: [],
        //选择人员
        shadeType: false,
        shadeIndex: null,
        shadeMinIndex: null,
        shadeForm: {
          userId: null
        },
        shadeRules: {
          userId: [
            { required: true, message: '请选择人员', trigger: 'blur' },
            { required: true, message: '请选择人员', validator: this.spaceJudgment, trigger: 'blur' }
          ]
        },
        userName: '',
        mobile: '',
        userId: '',
        // 人员列表
        optionsUser: []
      }
    },
    created() {
      this.getDicts()
      this.systemWarningConfigDetail()
      this.getDeptDropList()
      this.getList()
    },
    mounted() {

    },
    methods: {
      //获取通知类别类别
      getDicts() {
        getDicts('sys_warning_type').then(response => {
          this.$set(this, 'chemicalsOptionsA', response.data)
        })
      },
      //预警通知-危险源预警-详情
      systemWarningConfigDetail() {
        let self = this
        systemWarningConfigDetail({ configType: this.configType }).then(response => {
          this.$set(this, 'chemicalsForm', response.data)

          if (this.configType == 1) {
            self.chemicalsForm.businessTimeout = self.chemicalsForm.businessTimeout ? self.chemicalsForm.businessTimeout.split(',') : '',
              // self.chemicalsForm.expireSoon = self.chemicalsForm.expireSoon ? self.chemicalsForm.expireSoon.split(',') : '',
              self.chemicalsForm.expireWarn = self.chemicalsForm.expireWarn ? self.chemicalsForm.expireWarn.split(',') : '',
              self.chemicalsForm.overdueStorage = self.chemicalsForm.overdueStorage ? self.chemicalsForm.overdueStorage.split(',') : '',
              self.chemicalsForm.timeoutNoreturn = self.chemicalsForm.timeoutNoreturn ? self.chemicalsForm.timeoutNoreturn.split(',') : '',
              self.chemicalsForm.violationTake = self.chemicalsForm.violationTake ? self.chemicalsForm.violationTake.split(',') : ''
          } else if (this.configType == 2) {
            self.gasBottleForm.data10 = self.chemicalsForm.violationTake ? self.chemicalsForm.violationTake.split(',') : ''
          }
        })
      },
      //预警通知-算法预警-详情
      systemConfigAlgorithmDetail() {
        let self = this
        systemConfigAlgorithmDetail().then(response => {
          this.$set(this, 'algorithmForm', response.data)
        })
      },
      //查询学院列表
      getDeptDropList() {
        getDeptDropList({ deptName: '', level: 2, deptType: 1 }).then(response => {
          this.$set(this, 'deptOptions', response.data)
        })
      },

      // 大类切换
      checkTypeClickA(type) {
        if (type != this.checkTypeA) {
          this.$set(this, 'checkTypeA', type)
          this.resetFields()
          if (type == 1) {//危险源预警
            this.systemWarningConfigDetail()
          } else if (type == 2) {//算法预警
            this.systemConfigAlgorithmDetail()
          }
        }
      },
      // 小类切换
      checkTypeClickB(type) {
        if (type != this.configType) {
          this.$set(this, 'configType', type)
          this.systemWarningConfigDetail()
          this.resetFields()
        }
      },
      //去除验证
      resetFields() {
        if (this.checkTypeA == 1 && this.configType == 1) {
          this.$refs.chemicalsForm.resetFields()
        } else if (this.checkTypeA == 1 && this.configType == 2) {
          this.$refs.gasBottleForm.resetFields()
        } else if (this.checkTypeA == 2) {
          this.$refs.algorithmForm.resetFields()
        }
      },
      //返回按钮
      outButton() {
        this.$parent.tableButton('out', '')
      },
      //提交-危险源预警
      submitButton() {
        let self = this
        if (this.checkTypeA == 1 && this.configType == 1) {//危险源化学品预警配置
          this.$refs['chemicalsForm'].validate(valid => {
            if (valid) {
              self.chemicalsForm.businessTimeout = self.chemicalsForm.businessTimeout.join(',')
              // self.chemicalsForm.expireSoon = self.chemicalsForm.expireSoon.join(',')
              self.chemicalsForm.expireWarn = self.chemicalsForm.expireWarn.join(',')
              self.chemicalsForm.overdueStorage = self.chemicalsForm.overdueStorage.join(',')
              self.chemicalsForm.timeoutNoreturn = self.chemicalsForm.timeoutNoreturn.join(',')
              self.chemicalsForm.violationTake = self.chemicalsForm.violationTake.join(',')
              let obj = JSON.parse(JSON.stringify(self.chemicalsForm))
              obj.expireSoon = obj.expireWarn;
              systemWarningConfigUpdate(obj).then(response => {
                self.msgSuccess('成功')
                self.systemWarningConfigDetail()
              })
            }
          })
        } else if (this.checkTypeA == 1 && this.configType == 2) {
          this.$refs['gasBottleForm'].validate(valid => {
            if (valid) {
              self.chemicalsForm.violationTake = self.gasBottleForm.data10.join(',')
              systemWarningConfigUpdate(self.chemicalsForm).then(response => {
                self.msgSuccess('成功')
                self.systemWarningConfigDetail()
              })
            }
          })
        } else if (this.checkTypeA == 2) {//算法识别
          this.$refs['algorithmForm'].validate(valid => {
            if (valid) {
              systemConfigAlgorithmUpdate(self.algorithmForm).then(response => {
                self.msgSuccess('成功')
                self.systemConfigAlgorithmDetail()
              })
            }
          })
        }
      },
      //升级规则查询
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      //升级规则重置
      resetQuery() {
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
          ruleStatus: '',
          deptId: '',
          createName: ''
        })
        this.getList()
      },
      //新增/编辑/删除升级规则
      tableButton(type, row) {
        let self = this
        if (type == 1) {
          //新增
          this.$set(this, 'dialogForm', {
            deptId: null,
            warningConfigRuleDetailDtoList: [
              {
                handleTime: null,
                dialogUserList: [
                  {
                    userName: null,
                    mobile: null,
                    userId: null
                  }
                ]
              }
            ]
          })
          this.$set(this, 'dialogType', true)
        } else if (type == 2) {
          //编辑
          let obj = {}
          systemConfigRuleDetail({ ruleId: row.ruleId }).then(response => {
            obj.deptId = response.data.deptId
            obj.deptName = response.data.deptName
            obj.ruleId = response.data.ruleId
            let list = []
            response.data.warningConfigRuleDetailVoList.forEach(function(item) {
              let list2 = []
              item.warningConfigRuleUserVoList.forEach(function(item2) {
                list2.push({ userId: item2.userId, userName: item2.userName, mobile: item2.mobile })
              })
              list.push({ handleTime: item.handleTime, dialogUserList: list2 })
            })
            obj.warningConfigRuleDetailDtoList = list
            this.$set(this, 'dialogForm', obj)
            this.$set(this, 'dialogType', true)
          })

        } else if (type == 3) {
          //删除
          this.$confirm('是否确认删除?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
          }).then(() => {
            systemConfigRuleDelete({ ruleId: row.ruleId }).then(response => {
              self.msgSuccess(response.message)
              self.getList()
            })
          }).catch(() => {
          })
        } else if (type == 4) {
          //启用&停用
          let text = row.ruleStatus ? '停用' : '启用'
          this.$confirm('是否确认' + text + '?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
          }).then(() => {
            systemConfigRuleEnableOrDisable({ ruleId: row.ruleId, ruleStatus: !row.ruleStatus }).then(response => {
              self.msgSuccess(response.message)
              self.getList()
            })
          }).catch(() => {
          })
        }
      },
      //关闭弹层
      dialogOff() {
        this.$set(this, 'dialogType', false)
      },
      //新增规则流程
      addBigDialogData(index) {
        console.log(this.dialogForm.warningConfigRuleDetailDtoList)
        if (this.dialogForm.warningConfigRuleDetailDtoList[4]) {
          this.msgError('最多添加5个流程')
        } else {
          this.dialogForm.warningConfigRuleDetailDtoList.splice(index + 1, 0, {
            handleTime: null,
            dialogUserList: [
              {
                userName: null,
                mobile: null,
                userId: null
              }
            ]
          })
        }
      },
      //删除规则流程
      delBigDialogData(index) {
        if (!this.dialogForm.warningConfigRuleDetailDtoList[1]) {
          this.msgError('至少保留一个流程')
        } else {
          this.dialogForm.warningConfigRuleDetailDtoList.splice(index, 1)
        }
      },
      //新增规则人员
      addMinDialogData(index, minIndex) {
        if (this.dialogForm.warningConfigRuleDetailDtoList[index].dialogUserList[4]) {
          this.msgError('最多添加5个成员')
        } else {
          this.dialogForm.warningConfigRuleDetailDtoList[index].dialogUserList.splice(minIndex + 1, 0, {
            userName: null,
            mobile: null,
            userId: null
          })
        }
      },
      //删除规则人员
      delMinDialogData(index, minIndex) {
        if (!this.dialogForm.warningConfigRuleDetailDtoList[index].dialogUserList[1]) {
          this.msgError('至少保留一个成员')
        } else {
          this.dialogForm.warningConfigRuleDetailDtoList[index].dialogUserList.splice(minIndex, 1)
          this.dialogForm.warningConfigRuleDetailDtoList[index].userIds.splice(minIndex, 1)
        }
      },
      //获取数据列表
      getList() {
        systemConfigRuleList(this.queryParams).then(response => {
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
        })
      },
      //弹层提交
      dialogSubmit() {
        let self = this
        this.$refs['dialogForm'].validate(valid => {
          if (valid) {
            self.dialogForm.warningConfigRuleDetailDtoList.forEach(function(item) {
              let list = []
              item.dialogUserList.forEach(function(item2) {
                list.push(item2.userId)
              })
              item.userIds = list.join(',')
            })
            if (self.dialogForm.ruleId) {//编辑
              systemConfigRuleUpdate(self.dialogForm).then(response => {
                self.msgSuccess('提交成功')
                self.$set(this, 'dialogType', false)
                self.getList()
              })
            } else {//新增
              systemConfigRuleAdd(self.dialogForm).then(response => {
                self.msgSuccess('提交成功')
                self.$set(this, 'dialogType', false)
                self.getList()
              })
            }

          }
        })
      },
      //手机号验证
      checkPhone(rule, value, callback) {
        if (!value) {
          return callback(new Error('不能为空'))
        } else {
          const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
          if (reg.test(value)) {
            callback()
          } else {
            return callback(new Error('请输入正确的手机号码'))
          }
        }
      },
      shadeOpen(index, minIndex) {
        if (!this.dialogForm.deptId) {
          this.msgError('请先选择适用学院!')
          return
        }
        this.$set(this, 'shadeIndex', index)
        this.$set(this, 'shadeMinIndex', minIndex)
        this.$set(this, 'userName', '')
        this.$set(this, 'mobile', '')
        this.$set(this, 'userId', '')
        this.$set(this.shadeForm, 'userId', '')
        this.$set(this, 'shadeType', true)
      },
      shadeOut() {
        this.$set(this, 'shadeIndex', null)
        this.$set(this, 'shadeMinIndex', null)
        this.$set(this, 'userName', '')
        this.$set(this, 'mobile', '')
        this.$set(this, 'userId', '')
        this.$set(this.shadeForm, 'userId', '')
        this.$set(this, 'shadeType', false)
      },
      //学院选中
      deptChange() {
        for (let i = 0; i < this.deptOptions.length; i++) {
          if (this.dialogForm.deptId == this.deptOptions[i].deptId) {
            this.$set(this.dialogForm, 'deptName', this.deptOptions[i].deptName)
          }
        }
      },
      shadeUp() {
        let self = this;
        for(let i=0;i<self.dialogForm.warningConfigRuleDetailDtoList[self.shadeIndex].dialogUserList.length;i++){
          if(self.dialogForm.warningConfigRuleDetailDtoList[self.shadeIndex].dialogUserList[i].userId == self.userId){
            self.msgError('改人员已存在');
            return
          }
        }
        this.$refs['shadeForm'].validate(valid => {
          if (valid) {
            this.$set(this.dialogForm.warningConfigRuleDetailDtoList[this.shadeIndex].dialogUserList[this.shadeMinIndex], 'userName', this.userName)
            this.$set(this.dialogForm.warningConfigRuleDetailDtoList[this.shadeIndex].dialogUserList[this.shadeMinIndex], 'mobile', this.mobile)
            this.$set(this.dialogForm.warningConfigRuleDetailDtoList[this.shadeIndex].dialogUserList[this.shadeMinIndex], 'userId', this.userId)
            this.$set(this, 'shadeType', false)
          }
        })
      },
      userChange(val) {
        let self = this
        for (let i = 0; i < self.optionsUser.length; i++) {
          if (self.optionsUser[i].userId == val) {
            this.$set(this, 'userName', self.optionsUser[i].userName)
            this.$set(this, 'mobile', self.optionsUser[i].mobile)
            this.$set(this, 'userId', self.optionsUser[i].userId)
          }
        }
      },
      userSelectList(query) {
        let self = this
        if (query !== '' && query.length > 1) {
          systemUserSelect({ 'searchValue': query, 'userType': '1', }).then(response => {
            this.$set(this, 'optionsUser', response.data)
          })
        } else {
          this.$set(this, 'optionsUser', [])
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .forewarningConfig {
    display: flex;
    flex-direction: column;
    flex: 1;
    .title-max-box {
      height: 80px;
      display: flex;
      border-bottom: 1px solid #dedede;
      .title-box {
        cursor: pointer;
        margin-left: 40px;
        width: 80px;
        p:nth-child(1) {
          text-align: center;
          margin-top: 20px;
          line-height: 40px;
          font-size: 16px;
          color: #333;
        }
        p:nth-child(2) {
          height: 4px;
          width: 60px;
          margin: 0 10px;
          border-radius: 4px;
        }
      }
      .null-p {
        flex: 1;
      }
      .out-p {
        width: 70px;
        margin: 20px;
      }
      .title-check {
        p:nth-child(1) {
          color: #0045AF;
        }
        p:nth-child(2) {
          background-color: #0045AF;
        }
      }
    }
    .page-max-big-box-a {
      flex: 1;
      margin: 40px 20px 20px;
      padding: 0 60px;
      .tab-max-big-box {
        height: 410px;
        display: flex;
        flex-direction: column;
        .tab-title-box {
          display: flex;
          p {
            cursor: pointer;
            width: 120px;
            line-height: 39px;
            text-align: center;
            font-size: 14px;
            color: #666666;
            border: 1px solid #E0E0E0;
            border-bottom: none;
            margin-right: 4px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
          }
          .title-check {
            color: #fff;
            border: 1px solid #0045AF;
            background: #0045AF;
          }
        }
        .tab-max-box-a {
          display: flex;
          flex: 1;
          border: 1px solid #E0E0E0;
          .form-box {
            display: flex;
            flex: 1;
            .tab-box-left {
              flex: 1;
              border-right: 1px dashed #D8D8D8;
              margin: 12px 0;
              padding: 30px 0 0;
            }
            .tab-box-right {
              flex: 1;
              margin: 12px 0;
              padding: 30px 0 0;
            }
          }
        }
        .tab-max-box-b {
          display: flex;
          flex: 1;
          border: 1px solid #E0E0E0;
          .tab-box {
            flex: 1;
            margin: 12px 0;
            padding: 30px 0 0;
          }
        }
      }
      .tips-box {
        margin: 20px 0 0;
        display: flex;
        background: #F5F5F5;
        p {
          font-size: 16px;
          line-height: 40px;
        }
        p:nth-child(1) {
          color: #333333;
          margin: 0 20px;
        }
        p:nth-child(2) {
          color: #666666;
        }
      }
      .table-bottom-box {
        .page-form-title-box {
          border: none;
        }
        .page-content-box {
          padding: 0 0 20px 0;
        }
      }
    }
    .page-max-big-box-b {
      flex: 1;
      padding-top: 42px;
      .text-p {
        margin: 10px 0 28px 72px;
      }
      .span-a {
        margin-left: 10px;
        color: #333;
        font-size: 16px;
        line-height: 40px;
      }
      .span-b {
        margin-left: 33px;
        line-height: 40px;
        color: #CCCCCC;
        font-size: 14px;
      }
    }
    .button-bottom-box {
      width: 100%;
      display: flex;
      padding-bottom: 20px;
      .null-p {
        flex: 1;
      }
      .submit-p {
        width: 100px;
      }
    }
  }
</style>
<style lang="scss">
  .forewarningUp-dialog {
    .shade-big-box {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10000;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.6);
      .shade-box {
        margin: 200px auto;
        width: 460px;
        height: 200px;
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        padding: 60px 20px 20px;
        .shade-min-box {
          flex: 1;
        }
      }
    }
    .forewarningUp-dialog-max-box {
      height: 600px;
      padding: 0 40px;
      .question-box {
        display: flex;
        padding: 0 8px 20px;
        .question-icon {
          color: #FFC000;
          font-size: 16px;
          height: 20px;
          line-height: 16px;
        }
        .question-text {
          color: #333;
          margin-left: 12px;
          height: 20px;
          line-height: 16px;
          font-size: 16px;
        }
      }
      .for-max-big-box {
        margin-bottom: 20px;
        .for-max-big-title-box {
          display: flex;
          background-color: #F5F5F5;
          height: 70px;
          position: relative;
          .position-index {
            position: absolute;
            left: 0;
            right: 0;
            width: 30px;
            height: 30px;
            border-bottom-right-radius: 10px;
            text-align: center;
            line-height: 30px;
            background-color: #0183FA;
            color: #fff;
            font-size: 16px;
          }
          .time-form-item {

            margin-top: 15px;
            margin-right: 0;
            input {
              border-bottom-right-radius: 0;
              border-top-right-radius: 0;
            }
          }
          .time-p {
            margin-top: 15px;
            font-size: 16px;
            color: #333;
            width: 60px;
            height: 40px;
            line-height: 40px;
            background-color: #E0E0E0;
            text-align: center;
          }
          .null-p {
            flex: 1;
          }
          .for-del-button {
            margin-top: 15px;
            width: 80px;
            margin-right: 10px;
          }
          .for-add-button {
            margin-top: 15px;
            width: 150px;
            margin-right: 27px;
          }
        }
        .for-max-box {
          border: 1px solid #E0E0E0;
          padding: 25px 0;
          .for-box {

          }
          .look-min-button {
            font-size: 14px;
            text-align: center;
            width: 20px;
            line-height: 20px;
            margin: 10px 10px 0 0;
            cursor: pointer;
            color: #A2A2A2;
          }
          .del-min-button {
            font-size: 14px;
            text-align: center;
            width: 20px;
            line-height: 20px;
            margin: 10px 10px 0 0;
            cursor: pointer;
            color: #A2A2A2;
          }
          .add-min-button {
            font-size: 14px;
            text-align: center;
            width: 20px;
            line-height: 20px;
            margin: 10px 10px 0 0;
            cursor: pointer;
            color: #0183FA;
          }
        }
      }
    }
  }
</style>
