<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>组织基本信息</span>

          </div>

          <el-col :span="8" font="left">
            <el-form-item label="组织查询码" prop="query_code">
              <el-input v-model="formData.query_code"
                        placeholder="请输入组织查询码"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="right">
            <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-col :span="8" font="left">
            <el-form-item label="组织名称" prop="ename">
              <el-input v-model="formData.ename"
                        placeholder="请输入组织名称（英文）"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="right">
            <el-form-item label="信用代码" prop="credit_code">
              <el-input v-model="formData.credit_code"
                        placeholder="请输入统一社会信用代码"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="组织法人" prop="legal">
              <el-input v-model="formData.legal"
                        placeholder="请输入组织法人"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="注册资金" prop="gassets">
              <el-input v-model="formData.gassets"
                        placeholder="请输入注册资金(万元)"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="8" font="right">
            <el-form-item label="组织员工数" prop="person_count">
              <el-input v-model="formData.person_count"
                        placeholder="请输入组织员工数"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="所属专业" prop="professional">
              <el-select v-model="formData.professional"
                         placeholder="请选择所属专业"
                         clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in professional_classOptions"
                           :key="index"
                           :label="item.fullname"
                           :value="item.value"
                           :disabled="item.disabled">

                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="right">
            <el-form-item label="陶瓷年产量" prop="ceramics_output">
              <el-input v-model="formData.ceramics_output"
                        placeholder="请输入陶瓷年产量（万平方米）"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="经济行业" prop="economy_class">
              <el-select v-model="formData.economy_class"
                         placeholder="请选择经济行业"
                         clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in economy_classOptions"
                           :key="index"
                           :label="item.fullname"
                           :value="item.value"
                           :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>


          <el-col :span="8" font="left">
            <el-form-item label="机构类型" prop="type">
              <el-select v-model="formData.type"
                         placeholder="请选择机构类型"
                         clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in type_Options"
                           :key="index"
                           :label="item.fullname"
                           :value="item.value"
                           :disabled="item.disabled">

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





          <el-col :span="8" font="left">
            <el-form-item label="经济类型" prop="type">
              <el-select filterable v-model="formData.economy_type"
                         placeholder="请选择经济类型"
                         clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in economy_typeOptions"
                           :key="index"
                           :label="item.name"
                           :value="item.value"
                           :disabled="item.disabled">

                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" font="right">
            <el-form-item label="建厂时间" prop="build_time">
              <el-date-picker v-model="formData.build_time"
                              type="date"
                              placeholder="选择日期"
                              format="yyyy 年 MM 月 dd 日"
                              value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5" font="left">
            <el-form-item label="工厂编号" prop="code">
              <el-input v-model="formData.code"
                        placeholder="请输入工厂编号"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="经营范围" prop="business_type">
              <el-input type="textarea" :rows="2" v-model="formData.business_type"
                        placeholder="请输入经营范围"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>

        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>组织联系人信息</span>

          </div>
          <el-col :span="8" font="left">
            <el-form-item label="常用联系人" prop="linkman1_name">
              <el-input v-model="formData.linkman1_name"
                        placeholder="请输入常用联系人"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="职务" prop="linkman1_duty">
              <el-input v-model="formData.linkman1_duty"
                        placeholder="职务"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="right">
            <el-form-item label="手机" prop="linkman1_mobile">
              <el-input v-model="formData.linkman1_mobile"
                        placeholder="手机"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="联系电话" prop="linkman1_tel">
              <el-input v-model="formData.linkman1_tel"
                        placeholder="联系电话"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="传真" prop="linkman1_fax">
              <el-input v-model="formData.linkman1_fax"
                        placeholder="传真"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="right">
            <el-form-item label="Email" prop="linkman1_email">
              <el-input v-model="formData.linkman1_email"
                        placeholder="Email"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="备用联系人" prop="linkman2_name">
              <el-input v-model="formData.linkman2_name"
                        placeholder="请输入常用联系人"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="职务" prop="linkman2_duty">
              <el-input v-model="formData.linkman2_duty"
                        placeholder="职务"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="right">
            <el-form-item label="手机" prop="linkman2_mobile">
              <el-input v-model="formData.linkman2_mobile"
                        placeholder="手机"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="联系电话" prop="linkman2_tel">
              <el-input v-model="formData.linkman2_tel"
                        placeholder="联系电话"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="传真" prop="linkman2_fax">
              <el-input v-model="formData.linkman2_fax"
                        placeholder="传真"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="right">
            <el-form-item label="Email" prop="linkman2_email">
              <el-input v-model="formData.linkman2_email"
                        placeholder="Email"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="ES联系人" prop="linkman3_name">
              <el-input v-model="formData.linkman3_name"
                        placeholder="请输入常用联系人"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="职务" prop="linkman3_duty">
              <el-input v-model="formData.linkman3_duty"
                        placeholder="职务"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="right">
            <el-form-item label="手机" prop="linkman3_mobile">
              <el-input v-model="formData.linkman3_mobile"
                        placeholder="手机"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="联系电话" prop="linkman3_tel">
              <el-input v-model="formData.linkman3_tel"
                        placeholder="联系电话"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="left">
            <el-form-item label="传真" prop="linkman3_fax">
              <el-input v-model="formData.linkman3_fax"
                        placeholder="传真"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" font="right">
            <el-form-item label="Email" prop="linkman3_email">
              <el-input v-model="formData.linkman3_email"
                        placeholder="Email"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input type="textarea" :rows="2" v-model="formData.remarks"
                        placeholder="请输入备注"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>组织地址信息</span>

          </div>
          <el-col :span="6" font="left">
            <el-form-item label="注册地址" prop="registered_address">
              <el-input v-model="formData.registered_address"
                        placeholder="中文地址"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" font="left">
            <el-form-item prop="registered_eaddress">
              <el-input v-model="formData.registered_eaddress"
                        placeholder="英文地址"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" font="right">
            <el-form-item prop="registered_code">
              <el-input v-model="formData.registered_code"
                        placeholder="地址邮编"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" font="right">
            <el-form-item prop="linkman1_mobile">
              <el-input v-model="formData.linkman1_mobile"
                        placeholder="地域代码"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" font="left">
            <el-form-item label="通讯地址" prop="mailing_address">
              <el-input v-model="formData.mailing_address"
                        placeholder="中文地址"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" font="left">
            <el-form-item prop="mailing_eaddress">
              <el-input v-model="formData.mailing_eaddress"
                        placeholder="英文地址"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" font="right">
            <el-form-item prop="mailing_code">
              <el-input v-model="formData.mailing_code"
                        placeholder="地址邮编"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" font="right">
            <el-select filterable v-model="formData.country_type" @change='getValue'
                       placeholder="请选择国家"
                       clearable
                       :style="{width: '35%'}">
              <el-option v-for="(item, index) in country_Options"
                         :key="index"
                         :label="item.name"
                         :value="item.value"
                         :disabled="item.disabled">

              </el-option>
            </el-select>
            <el-form-item label="级联选择" prop="field101">
              <el-cascader v-model="formData.field101" :options="field101Options" :props="field101Props"
                           :style="{width: '60%'}" filterable placeholder="请选择地区"></el-cascader>
            </el-form-item>

            

          </el-col>
          <el-col :span="6" font="left">
            <el-form-item label="生产地址" prop="production_address">
              <el-input v-model="formData.production_address"
                        placeholder="中文地址"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" font="left">
            <el-form-item prop="production_eaddress">
              <el-input v-model="formData.production_eaddress"
                        placeholder="英文地址"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" font="right">
            <el-form-item prop="production_postcode">
              <el-input v-model="formData.production_postcode"
                        placeholder="地址邮编"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" font="right">
            <el-form-item prop="linkman1_mobile">
              <el-input v-model="formData.linkman1_mobile"
                        placeholder="地域代码"
                        clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-card>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">创建</el-button>

          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

 
