<!--资质证照-新增-->
<template>
  <div class="accessRequirementAddPage">
    <el-form :model="form" ref="form" label-width="120px" :rules="rules">
      <el-form-item label="规格名称" prop="specName">
        <el-input v-model="form.specName" placeholder="请输入规格名称" style="width:320px;" maxlength="15" ></el-input>
      </el-form-item>
      <el-form-item label="所属类目" prop="category">
        <el-select v-model="form.category" placeholder="请选择" style="width:320px;">
          <el-option :label="item.dictLabel" :value="item.dictLabel" v-for="(item,index) in materialTypeList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="规格值" style="margin-bottom: 10px"  prop="empty">
        <el-input maxlength="15" style="width:320px;" v-model="form.specificationVal" ref="saveTagInput"  ></el-input>
        <p class="inquire-button-one" style="margin-left: 20px;" @click="handleInputConfirm">添加</p>

      </el-form-item>
      <div class="specification_border">
        <el-tag
          style="margin-right: 10px;margin-bottom: 10px;"
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)">
          {{tag}}
        </el-tag>
      </div>
      <div class="bottom-button-box">
        <p class="reset-button-one" @click="backPage">取消</p>
        <p class="inquire-button-one" @click="submitForm">提交</p>
      </div>
    </el-form>
  </div>
</template>

<script>
import { materialdata,materialdataPut } from "@/api/laboratory/accessRequirement"
import { updateSubject } from '@/api/laboratory/subject'
import {
  gasApplyDetail,
  gasCategoryList,
  specificationAdd,
  specificationAnew, specificationInfo,
  specificationList
} from '@/api/gasManage3_0/gasManage'
export default {
  name: 'accessRequirementAddPage',
  props:{
    pageData2:{},
  },
  data() {
    const empty=(rule, value, callback) => {
      callback();
    }
    return {

      form:{
        id:'',
        specName:"",
        category:"",
        specificationVal:"",
        detailDtos:[],
      },
      dynamicTags: [],
      materialTypeList:[],
      status:0,

      // 表单校验
      rules: {
        specName: [
          { required: true, message: "请输入规格名称", trigger: "change" }
        ],
        category: [
          { required: true, message: "请选择所属类目", trigger: "change" }
        ],
        empty:[
          { required: true, validator:empty, trigger: "change" },
        ],

      },

    }
  },

  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let specificationVal = this.form.specificationVal;
      if (specificationVal) {
        this.dynamicTags.push(specificationVal);
      }
      this.form.specificationVal = '';
    },
    //单选事件
    radioChange(e){

    },
    submit(){

    },
    //返回
    backPage(){
      this.$parent.handleClick('','','back');
      this.$parent.getList();
    },
    //气瓶类目
    gasCategoryList(){
      let _this=this;
      gasCategoryList().then( response => {
        let res=response.rows;
        _this.materialTypeList=res;
      });
    },
    /* 详情 */
    getInfo(id){
      let _this=this;
      specificationInfo(id).then( response => {
        let res=response.data;
        if(response.code==200){
          _this.form=res;
          res.detailVos.forEach(function(item){
            _this.dynamicTags.push(item.specValue)
          })


        }
      });

    },
    //提交
    submitForm(){
      let _this = this;

      this.$refs["form"].validate(valid => {
        if (valid) {
          if(_this.dynamicTags.length<=0){
            _this.msgError("请添加规格值!");
            return
          }
          _this.form.detailDtos=[];
          _this.form.detailVos=[];
          _this.dynamicTags.forEach(function(item){
            _this.form.detailDtos.push({'specValue':item})
          })

          if(_this.status==0){//添加
            specificationAdd(_this.form).then(response => {
              _this.msgSuccess("成功");
              _this.backPage();
            });
          }else if(_this.status==1){//编辑
            specificationAnew(_this.form).then(response => {
              _this.msgSuccess("成功");
              _this.backPage();
            });
          }

        }
      })
    }
  },
  mounted(){
    this.status=this.pageData2.status;

    if(this.status==1){
      this.form.id=this.pageData2.id
      this.getInfo(this.pageData2.id);
    }
    this.gasCategoryList();
  },
}
</script>

<style scoped lang="scss">
.accessRequirementAddPage{
  flex:1;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  padding:50px 0 50px 60px!important;
  border-radius: 10px;
  .specification_border{
    width: 320px;
    min-height: 100px;
    border: 1px solid #E0E0E0;
    margin-left: 120px;
    padding: 10px;
  }
  .bottom-button-box{
    margin-top:50px;
    display: flex;
    p:nth-child(1){
      margin:0 20px 0 100px;
    }
    .inquire-button-one{
      width: 140px;
    }
  }
}
</style>
