<!-- 基础配置 -->
<template>
  <div class="app-container basicConfig">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p" style="margin-left:20px;">基础配置</p>
      <p class="page-top-title-add-p"
         v-hasPermiRouter="['chemical:basicConfig:add']"
         @click="submitButton">提交</p>
    </div>
    <div class="page-max-big-box scrollbar-box" v-if="showType">
      <el-form :model="configForm" ref="configForm"
               :inline="true" :rules="configRules" label-width="140px">
        <div class="page-top-box">
          <div class="page-min-left-box">
            <div>
              <el-form-item label="终端登录：" prop="loginType">
                <el-checkbox-group v-model="configForm.loginType" @change="loginTypeChange">
                  <el-checkbox label="1">人脸</el-checkbox>
                  <el-checkbox label="2">刷卡</el-checkbox>
                  <el-checkbox label="3">扫码</el-checkbox>
                  <el-checkbox label="4">人脸+刷卡</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="双人验证方式：" prop="verifyType">
                <el-checkbox-group v-model="configForm.verifyType">
                  <el-checkbox label="1">人脸</el-checkbox>
                  <el-checkbox label="2">刷卡</el-checkbox>
                  <el-checkbox label="3">扫码</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
          </div>
          <div class="page-min-right-box">
            <div>
              <el-form-item label="超时入库：" prop="timeoutHour" class="border-right-radius-form-item">
                <el-input-number v-model="configForm.timeoutHour" style="width:90px;"
                                 :controls="false" :min="1" :max="168">
                </el-input-number>
              </el-form-item>
              <p class="time-p">小时</p>
              <p class="text-p">待入库化学品操作入库时间规定</p>
            </div>
            <div>
              <el-form-item label="称重容差百分比：" prop="vinVex" class="border-right-radius-form-item">
                <el-input-number v-model="configForm.vinVex" style="width:90px;"
                                 :precision="2" :step="0.1"
                                 :controls="false" :min="0.01" :max="20">
                </el-input-number>
              </el-form-item>
              <p class="time-p">%</p>
              <p class="text-p">业务操作称重时，化学品当前净含量的容差占比</p>
            </div>
            <div>
              <el-form-item label="超时未归还：" prop="useHour" class="border-right-radius-form-item">
                <el-input-number v-model="configForm.useHour" style="width:90px;"
                                 :controls="false" :min="1" :max="168">
                </el-input-number>
              </el-form-item>
              <p class="time-p">小时</p>
              <p class="text-p">化学品领用后，使用最大时长</p>
            </div>
