<template>
  <div>
    <el-form ref="elForm" :model="formData"  size="medium" label-width="150px">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="申请信息" name="1">
          <el-row>

            <el-col :xs="24" :md="8">
              <el-form-item label="受理日期" prop="apply_date">
                <el-date-picker v-model="formData.apply_date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                :style="{width: '100%'}"
                                placeholder="受理日期"
                                clearable></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="8">
              <el-form-item label="接收日期" prop="accept_date">
                <el-date-picker v-model="formData.accept_date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                :style="{width: '100%'}"
                                placeholder="材料接收日期"
                                clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="申请方" name="2">
          <el-row>
            <el-col :xs="24" :md="8">
              <el-form-item label="申请方" prop="applicant">
                <el-input placeholder="请选择申请方" readonly clearable v-model="formData.applicant_v.name">
                  <el-button slot="append" icon="el-icon-search" @click="choose(0)"></el-button>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :md="8">
              <el-form-item label="地址" prop="applicant_v.address">
                <el-select v-model="formData.applicant_v.address"
                           placeholder="请选择地址"
                           filterable
                           allow-create
                           :style="{width: '100%'}">
                  <el-option v-for="(item, index) in addressOptions0"
                             :key="index"
                             :label="item.address"
                             :value="item.address"
                             :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
            <el-row>
              <el-col :xs="24" :md="8">
                <el-form-item label="联系人">
                  <el-input v-model="formData.applicant_v.linkman_name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="8">
                <el-form-item label="手机">
                  <el-input v-model="formData.applicant_v.linkman_mobile"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="8">
                <el-form-item label="职务">
                  <el-input v-model="formData.applicant_v.linkman_duty"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
        </el-collapse-item>
        <el-collapse-item title="质量管理体系信息" name="3">

          <el-row>
            <el-col :xs="24" :md="5">
              <el-form-item label="体系相关人数">
                <el-input v-model="formData.system_people"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="5">
              <el-form-item label="初始人数">
                <el-input v-model="formData.initial_people"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="5">
              <el-form-item label="监督人日">
                <el-input v-model="formData.supervision_people"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="5">
              <el-form-item label="认可情况" prop="is_approve">
                <el-switch v-model="formData.is_approve"
                           active-color="#13ce66"
                           inactive-color="#8C969D">
                </el-switch>
              </el-form-item>
             
            </el-col>
          </el-row>
          <el-row>

            <el-col :xs="24" :md="5">
              <el-form-item label="初次认证费">
                <el-input v-model="formData.Initial_certification"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="5">
              <el-form-item label="年金">
                <el-input v-model="formData.annuity"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :md="5">
              <el-form-item label="监督金额">
                <el-input v-model="formData.supervise_amount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="5">
              <el-form-item label="复评金额">
                <el-input v-model="formData.review_amount"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :xs="24" :md="8">
             
              <el-form-item label="依据的体系标准" prop="system_standard">
                <el-select v-model="formData.system_standard"
                           placeholder="请选择"
                           clearable
                           :style="{width: '100%'}">
                  <el-option v-for="(item, index) in type_Options"
                             :key="index"
                             :label="item.name"
                             :value="item.value"
                             :disabled="item.disabled">

                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!--<el-col :xs="24" :md="8">
              <el-form-item label="产品生产依据的国家/行业标准代号">
                <el-input v-model="formData.factory_v.linkman_mobile"></el-input>
              </el-form-item>
            </el-col>-->


            <el-col :xs="24" :md="12">
              <el-form-item label="专业代码">
                <el-select v-model="formData.professional_code"
                           multiple
                           filterable
                           allow-create
                           default-first-option
                            :style="{width: '100%'}"
                           placeholder="请选择专业代码">
                  <el-option v-for="item in professionaloptions"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>


          <el-row>
            <el-col :xs="24">
              <el-form-item label="认证范围">
                <el-input type="textarea" :rows="2" v-model="formData.certification"
                          clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>

          </el-row>



        </el-collapse-item>
        <!--<el-collapse-item title="机构转换" name="4">
          <el-row>
            <el-col :xs="24" :md="8">
              <el-form-item label="原认证机构名称">
                <el-input v-model="formData.factory_v.linkman_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="8">
              <el-form-item label="原（已）获认证的认证注册号">
                <el-input v-model="formData.factory_v.linkman_mobile"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </el-collapse-item>
        <el-collapse-item title="申请性质"  name="5">
          <el-row>

            <el-col :xs="24" :md="5">
              <el-form-item label="项目级别">
                <el-input v-model="formData.factory_v.linkman_mobile"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="5">
              <el-form-item label="申请性质">
                <el-input v-model="formData.factory_v.linkman_duty"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :md="5">
              <el-form-item label="审查方式">
                <el-input v-model="formData.factory_v.linkman_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="5">
              <el-form-item label="专业范围">
                <el-input v-model="formData.factory_v.linkman_mobile"></el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>

            <el-col :xs="24" :md="11">
              <el-form-item label="认证范围">
                <el-input type="textarea" :rows="2" v-model="formData.remarks"
                          clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="11">
              <el-form-item label="特殊要求">
                <el-input type="textarea" :rows="2" v-model="formData.remarks"
                          clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>

            <el-col :xs="24" :md="8">
              <el-form-item label="申请认证范围涉及的产品是否获得其它认证">
                <el-input type="textarea" :rows="5" v-model="formData.remarks"
                          clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="8">
              <el-form-item label="如获得过其他机构颁发的质量体系证书，该证书是否仍然有效？">
                <el-input type="textarea" :rows="5" v-model="formData.remarks"
                          clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="8">
              <el-form-item label="备注">
                <el-input type="textarea" :rows="5" v-model="formData.remarks"
                          clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>-->
      </el-collapse>
    </el-form>
    <div slot="footer" align="center">
      <el-button @click="close(false)">取消</el-button>
      <el-button type="primary" @click="handelConfirm">保存</el-button>
    </div>
    <el-dialog title="选择企业"
               :visible.sync="dgVisiable"
               :close-on-click-modal="false"
               width="80%"
               :append-to-body="true">
      <Enterprisechose ref="Enterprisechose" @handleChose="chooseComplete"></Enterprisechose>
    </el-dialog>
  </div>
