<!--化学品分类配置-->
<template>
    <div class="app-container chemicalClassification">
      <div class="top-title-box">
        <div class="min-title-box" v-for="(item,index) in buttonList" @click="topButtonClick(item.id,item.hazardLevel)">
          <p :class="buttonType==item.id?'button-color-1':'button-color-2'">{{item.classifyName}}</p>
          <p :class="buttonType==item.id?'button-back-1':''"></p>
        </div>
        <!--<div class="min-title-box" @click="topButtonClick(2)">-->
          <!--<p :class="buttonType==2?'button-color-1':'button-color-2'">普通化学品</p>-->
          <!--<p :class="buttonType==2?'button-back-1':''"></p>-->
        <!--</div>-->
        <div class="null-title-box"></div>
      </div>
      <div class="chemicalClassification-min" v-if="buttonList">
        <el-form :model="formData" ref="form" :inline="true" :rules="rules" label-width="160px">
          <div style="border-bottom:1px dashed #dedede;margin-bottom:20px;">
            <p class="chemicalClassification-min-title">化学品标签配置</p>
            <div class="form-min-box">
              <el-form-item label="标签类型：" prop="labelType">
                <el-select v-model="formData.labelType" clearable placeholder="请选择" style="width:500px;" @change="formChange">
                  <el-option label="RFID标签" :value="1"></el-option>
                  <el-option label="二维码标签" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="form-min-box" v-if="formData.labelType == 1">
              <el-form-item label="是否打印二维码标签：">
                <el-radio-group v-model="formData.printCode" @change="formChange">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
          <div>
            <p class="chemicalClassification-min-title">双人刷卡身份验证配置</p>
            <div class="form-min-box">
              <el-form-item label="化学品入库：" prop="joinStatus">
                <el-select v-model="formData.joinStatus" clearable placeholder="请选择" style="width:500px;" @change="formChange">
                  <el-option label="是" :value="2"></el-option>
                  <el-option label="否" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="form-min-box">
              <el-form-item label="化学品出库：" prop="outStatus">
                <el-select v-model="formData.outStatus" clearable placeholder="请选择" style="width:500px;" @change="formChange">
                  <el-option label="是" :value="2"></el-option>
                  <el-option label="否" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="form-min-box">
              <el-form-item label="化学品领用：" prop="collectStatus">
                <el-select v-model="formData.collectStatus" clearable placeholder="请选择" style="width:500px;" @change="formChange">
                  <el-option label="是" :value="2"></el-option>
                  <el-option label="否" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="form-min-box">
              <el-form-item label=" 化学品归还：" prop="returnStatus">
                <el-select v-model="formData.returnStatus" clearable placeholder="请选择" style="width:500px;" @change="formChange">
                  <el-option label="是" :value="2"></el-option>
                  <el-option label="否" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <p class="inquire-button-one up-button" @click="upDataButton" v-hasPermi="['chemical:config:add']">保存</p>
    </div>
</template>

<script>
  import { getClassifyConfig,addClassifyConfig,putClassifyConfig,classifyList } from "@/api/medicUniversity-3_1/index";
    export default {
      name: "index",
      data() {
        return {
          buttonType:1,
          hazardLevel:1,
          formData:{},
          rules:{
            joinStatus: [
              { required: true, message: "请选择化学品入库配置", trigger: "blur" },
            ],
            outStatus: [
              { required: true, message: "请选择化学品出库配置", trigger: "blur" },
            ],
            collectStatus: [
              { required: true, message: "请选择化学品领用配置", trigger: "blur" },
            ],
            returnStatus: [
              { required: true, message: "请选择化学品归还配置", trigger: "blur" },
            ],
            labelType:[
              { required: true, message: '请选择标签类型', trigger: 'blur' },
              { required: true, message: "请选择标签类型", validator: this.spaceJudgment, trigger: "blur" }
            ],
          },
          buttonList:[],
        }
      },
      mounted(){
        this.classifyList();
      },
      methods:{
        formChange(){
          this.$refs["form"].validate(valid => {})
        },
        //获取化学品分类列表
        classifyList(){
          classifyList().then(response => {
            this.$set(this,'buttonList',response.rows);
            this.$set(this,'buttonType',response.rows[0].id);
            this.$set(this,'hazardLevel',response.rows[0].hazardLevel);
            this.getClassifyConfig(response.rows[0].id);
          })
        },
        //提交按钮
        upDataButton(){
          let self = this;
          this.$refs["form"].validate(valid => {
            if (valid) {
              this.$confirm('确定要保存吗?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(function() {
                let obj = JSON.parse(JSON.stringify(self.formData));
                putClassifyConfig(obj).then(response => {
                  self.msgSuccess(response.msg);
                  self.getClassifyConfig(self.buttonType);
                })
              }).then(() => {
              }).catch(() => {});
            }
          })
        },
        //获取化学品配置
        getClassifyConfig(type){
          getClassifyConfig(type).then(response => {
            let obj = {
              id:response.data.id,
              joinStatus:response.data.joinStatus,
              outStatus:response.data.outStatus,
              collectStatus:response.data.collectStatus,
              returnStatus:response.data.returnStatus,
              labelType:response.data.labelType,
              printCode:response.data.printCode,
            };
            this.$set(this,'formData',obj)
          });
        },
        //切换化学品类型按钮
        topButtonClick(type,hazardLevel){
          if(this.buttonType!=type){
            this.buttonType=type;
            this.hazardLevel = hazardLevel;
            this.getClassifyConfig(type);
          }
        },
      },
    }
</script>

<style scoped lang="scss">
  .chemicalClassification{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden!important;
    p{
      margin:0;
    }
    .top-title-box{
      display: flex;
      border-bottom:1px solid #dedede;
      margin-bottom:20px;
      .min-title-box{
        width:150px;
        cursor: pointer;
        p:nth-child(1){
          line-height:80px;
          text-align: center;
          font-size:18px;
          font-weight:500;
        }
        p:nth-child(2){
          margin:0 auto;
          width:60px;
          height:5px;
          border-radius:4px;
        }
        .button-color-1{
          color:#0045AF;
        }
        .button-color-2{
          color:#333;
        }
        .button-back-1{
          background: #0045AF;
        }
        .button-back-2{

        }
      }
      .null-title-box{
        flex:1;
      }
    }
    .chemicalClassification-min{
      display: flex;
      flex-direction: column;
      margin:0 70px;
      .chemicalClassification-min-title{
        font-size:16px;
        color:#333;
        font-weight:500;
        margin-left:20px;
        margin-bottom:20px;
      }
      .form-min-box{
        display: inline-block;
        width:700px;
        height:70px;
      }
    }
    .up-button{
      margin:100px auto 0;
    }
  }
</style>
