<!-- 企业信息管理--新增联系人 -->
<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :title="$t('enterpriseInfoManage.supplierInfoManage.contactMaintain')"
                 :form="form" :editModel="editModel" :api="api">
      <span>{{$t('enterpriseInfoManage.coreEnterpriseInfoManage.coreEnterpriseInfos')}}</span>
      <el-divider></el-divider>
      <dym-form :componentList="supplierList" :formValue="form"></dym-form>
      <span>{{$t('enterpriseInfoManage.coreEnterpriseInfoManage.contactInfos')}}</span>
      <el-divider></el-divider>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="8">
          <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.contact')" prop="contact">
            <el-input type="text" v-model="form.contact" :placeholder="$t('common.pleaseInput')" class="dymForm"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8">
          <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.sex')" prop="sex">
            <select-dictionary v-model="form.sex" :dictTypeCode="dictTypeCode"></select-dictionary>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="8">
          <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.mobilePhone')" prop="mobilePhone">
            <el-input type="text" v-model="form.mobilePhone" :placeholder="$t('common.pleaseInput')" class="dymForm"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8">
          <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.weChat')" prop="weChat" :rules="weChatRules">
            <el-input type="text" v-model="form.weChat" :placeholder="$t('common.pleaseInput')" class="dymForm"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8">
          <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.QQ')" prop="QQ" :rules="QQRules">
            <el-input type="text" v-model="form.QQ" :placeholder="$t('common.pleaseInput')" class="dymForm"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <dym-form :componentList="contactList" :formValue="form"></dym-form>
      <span>{{$t('enterpriseInfoManage.coreEnterpriseInfoManage.accountInfos')}}</span>
      <el-divider></el-divider>
      <dym-form :componentList="accountList" :formValue="form"></dym-form>
    </dialog-edit>
  </div>
</template>

<script>
import { DialogEdit, dymForm, SelectDictionary } from 'newepoch-components'
import BaseEdit from '@/pages/baseEditPage'
import supplierInfoManageApi from '@/api/enterpriseInfoManage/supplierInfoManageApi.js'
export default {
  extends: new BaseEdit(),
  name: 'contactMaintainEdit1',
  components: {
    DialogEdit,
    dymForm,
    SelectDictionary
  },
  data () {
    return {
      dictTypeCode: 'sex',
      supplierList: [
        // 核心企业名称
        {
          value: 'coreEnterpriseName',
          disabled: false,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.coreEnterpriseName,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 8],
          prop: 'coreEnterpriseName'
        },
        // 核心企业简称
        {
          value: 'coreEnterpriseShortName',
          disabled: false,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.coreEnterpriseShortName,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 8],
          prop: 'coreEnterpriseShortName'
        }
      ],
      contactList: [
        // 部门(下拉兼输入框组件)
        {
          value: 'department',
          disabled: false,
          componentName: 'el-input',
          // allowCreate: true,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.department,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [24, 24, 24, 8],
          prop: 'department'
        },
        // 职位
        {
          value: 'position',
          disabled: false,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.position,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 8],
          prop: 'position'
        },
        // 负责事项
        {
          value: 'matter',
          disabled: false,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.responsibleMatter,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 8],
          prop: 'matter'
        }
      ],
      accountList: [
        // 生成账号类型
        {
          value: 'accountType',
          disabled: false,
          componentName: 'SelectDictionary',
          dictTypeCode: '',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.accountType,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [24, 24, 24, 8],
          prop: 'accountType'
        },
        // 关联主账号(下拉组件)
        {
          value: 'relevanceAccount',
          disabled: false,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.relevanceAccount,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [24, 24, 24, 8],
          prop: 'relevanceAccount'
        }
      ]
    }
  },
  computed: {
    api () {
      return supplierInfoManageApi.supplierInfoApi
    }
  }
}
</script>

<style scoped>

</style>
