<!--危险源预警-->
<template>
  <div class="sourceOfDangerForewarning">
    <div class="title-box">
      <p>危险源预警配置</p>
      <p></p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form class="form-max-box" ref="addForm" :model="addForm" :rules="rules" label-width="170px">
        <p class="form-title-p">化学品预警规则</p>
        <div class="form-top-box">
          <el-form-item class="form-item-box" label="即将过期提醒" prop="num1">
            <el-input-number style="width:320px" v-model="addForm.num1" placeholder="请输入即将过期提醒天数(天)" :min="5" :max="60" label=""></el-input-number>
          </el-form-item>
          <el-form-item class="form-item-box" label="过期提醒数" prop="num2">
            <el-input-number style="width:320px" v-model="addForm.num2" placeholder="请输入化学品过期后提醒次数" :min="1" :max="5" label=""></el-input-number>
          </el-form-item>
        </div>
        <el-form-item class="form-item-check-box" label="违规带离">
          <el-checkbox-group v-model="addForm.check1">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListA" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item-check-box" label="超时未归还">
          <el-checkbox-group v-model="addForm.check2">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item-check-box" label="化学品已过期">
          <el-checkbox-group v-model="addForm.check3">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item-check-box" label="化学品即将过期">
          <el-checkbox-group v-model="addForm.check4">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <p class="form-title-p" style="margin-top:20px;margin-bottom:10px;">气瓶预警规则</p>
        <el-form-item class="form-item-check-box" label="违规带离">
          <el-checkbox-group v-model="addForm.check5">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListA" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item-check-box" label="超时未归还">
          <el-checkbox-group v-model="addForm.check6">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item-check-box" label="化学品已过期">
          <el-checkbox-group v-model="addForm.check7">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item-check-box" label="化学品即将过期">
          <el-checkbox-group v-model="addForm.check8">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-button-max-box">
      <p></p>
      <p class="reset-button-one" @click="outButton">取消</p>
      <p class="inquire-button-one" @click="upDataButton">提交</p>
      <p></p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'sourceOfDangerForewarning',
    data(){
      return{
        checkListA:[{key:"1",value:"系统通知"},{key:"2",value:"短信通知"},{key:"3",value:"声光报警"},],
        checkListB:[{key:"1",value:"系统通知"},{key:"2",value:"短信通知"}],
        addForm:{
          num1:7,
          num2:2,
          check1:[],
          check2:[],
          check3:[],
          check4:[],
          check5:[],
          check6:[],
          check7:[],
          check8:[],
        },
        rules:{
          num1: [
            { required: true, message: "请输入穿戴抓拍周期", trigger: "blur" },
          ],
          num2: [
            { required: true, message: "请输入异常再识别数", trigger: "blur" },
          ],
        },
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{

      //提交
      upDataButton(){
        this.$refs["addForm"].validate(valid => {
          if (valid) {

          }
        })
      },
      //返回事件
      outButton(){
        this.$parent.goPage(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .sourceOfDangerForewarning{
    font-weight: 500;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    ::v-deep .el-input-number__increase{
      line-height: 38px;
    }
    .title-box{
      display: flex;
      border-bottom:1px solid #dedede;
      p:nth-child(1){
        margin-left:20px;
        line-height: 80px;
        font-size:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        flex:1;
      }
      p:nth-child(3){
        margin:20px;
      }
    }
    .content-box{
      flex:1;
      padding-top:30px;

      .form-max-box{
        .form-top-box{
          display: flex;
          margin-top:30px;
          height:60px;
          .form-item-box{
            height:60px;
            margin-bottom:0;
          }
        }
        .form-item-check-box{
          margin:0;
        }
        .form-title-p{
          line-height:50px;
          color:#0045AF;
          background-color: #F5F5F5;
          font-size:16px;
          padding-left:20px;
        }
      }
    }
    .bottom-button-max-box{
      display: flex;
      padding:20px 0;
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(2){
        width:100px;
        margin-right:20px;
      }
      p:nth-child(3){
        width:100px;
      }
      p:nth-child(4){
        flex:1;
      }
    }
  }
</style>
