<template>
  <div>
    <el-button size="small" type="primary" @click="onShow" >新增产品技术资料</el-button>
    <el-dialog
        :visible.sync="drawer"
        width="450px"
        @close="onClose"
    >
      <div>
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules"  ref="form"  size="mini" label-position="right" label-width="90px">
            <el-col :span="20">
              <el-form-item prop="type"  label="资料类别:">
                <el-select v-model="form.type" placeholder="请选择">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item  label="资料说明:">
                <el-input type="textarea" autosize v-model="form.remarks" placeholder="输入资料说明"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="dialog-footer">
        <el-button size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit"   class="normal-btn-width btn-primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "add",
  data() {
    return {
      drawer:false,
      form:{
        type:'',
        remarks:''
      },
      options: [],
      rules:{
        type: [
          { required: true, message: '档案名称不可为空', trigger: 'change' },
        ],
      },
    }
  },
  methods:{
    onShow() {
      this.drawer = true
      this.typeDetails();
    },
    onClose() {
      this.form = {
        type:''
      }
    },
    onSubmit(){
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": "20220926095703",
          "version":1,
          "content": {
            "plm_technicalinfoid":0,
            "type":this.form.type,
            "remarks":this.form.remarks
          }
        })
        this.tool.showMessage(res,() => {
          this.drawer = false
          this.$emit('addSuccess')
        })
      })
    },
    /*资料类别明细*/
    async typeDetails(){
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "typename": "technicalinfotype",
          "parameter": {
            "siteid": "YOSTEST2"
          }
        }
      })
      console.log(res)
      this.options = res.data
    }
  }

}
</script>

<style scoped>

</style>