<template>
  <div class="app-container">

    <el-tabs type="border-card">
      <el-tab-pane label="评审信息">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">

          <el-row>
            <el-col :span="8">
              <el-form-item label="认证类型" prop="cert_field">
                <treeselect v-model="formData.cert_field" :multiple="false" :options="cert_fieldOptions" placeholder="请选择认证类型" :style="{width: '100%'}" @select="typeChange"
                            :clearable="false" :defaultExpandLevel='1' :disable-branch-nodes="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="cert_field_code =='PV'">
              <el-form-item label="产品分类" prop="pv_class">
                <treeselect v-model="formData.pv_class"
                            :disable-branch-nodes="true"
                            placeholder="请选择产品分类"
                            clearable
                            :style="{width: '100%'}"
                            :options="pv_classOptions"></treeselect>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="cert_field_code =='CCC'">
              <el-form-item label="产品分类" prop="ccc_list">
                <treeselect v-model="formData.ccc_list"
                            :disable-branch-nodes="true"
                            placeholder="请选择产品分类"
                            clearable
                            :style="{width: '100%'}"
                            :options="ccc_listOptions"></treeselect>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="评审标题" prop="name">
                <el-input v-model="formData.name" placeholder="请输入评审标题" clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>


          </el-row>
          <el-row>
            <el-col :span="24" style="margin-top:4px">
              <el-form-item size="large">
                <el-button type="primary" @click="submitForm">保存</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="评审项信息" v-if="formData.id">
        <Evaluations :evItem="formData.id"></Evaluations>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
   import { getDictList } from "@/api/dict";
import { updateEvaluationItem,getEvaluationItem} from "@/api/evaluationitem";
import { genTree } from "@/utils";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  
import Evaluations from "@/views/evaluation/evaluations";
export default {
  components: { Treeselect,Evaluations},
  props: [],
  data() {
    return {
     
      formData: {
       id: null,
        name:undefined,
        cert_field: undefined,
        pv_scope: undefined,
        pv_class: undefined,
        ccc_list: undefined
       
       
      },
      rules: {
       
      },
     cert_fieldOptions: [],
      cert_field_code:null,
      pv_scopeOptions: [],
      pv_classOptions: [],
      ccc_listOptions: [],
      cert_patternOptions: []
    };
  },

  created() {
    this.formData.id = this.$route.query.id;//接收参数
    this.getData();
     this.getPvscope();
    this.getPvclass();
    this.getCccList();
    this.getCertpattern();
    this.getCerttype();
  },
  mounted() {},
    methods: {

   
       typeChange(node,id){
      this.cert_field_code = node.code
      this.changeRules(node.code)
      },
         changeRules(val) {
      if (val == "PV") {
        this.rules.pv_scope = [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ];
        this.rules.pv_class = [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ];
        this.rules.ccc_list = [];
      } else if (val == "CCC") {
        this.rules.ccc_list = [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ];
        this.rules.pv_class = [];
        this.rules.pv_scope = [];
      } else {
        this.rules.pv_class = [];
        this.rules.pv_scope = [];
        this.rules.ccc_list = [];
      }
    },
    getCerttype() {
      getDictList({ type__code: "cert_field" }).then(response => {
        if (response.data) {
          this.cert_fieldOptions = genTree(response.data);
        }
      });
    },
    getPvscope() {
      getDictList({ type__code: "pv_scope" }).then(response => {
        if (response.data) {
          this.pv_scopeOptions = genTree(response.data);
        }
      });
    },
    getPvclass() {
      getDictList({ type__code: "pv_class" }).then(response => {
        if (response.data) {
          this.pv_classOptions = genTree(response.data);
        }
      });
    },
    getCccList() {
      getDictList({ type__code: "ccc_list" }).then(response => {
        if (response.data) {
          this.ccc_listOptions = genTree(response.data);
        }
      });
    },
     getCertpattern() {
      getDictList({ type__code: "cert_pattern" }).then(response => {
        if (response.data) {
          this.cert_patternOptions = genTree(response.data);
        }
      });
      },
      getData() {
      getEvaluationItem(this.formData.id).then(response => {
        this.formData = response.data;
        this.cert_field_code = response.data.cert_field_.code
       
      })
      },
   submitForm() {
        this.$refs["elForm"].validate(valid => {
          if (!valid) return;
        // TODO 提交表单
        updateEvaluationItem(this.formData.id,this.formData).then(response => {
          this.$router.go(-1);
        });
          
        });
      },
       resetForm() {
      this.$refs["elForm"].resetFields();
    }
    }
};
</script>
