<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
        <el-row>
        <el-col :span="3">
        <el-form-item label="制造商" prop="manufacture" >
          <el-button type="primary" @click="choose(1)">选择</el-button>
        </el-form-item>
        </el-col>
        <el-col :span="3">
        <el-form-item label="生产厂" prop="factory" >
          <el-button type="primary" @click="choose(2)">选择</el-button>
        </el-form-item>
        </el-col>
        </el-row>
      <div v-if="formData.manufacture">
          <el-row>
              <el-col :span="4">
          <el-form-item label="制造商">
            <template>{{ formData.manufacture_v.name }}</template>
          </el-form-item>
              </el-col>
          <el-col :span="2">
          <el-form-item label="联系人">
            <template>{{ formData.manufacture_v.linkman_name }}</template>
          </el-form-item>
          </el-col>
          <el-col :span="3">
          <el-form-item label="手机">
            <template>{{ formData.manufacture_v.linkman_mobile }}</template>
          </el-form-item>
          </el-col>
          <el-col :span="2">
          <el-form-item label="职务">
            <template>{{ formData.manufacture_v.linkman_duty }}</template>
          </el-form-item>
          </el-col>
          <el-col :span="5">
          <el-form-item label="地址" prop="manufacture_v.address">
            <el-select
              v-model="formData.manufacture_v.address"
              placeholder="请选择地址"
              filterable
              allow-create
              :style="{width: '100%'}"
            >
              <el-option
                v-for="(item, index) in addressOptions1"
                :key="index"
                :label="item.address"
                :value="item.address"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          </el-row>
      </div>
      <div v-if="formData.factory">
          <el-row>
              <el-col :span="4">
          <el-form-item label="生产厂">
            <template>{{ formData.factory_v.name }}</template>
          </el-form-item>
              </el-col>
          <el-col :span="2">
          <el-form-item label="联系人">
            <template>{{ formData.factory_v.linkman_name }}</template>
          </el-form-item>
          </el-col>
          <el-col :span="3">
          <el-form-item label="手机">
            <template>{{ formData.factory_v.linkman_mobile }}</template>
          </el-form-item>
          </el-col>
          <el-col :span="2">
          <el-form-item label="职务">
            <template>{{ formData.factory_v.linkman_duty }}</template>
          </el-form-item>
          </el-col>
          <el-col :span="4">
          <el-form-item label="人数">
            <el-input-number v-model="formData.factory_v.person_count"  :min="1" ></el-input-number>
          </el-form-item>
          </el-col>
          <el-col :span="5">
          <el-form-item label="地址" prop="factory_v.address">
            <el-select
              v-model="formData.manufacture_v.address"
              placeholder="请选择地址"
              filterable
              allow-create
              :style="{width: '100%'}"
            >
              <el-option
                v-for="(item, index) in addressOptions2"
                :key="index"
                :label="item.address"
                :value="item.address"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          </el-row>
      </div>
      <el-row>
          <el-col :span="6">
                <el-form-item label="产品分类" prop="cccpv_class" :span="8">
            <treeselect
            v-model="formData.cccpv_class"
            :multiple="false"
            :normalizer="normalizer"
            :options="cccOptions"
            :disable-branch-nodes="true"
            placeholder="请选择产品分类"
            :style="{width: '100%'}"
            clearable
          />
          </el-form-item>
          </el-col>
          <el-col :span="6">
                <el-form-item label="申请模式" prop="pattern" :span="8">
            <el-select
              v-model="formData.pattern"
              placeholder="请选择模式"
              filterable
              allow-create
              :style="{width: '100%'}"
            >
              <el-option
                v-for="(item, index) in patternOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
      </el-row>
    </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 { createSubApplication } from "@/api/application"
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: "CCCform",
  inheritAttrs: false,
  components: { Enterprisechose, Treeselect },
  props: ["origindata", "addressOptions"],
  data() {
    return {
      formData: {
          cert_field_code:'CCC',
          application:this.origindata.id,
        manufacture_v: this.origindata.applicant_v,
        manufacture: this.origindata.applicant,
        factory: this.origindata.applicant,
        factory_v: this.origindata.applicant_v,
        cccpv_class:null,
        pattern:'正常'
      },
      rules: {
        manufacture: [
          {
            required: true,
            message: "请选择制造商",
            trigger: "change",
          },
        ],
        factory: [
          {
            required: true,
            message: "请选择生产厂",
            trigger: "change",
          },
        ],
      },
      addressOptions1: this.addressOptions,
      addressOptions2: this.addressOptions,
      dgVisiable: false,
      dgType: 1,
      cccOptions:[],
      patternOptions:[
          {
              label:'正常',
              value:'正常'
          },{
              label:'ODM',
              value:'ODM'
          },
          {
              label:'OEM',
              value:'OEM'

          }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {
      this.getCCCOptions()
  },
  mounted() {},
  methods: {
    close(val) {
      // this.$refs['elForm'].resetFields()
      this.$emit("closeDg", val);
    },
    handelConfirm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        createSubApplication(this.formData).then(res=>{
            this.close(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{
              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
        };
          }
      }
      this.getAddressList_(val.id);
    },
        getAddressList_(id) {
      getAddressList({ enterprise: id }).then((res) => {
          if(res.data){
          if(this.dgType==1){
              this.addressOptions1 = genTree(res.data)
              this.formData.manufacture_v.address = this.addressOptions1[0].address
          }else{
              this.addressOptions2 = genTree(res.data)
              this.formData.factory_v.address = this.addressOptions2[0].address
          }
          }

        
      });
    },
    getCCCOptions(){
        getDictList({type__code:'ccc_list'}).then(res=>{
            this.cccOptions=genTree(res.data)
        })
    },
        normalizer(node) {
      //去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    }
  },
};
</script>
<style>
</style>