</style>
<script>
import { getDictList } from "@/api/dict";
import { createEnterprise } from "@/api/enterprise";
import { genTree} from "@/utils";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { upUrl, upHeaders } from "@/api/file";
export default {
  components: { Treeselect },
  props: [],
  data() {
    return {
      fileList: [],
      upHeaders: upHeaders(),
      upUrl: upUrl(),
      formData: {
         
      },
      economy_classOptions: [
      ],
      professional_classOptions: [
      ],
      type_Options: [],
      country_typeOptions: [],
   
      field101Options: [],
      field101Props: {
        "multiple": false,
        "label": "name",
        "value": "code",
        "children": "children"
      },
    
    };
  },
  computed: {},
 
  created() {
    this.getEclass(),
    this.getPfclass(),
    this.getTypeclass(),
    this.getcountrytype()
  },
  mounted() {},
  methods: {
    handlePreview(file) {
      if ("url" in file) {
        window.open(file.url);
      } else {
        window.open(file.response.data.path);
      }
    },
    handleSuccess(response, file, fileList) {
      this.formData.path = response.data.path;
    },
    changeRules() {
     
    },
    getEclass() {
      getDictList({ type__code: "professional_type" }).then(response => {
          this.professional_classOptions = genTree(response.data);
      });
     
    },
   getPfclass() {
      getDictList({ type__code: "economy_class" }).then(response => {
          this.economy_classOptions = genTree(response.data);
      });
     
    },

   getTypeclass() {
      getDictList({ type__code: "organication_type" }).then(response => {
          this.type_Options = genTree(response.data);
      });
     
    },
    getcountrytype() {
      getDictList({ type__code: "world_regions" }).then(response => {
          this.country_Options = genTree(response.data);
      });
    },
   
    getValue() {
      console.log(this.formData.field101);
      if (this.formData.country_type == 69) {
        getDictList({ type__code: "china_regions" }).then(response => {
          this.field101Options = genTree(response.data);
        });
      }
      else
        this.field101Options = '';
                },
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        // TODO 提交表单
        createEnterprise(this.formData).then(response => {
          this.$router.go(-1);
        });
      });
    },
   
  }
};
</script>