<!--            <div>
              <el-form-item label="超时操作：" prop="operateTimeout" class="border-right-radius-form-item">
                <el-input-number v-model="configForm.operateTimeout" style="width:90px;"
                                 :controls="false" :min="1" :max="240">
                </el-input-number>
              </el-form-item>
              <p class="time-p">分钟</p>
              <p class="text-p">终端控制开锁后，未完成后续业务操作时间限制</p>
            </div>-->
          </div>
        </div>
        <div class="page-bottom-box">
          <p class="min-title">管控配置</p>
          <div class="page-bottom-table-box">
            <p :class="checkType?'check-button':''" @click="checkButton(true)">管控类</p>
            <p :class="!checkType?'check-button':''" @click="checkButton(false)">非管控类</p>
          </div>
          <div v-for="(item,index) in configForm.controlList" :key="index">
            <div v-if="item.controlType == checkType">
              <el-form-item label="双人认证" prop="verify" class="page-switch" label-width="70px">
                <el-switch
                  :active-value="true"
                  :inactive-value="false"
                  active-color="#0183FA"
                  inactive-color="#999"
                  v-model="item.verify"
                  active-text="启用"
                  inactive-text="停用"
                ></el-switch>
              </el-form-item>
              <el-form-item label="二维码打印" prop="qrCodePrint" class="page-switch">
                <el-switch
                  :active-value="true"
                  :inactive-value="false"
                  active-color="#0183FA"
                  inactive-color="#999"
                  v-model="item.qrCodePrint"
                  active-text="启用"
                  inactive-text="停用"
                ></el-switch>
              </el-form-item>
              <el-form-item label="领用称重" prop="metage" class="page-switch">
                <el-switch
                  :active-value="true"
                  :inactive-value="false"
                  active-color="#0183FA"
                  inactive-color="#999"
                  v-model="item.metage"
                  active-text="启用"
                  inactive-text="停用"
                ></el-switch>
              </el-form-item>
              <el-form-item label="手动录入重量" prop="inputWeight" class="page-switch">
                <el-switch
                  :active-value="true"
                  :inactive-value="false"
                  active-color="#0183FA"
                  inactive-color="#999"
                  v-model="item.inputWeight"
                  active-text="启用"
                  inactive-text="停用"
                ></el-switch>
              </el-form-item>
              <el-form-item label="" prop="outRange" style="margin:2px 0 0 20px;">
                <div class="check-img-bog" @click="checkImgButton(item)">
                  <img v-if="item.outRange" src="@/assets/ZDimages/basicsModules/icon_xzqx_xz.png">
                  <img v-if="!item.outRange" src="@/assets/ZDimages/basicsModules/icon_xzqx_zc.png">
                  <p>仅量程外</p>
                </div>
                <!--<el-checkbox-group v-model="item.outRange">-->
                  <!--<el-checkbox :label="true">仅量程外</el-checkbox>-->
                <!--</el-checkbox-group>-->
              </el-form-item>
            </div>
            <div style="margin-top:5px;" v-if="item.controlType == checkType">
              <el-form-item label="实验室存放规定：" prop="fluidMax">
                <div class="border-radius-form-item">
                  <p class="text-p">液体总量</p>
                  <el-input-number v-model="item.fluidMax" style="width:80px;"
                                   :controls="false" :min="1" :max="240">
                  </el-input-number>
                  <p class="time-p">L</p>
                </div>
              </el-form-item>
              <el-form-item label="" prop="solidMax" style="margin-left:50px;">
                <div class="border-radius-form-item">
                  <p class="text-p">固体总量</p>
                  <el-input-number v-model="item.solidMax" style="width:80px;"
                                   :controls="false" :min="1" :max="240">
                  </el-input-number>
                  <p class="time-p">KG</p>
                </div>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
  import { chemicalBasicConfigList,chemicalBasicConfigAdd } from "@/api/chemicalManage/index";
  export default {
    name: 'index',
    data () {
      return {
        showType:false,
        checkType:true,
        configForm:{},
        configRules:{
          loginType: [
            { required: true, message: "请选择终端登录方式", trigger: "blur" },
            { required: true, message: "请选择终端登录方式", validator: this.spaceJudgment, trigger: "blur" }
          ],
          verifyType: [
            { required: true, message: "请选择双人认证方式", trigger: "blur" },
            { required: true, message: "请选择双人认证方式", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
      }
    },
    created () {

    },
    mounted () {
      this.chemicalBasicConfigList();
    },
    methods: {
      chemicalBasicConfigList(){
        chemicalBasicConfigList({}).then(response => {
          let obj = response.data.basic[0];
          obj.loginType = obj.loginType.split(',');
          obj.verifyType = obj.verifyType.split(',');
          obj.controlList = response.data.contro;
          this.$set(this,'configForm',obj);
          this.$set(this,'showType',true);
        });
      },
      //切换
      checkButton(type){
        if(type != this.checkType){
          this.$set(this,'checkType',type);
        }
      },
      //仅量程外开关
      checkImgButton(item){
        item.outRange = !item.outRange;
      },
      //提交
      submitButton(){
        this.$refs["configForm"].validate(valid => {
          if (valid) {
            let obj = JSON.parse(JSON.stringify(this.configForm))
            obj.loginType = obj.loginType+'';
            obj.verifyType = obj.verifyType+''
            chemicalBasicConfigAdd(obj).then(response => {
              this.msgSuccess(response.message);
              this.chemicalBasicConfigList();
            });
          }
        })
      },
      //终端登录勾选
      loginTypeChange(val){
        if(val.indexOf('4') != -1){
          if(val[val.length-1] == '4'){
            this.$set(this.configForm,'loginType',["4"]);
          }else{
            let list = [];
            val.forEach((item)=>{
              if(item != '4'){
                list.push(item)
              }
            })
            this.$set(this.configForm,'loginType',list);
          }
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .basicConfig{
    display: flex;
    flex-direction: column;
    flex:1;
    .title-box{
      height:80px;
      border-bottom:1px solid #dedede;
      p{
        color:#0045AF;
        font-size:18px;
        margin-left:20px;
        line-height:80px;
      }
    }
    .page-max-big-box{
      flex:1;
      .page-top-box{
        display: flex;
        padding:34px 50px;
        border-bottom:20px solid #F5F5F5;
        .page-min-left-box{
          width:750px;
        }
        .page-min-right-box{
          flex:1;
          border-left:1px dashed #E0E0E0;
          div{
            display: flex;
            .border-right-radius-form-item{
              margin-right:0;
            }
            ::v-deep input{
              border-bottom-right-radius:0;
              border-top-right-radius:0;
            }
            .time-p{
              font-size:14px;
              color:#333;
              width:60px;
              height:40px;
              line-height:40px;
              background-color: #E0E0E0;
              text-align: center;
              border-top-right-radius:4px;
              border-bottom-right-radius:4px;
            }
            .text-p{
              color:#999999;
              font-size:16px;
              line-height:40px;
              margin-left:20px;
            }
          }
        }
      }
      .page-bottom-box{
        padding:0 80px;
        .min-title{
          margin:28px 0;
        }
        .page-bottom-table-box{
          display: flex;
          margin-bottom:30px;
          p{
            cursor:pointer;
            width:100px;
            height:40px;
            line-height:38px;
            text-align: center;
            border:1px solid #E0E0E0;
            color:#333;
          }
          p:nth-child(1){
            border-top-left-radius:6px;
            border-bottom-left-radius:6px;
            border-right:none;
          }
          p:nth-child(2){
            border-top-right-radius:6px;
            border-bottom-right-radius:6px;
            border-left:none;
          }
          .check-button{
            border:1px solid #0183FA;
            background-color: #0183FA;
            color:#fff;
          }
        }
        .border-radius-form-item{
          display: flex;
          .text-p{
            color:#333;
            width:100px;
            text-align: center;
            font-size:14px;
            border:1px solid #E0E0E0;
            border-right:none;
            border-top-left-radius:4px;
            border-bottom-left-radius:4px;
          }
          ::v-deep input{
            border-radius:0;
          }
          .time-p{
            border-top-right-radius:4px;
            border-bottom-right-radius:4px;
            font-size:14px;
            color:#333;
            width:60px;
            height:40px;
            line-height:40px;
            background-color: #E0E0E0;
            text-align: center;
          }
        }
        .check-img-bog{
          display: flex;
          cursor: pointer;
          margin-left:10px;
          img{
            width:16px;
            height:16px;
            margin:12px 10px 0 0;
            border-radius:50%;
            overflow: hidden;
          }
          p{
            line-height: 40px;
          }
        }
      }
    }
    .button-bottom-box{
      width:100%;
      display: flex;
      padding-bottom:20px;
      .null-p{
        flex:1;
      }
      .submit-p{
        width:100px;
      }
    }
  }
</style>