</template>
<script>
import { createCertapp, updateCertapp, getCertapp } from "@/api/certapp";
import Enterprisechose from "@/views/enterprise/enterprisechoose";
import { getAddressList } from "@/api/enterprise";
import { genTree } from "../../utils";
import { getDictList } from "../../api/dict";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "QMSform",
  inheritAttrs: false,
  components: { Enterprisechose, Treeselect },
  props: ["action", "certapp"],
  data() {
      return {
        activeNames: ['1', '2', '3', '4','5'],
        formData: {
        field_code: 'QMS',
        applicant: null,
        applicant_v: {},
        factory: null,
        factory_v: {},
        cccpv_class: null,
        pattern: "正常",
        is_approve: true,
        
       
       
        
        },
         dgType: 0,
        dgVisiable: false,
        addressOptions0: [],
        type_Options: [],
         professionaloptions:[],
      };
    },
   computed: {},
  watch: {

  },
  created() {
    console.log(this.certapp)
    if(this.action!='create'){
      this.formData = this.certapp
    }
    this.getTypeOptions();
    this.getProfOptions();
  },
  mounted() {},
    methods: {
      handleChange(val) {
        console.log(val);
      },
      getTypeOptions() {
        getDictList({ type__code: "system_standards" }).then(response => {
          this.type_Options = genTree(response.data);
        });
      
      },
        getProfOptions() {
        getDictList({ type__code: "cnas_scope" }).then(response => {
          this.professionaloptions = genTree(response.data);
        });
      
    },
      
     handelConfirm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        if(this.formData.id){
          updateCertapp(this.formData.id, this.formData).then((res) => {
            this.$message.success('成功')
          this.$emit("handleCommit", res.data);
        });
        }else{
          createCertapp(this.formData).then((res) => {
            this.$message.success('成功')
          this.$emit("handleCommit", res.data);
        });
        }
        
      });
    },
      choose(val) {
      this.dgType = val;
      this.dgVisiable = true;
    },
    chooseComplete(val) {
      this.dgVisiable = false;
      if (val) {
        if (this.dgType == 1) {
          this.formData.manufacture = val.id;
          this.formData.manufacture_v = {
            name: val.name,
            linkman_name: val.linkman1_name,
            linkman_mobile: val.linkman1_mobile,
            linkman_duty: val.linkman1_duty,
          };
        } else if (this.dgType == 2) {
          this.formData.factory = val.id;
          this.formData.factory_v = {
            name: val.name,
            linkman_name: val.linkman1_name,
            linkman_mobile: val.linkman1_mobile,
            linkman_duty: val.linkman1_duty,
            person_count: val.person_count,
          };
        } else if (this.dgType == 0) {
          this.formData.applicant = val.id;
          this.formData.applicant_v = {
            name: val.name,
            linkman_name: val.linkman1_name,
            linkman_mobile: val.linkman1_mobile,
            linkman_duty: val.linkman1_duty,
            person_count: val.person_count,
          };
        }
      }
      this.getAddressList_(val.id);
    },

      getAddressList_(id) {
      getAddressList({ enterprise: id }).then((res) => {
        let data = genTree(res.data);
        if(this.dgType==0){
          this.addressOptions0 = data;
       
        }
      });
    },


    }
};
</script>
<style>
</style>
