<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-row>
        <el-col :xs="24" :md="8">
          <el-form-item label="业务级别" prop="level">
            <el-select
              v-model="formData.level"
              placeholder="请选择业务级别"
              filterable
              allow-create
              :style="{width: '100%'}"
            >
              <el-option
                v-for="(item, index) in levelOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <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-divider content-position="left" style="margin-top:2px">申请方</el-divider> -->
      <el-row>
        <el-col :xs="24" :md="12">
          <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="12">
          <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="4">
          <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="6">
          <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="4">
          <el-form-item label="职务">
            <el-input v-model="formData.applicant_v.linkman_duty"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-divider content-position="left">制造商</el-divider> -->
      <el-row>
        <el-col :xs="24" :md="12">
          <el-form-item label="制造商" prop="manufacture">
            <el-input placeholder="请选择制造商" readonly clearable v-model="formData.manufacture_v.name">
              <el-button slot="append" icon="el-icon-search" @click="choose(1)"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12">
          <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>
      <el-row>
        <el-col :xs="24" :md="4">
          <el-form-item label="联系人">
            <el-input v-model="formData.manufacture_v.linkman_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="6">
          <el-form-item label="手机">
            <el-input v-model="formData.manufacture_v.linkman_mobile"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="4">
          <el-form-item label="职务">
            <el-input v-model="formData.manufacture_v.linkman_duty"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :xs="24" :md="12">
          <el-form-item label="生产厂" prop="factory">
            <el-input placeholder="请选择生产厂" readonly clearable v-model="formData.factory_v.name">
              <el-button slot="append" icon="el-icon-search" @click="choose(2)"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12">
          <el-form-item label="地址" prop="factory_v.address">
            <el-select
              v-model="formData.factory_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>
      <el-row>
        <el-col :xs="24" :md="4">
          <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="6">
          <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="4">
          <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="4">
          <el-form-item label="工厂人数">
            <el-input-number v-model="formData.factory_v.person_count"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :md="8">
          <el-form-item label="产品分类" prop="cccpv_class">
            <treeselect
              v-model="formData.cccpv_class"
              :multiple="false"
              :options="cccOptions"
              :disable-branch-nodes="true"
              placeholder="请选择产品分类"
              :style="{width: '100%'}"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="8">
          <el-form-item label="申请模式" prop="pattern">
            <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-col :xs="24" :md="4">
          <el-form-item label="是否认可" prop="is_approve">
            <el-switch v-model="formData.is_approve"></el-switch>
          </el-form-item>
        </el-col>
        
      </el-row>
      <el-row>
        <!-- <el-col :xs="24" :md="12">
          <el-form-item label="认证范围" >
          <el-input readonly placeholder="填写产品单元后自动生成"></el-input>
        </el-form-item>
        </el-col> -->
        <el-col :xs="24" :md="12">
          <el-form-item label="备注" >
          <el-input v-model="formData.remark" type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"></el-input>
        </el-form-item>
        </el-col>
        </el-row>
    </el-form>
    <div slot="footer" align="center">
      <el-button @click="cancel()">返回列表</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 } 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: "CCCform",
  inheritAttrs: false,
  components: { Enterprisechose, Treeselect },
  props: ["action", "certapp"],
  data() {
    return {
      // act:this.action,
      formData: {
        field_code: 'CCC',
        applicant: null,
        applicant_v: {},
        manufacture_v: {},
        manufacture: null,
        factory: null,
        factory_v: {},
        cccpv_class: null,
        pattern: "正常",
        is_approve:true,
        level:null
      },
      rules: {
        apply_date: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        accept_date: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        applicant: [
          {
            required: true,
            message: "请选择申请方",
            trigger: "change",
          },
        ],
        manufacture: [
          {
            required: true,
            message: "请选择制造商",
            trigger: "change",
          },
        ],
        factory: [
          {
            required: true,
            message: "请选择生产厂",
            trigger: "change",
          },
        ],
        cccpv_class: [
          {
            required: true,
            message: "请选择产品分类",
            trigger: "change",
          },
        ],
        pattern: [
          {
            required: true,
            message: "请选择申请模式",
            trigger: "change",
          },
        ],
        level: [
          {
            required: true,
            message: "请选择级别",
            trigger: "change",
          },
        ],
      },
      addressOptions0: [],
      addressOptions1: [],
      addressOptions2: [],
      dgVisiable: false,
      dgType: 1,
      cccOptions: [],
      levelOptions:[],
      patternOptions: [
        {
          label: "正常",
          value: "正常",
        },
        {
          label: "ODM",
          value: "ODM",
        },
        {
          label: "OEM",
          value: "OEM",
        },
      ],
    };
  },
  computed: {},
  watch: {

  },
  created() {
    console.log(this.certapp)
    if(this.action!='create'){
      this.formData = this.certapp
    }
    this.getCCCOptions();
    this.getlevelOptions();
    
  },
  mounted() {},
  methods: {
    cancel(val) {
      // this.$refs['elForm'].resetFields()
      this.$router.go(-1)
    },
    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.$router.replace({name:"CertappForm", params:{action:'update', kind:'CCC'}, query:{id:res.data.id}})
        });
        }
        
      });
    },
    choose(val) {
      this.dgType = val;
      this.dgVisiable = true;
    },
    chooseComplete(val) {
      this.dgVisiable = false;
      console.log(val)
      if (val) {
        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,
          };
        }else 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,
            person_count: val.person_count,
          };
        }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) => {
        let data = genTree(res.data);
        if(this.dgType==0){
          this.addressOptions0 = data;
        }else if(this.dgType==1){
          this.addressOptions1 = data;
        }else{
          this.addressOptions2 = data;
        }
      });
    },
    getCCCOptions() {
      getDictList({ type__code: "ccc_list" }).then((res) => {
        this.cccOptions = genTree(res.data);
      });
    },
    getlevelOptions(){
      getDictList({ type__code: "certapp_level" }).then((res) => {
        this.levelOptions = genTree(res.data);
      });
    }
  },
};
</script>
<style>
</style>
