<!--资格申请-添加-->
<template>
  <div class="addPage">
    <div class="addPage_title">
      <p>气瓶入库</p>
      <p  class="reset-button-one" @click="backPage">返回</p>
    </div>
    <div class="addPage_b">
      <el-form class="addPage_b_b" :model="form" ref="form" :rules="rules" label-position="right" label-width="120px">
        <el-form-item label="气体名称" prop="airName">
          <el-select v-model="form.airName" clearable placeholder="请选择气体名称" style="width: 300px">
            <el-option
              v-for="item in airNameList"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictLabel">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="气瓶规格" prop="configName">
          <el-select v-model="form.configName" clearable placeholder="请选择气瓶规格" style="width: 300px">
            <el-option
              v-for="item in configNameList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实验室" prop="subjectId" v-if="subjectList.length>1">
          <el-select v-model="form.subjectId" clearable placeholder="请选择实验室" style="width: 300px">
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="最低气压值" prop="minPressure">
          <el-input  style="width: 300px" v-model="form.minPressure"  placeholder="请输入最低气压值" maxlength="8" />
        </el-form-item>
        <el-form-item label="气体组分" prop="airComponent">
          <el-input  style="width: 300px" v-model="form.airComponent"  placeholder="请输入气体组分" maxlength="50" />
        </el-form-item>
        <el-form-item label="气表压力" prop="gasPressure" >
          <el-input  style="width: 300px" v-model="form.gasPressure"   oninput="value=value.replace(/[^1-9]{0,1}(\d*(?:\.\d{0,1})?).*$/g, '$1')"  placeholder="请输入气表压力，精确到小数点后一位" maxlength="8" />
        </el-form-item>
        <el-form-item label="检验有效期" prop="dateRange" >
          <el-date-picker
            :clearable="false"
            v-model="form.dateRange"
            size="small"
            style="width: 300px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="识别码" prop="electronicTag">
          <el-input  style="width: 300px" v-model="form.electronicTag"  placeholder="请输入识别码" maxlength="50" />
        </el-form-item>
        <el-form-item label="验收备注" prop="phone" >
          <el-input type="textarea" style="width: 300px" v-model="form.validateRemark"  placeholder="请输入验收备注" maxlength="200" />
        </el-form-item>
        <p class="inquire-button-one" style="width:300px;margin-left: 100px" @click="submitForm()">提交</p>
      </el-form>

    </div>
  </div>
</template>
<script>

import { getToken } from "@/utils/auth";
import { gasManageAdd, gasManageAirName, gasManageConfigName,subjectListAdmin } from '@/api/gasManage3_0/gasManageSYD'
let Base64 = require('js-base64').Base64;
export default {
  name: "addPage",
  props:{
    pageData: {},
  },
  data() {
    // 时间的校验
    const validateTime = (rule, value, callback) => {
      console.log(value)
      if(value && value.length>0){
        this.form.validateStartTime=value[0]
        this.form.validateEndTime=value[1]
        callback();
      }else{
        this.form.validateStartTime=null;
        this.form.validateEndTime=null
        callback(new Error('请选择检验有效期'))
      }
    }
    return {
      pageType:1,
      uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 设置只能选择当前日期及之后的日期
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
        }
      },

      loading:false,
      form:{
        isHandwheel:1,
        isFixed:1,
        isStatusSign:1,
        subjectId:'',
      },

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
      },
      total:0,
      tableData:[],
      airNameList:[],
      configNameList:[],
      optionsListTwo:[],
      subjectList:[],
      // 表单校验
      rules: {
        airName: [
          { required: true, message: "请选择气体名称", trigger: "change" }
        ],
        configName: [
          { required: true, message: "请选择气体规格", trigger: "change" }
        ],
        subjectId: [
          { required: true, message: "请选择实验室", trigger: "change" }
        ],
        minPressure: [
          { required: true, message: "请输入最低气压值", trigger: "change" }
        ],
        gasPressure: [
          { required: true, message: "请输入气表压力，精确到小数点后一位", trigger: "change" }
        ],
        electronicTag: [
          { required: true, message: "请输入识别码", trigger: "change" }
        ],

        dateRange: [
          {required: true, validator: validateTime, trigger: 'blur' },
        ],
      },
    };
  },
  created() {

  },
  methods: {

    /* 获取气体名称 */
    getAirName(){
      let _this=this;
      gasManageAirName().then( response => {
        let res=response.rows;
        if(response.code==200){
          _this.airNameList=res
        }
      });
    },
    /* 获取气规格 */
    getConfigName(){
      let _this=this;
      gasManageConfigName().then( response => {
        let res=response.rows;
        if(response.code==200){
          _this.configNameList=res
        }
      });
    },
    /* 获取实验室 */
    subjectListAdmin(){
      let _this=this;
      subjectListAdmin().then( response => {
        let res=response.data;
        if(response.code==200){
          //判断如果是一个实验室,直接取实验室id,如果不是让用户选择
          if(res.length==1){
            _this.form.subjectId=res[0].id
          }else{
            _this.subjectList=res
          }
        }
      });
    },



    /* 详情 */
    submitForm(){
      let _this=this;

      this.$refs["form"].validate(valid => {
        if (valid) {
          gasManageAdd(this.form).then(response => {
           if(response.code==200){
             this.msgSuccess("入库成功");
             this.$parent.handleClick('','','back');
           }
          });
        }
      });

    },
    //返回
    backPage(){
      this.$parent.handleClick('','','back');
    },

  },
  mounted() {
    this.getAirName()
    this.getConfigName()
    this.subjectListAdmin()
    //this.getInfo(this.pageData2.id);
  }

};
</script>

<style scoped lang="scss">
.addPage {
  flex:1;
  display: flex!important;
  flex-direction: column;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  border-radius:10px;
  /*顶部*/
  .addPage_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E0E0E0;
    padding-top:20px;
    p:nth-child(1){
      flex: 1;
      line-height:60px;
      color: #0045AF;
      font-size:18px;
      margin:0 12px 0 20px;
    }
    p:nth-child(2){
      margin-right:20px;
    }
    p:nth-child(3){
      margin-right:20px;
    }
  }
  /*入库*/
  .addPage_b{
    display: flex;
    justify-content: center;
    padding-top: 60px;
  }
}
</style>
