<!-- 供应商信息管理--编辑无账号的联系人 -->
<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :title="$t('enterpriseInfoManage.supplierInfoManage.contactMaintainInfo')" @onSaved="saved"
                 :form="form" :editModel="editModel" :api="api" labelWidth="110px" :formRules="formRules" :autoSave="autoSave"
                 :menuCode="menuId" savePerms="empolSave">
      <!--<span class="title-text">{{$t('enterpriseInfoManage.supplierInfoManage.supplierInfos')}}</span>-->
      <span class="title-text">{{$t('enterpriseInfoManage.supplierInfoManage.contactInfos')}}</span>
      <div class="contactEdit">
        <el-divider></el-divider>
      </div>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="24" :lg="8">
            <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.contact')" prop="employeeName"
                          :rules="formRules.employeeName">
              <el-input :disabled="editModel === 'V'" type="text" v-model="contactForm.employeeName"
                        maxlength="100" :placeholder="editModel === 'V' ? '' : $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.contactType')"
                          prop="employeeType"
                          :rules="formRules.employeeType">
              <!--              <el-input type="text" :disabled="true" v-model="item.contactType" class="dymForm"></el-input>-->
              <select-dictionary  v-model="contactForm.employeeType" dictTypeCode="ZD0140"
                                 :disabled="true"
                                  :placeholder="''"
                                 :store="$store"
                                 :multiple="false"></select-dictionary>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8">
            <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.sex')" prop="gender"
                          :rules="formRules.sex">
              <select-dictionary :disabled="editModel === 'V'" v-model="contactForm.gender"
                                 :placeholder="editModel === 'V' ? '' : $t('common.pleaseSelect')"
                                 dictTypeCode="ZD0031" :store="$store"></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="telephone"
                          :rules="[{ required: true, message: $t('regMsg.enterpriseInfoManage.mobilePhone'), trigger: 'blur' },
                                  { validator: mobilePhoneCheck, trigger: 'blur' }]">
              <el-input :disabled="editModel === 'V'" type="text" v-model="contactForm.telephone"
                        maxlength="11" :placeholder="editModel === 'V' ? '' : $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="weixin"
                          :rules="[{ required: contactForm.qq === undefined || contactForm.qq === '', message: $t('regMsg.enterpriseInfoManage.weChat'), trigger: 'blur' },
                                  {validator:  weChatCheck, trigger: 'blur', obj: form}]">
              <el-input :disabled="editModel === 'V'" type="text" v-model="contactForm.weixin"
                        maxlength="50" :placeholder="editModel === 'V' ? '' : $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="[{ required: contactForm.weixin === undefined || contactForm.weixin === '', message: $t('regMsg.enterpriseInfoManage.QQ'), trigger: 'blur' },
                                  {validator: QQCheck, trigger: 'blur', obj: form}]">
              <el-input :disabled="editModel === 'V'" type="text" v-model="contactForm.qq" maxlength="20"
                        :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="dymForm"></el-input>
            </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.department')">
              <select-department :disabled="editModel === 'V'" v-model="contactForm.deptId"
                                 :placeholder="editModel === 'V' ? '' : $t('common.pleaseSelect')"
                                 :queryParas="{ keyId: contactForm.enterpriseId }" name="deptInfo" :reload="reloaddeptId"
                                 :allowCreate="true" @selectChanged="contactListSelectChanged"></select-department>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8">
            <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.position')">
              <el-input :disabled="editModel === 'V'" type="text" v-model="contactForm.position" maxlength="100"
                        :placeholder="editModel === 'V' ? '' : $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.responsibleMatter')">
<!--              <select-dictionary :disabled="editModel === 'V'" :placeholder="editModel === 'V' ? '' : $t('common.pleaseSelect')"-->
<!--                                 v-model="contactForm.factoringResponsibility" dictTypeCode="factor_responsibility"></select-dictionary>-->
              <select-dict-dis :disabled="editModel === 'V'" v-model="contactForm.factoringResponsibility"
                               :disabledOptions="disabledOptions" :reload="reload"
                               :dictTypeCode="'factor_responsibility'" name="forbiddenStatusDict"
                               :multiple="true" :placeholder="editModel === 'V' ? '' : $t('common.pleaseSelect')"
                               @selectChanged="forbiddenStatusChange(arguments)">
              </select-dict-dis>
            </el-form-item>
          </el-col>
        </el-row>
        <span class="title-text" v-if="editModel !== 'V'">{{$t('enterpriseInfoManage.supplierInfoManage.accountInfos')}}</span>
        <div class="contactEdit" v-if="editModel !== 'V'">
          <el-divider></el-divider>
        </div>
        <el-row :gutter="10" v-if="editModel !== 'V'">
          <el-col :xs="24" :sm="24" :md="24" :lg="8">
            <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.isGenerateAccount')" prop="cenerateType"
                          :rules="formRules.isGenerateAccount">
              <select-dictionary  :placeholder="$t('common.pleaseSelect')" v-model="contactForm.cenerateType" dictTypeCode="ZD0003" :store="$store"></select-dictionary>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8">
            <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.accountType')" prop="employeeAccountType"
                          :rules="[{ required: contactForm.cenerateType !== '0', message: $t('regMsg.enterpriseInfoManage.accountType'), trigger: 'change'}]">
              <select-dictionary :placeholder="(editModel === 'V' || contactForm.cenerateType === '0') ? '' : $t('common.pleaseSelect')" v-model="contactForm.employeeAccountType"
                                 dictTypeCode="create_account_type" name="employeeAccountType"
                                :store="$store" :disabled="editModel === 'V' || contactForm.cenerateType === '0'"></select-dictionary>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8">
            <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.relevanceAccount')" prop="mainAccountId"
                          :rules="[{ required: (contactForm.employeeAccountType === '2'), message: $t('regMsg.enterpriseInfoManage.relevanceAccount'), trigger: 'change'}]">
              <select-account :placeholder="(editModel === 'V' || contactForm.cenerateType === '0' || (contactForm.cenerateType === '1' && ((contactForm.employeeAccountType === '1') || (contactForm.employeeAccountType === '3')))) ? '' : $t('common.pleaseSelect')"
                              v-model="contactForm.mainAccountId"
                              :queryParas="mainAccountQueryParas(contactForm)"
                              :reload="relevanceAccountReload"
                              :disabled="(editModel === 'V' || contactForm.cenerateType === '0' || (contactForm.cenerateType === '1' && ((contactForm.employeeAccountType === '1') || (contactForm.employeeAccountType === '3'))))">
              </select-account>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="editModel !== 'V'">
          <el-col :xs="24" :sm="24" :md="24" :lg="8">
            <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.relevanceExistingAccount')" prop="exitAccountId">
              <select-account :placeholder="(editModel === 'V' || contactForm.cenerateType !== '0' || editModel === 'V') ? '' : $t('common.pleaseSelect')" v-model="contactForm.exitAccountId"
                              :disabled="editModel === 'V' || contactForm.cenerateType !== '0' || editModel === 'V'"
                              :reload="relevanceAccountReload"
                              :queryParas="ExistingAccountQueryParas(contactForm)">
              </select-account>
            </el-form-item>
          </el-col>
        </el-row>
    </dialog-edit>
  </div>
</template>

<script>
import { DialogEdit, dymForm, SelectDictionary, authButton, validate, regExp } from 'newepoch-components'
import BaseEdit from '@/pages/baseEditPage'
import supplierInfoManageApi from '@/api/enterpriseInfoManage/supplierInfoManageApi.js'
import GenerateAccountEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/generateAccountEdit.vue'
import SelectArea from '@/components/element/enterpriseInfoManage/SelectArea.vue'
import SelectDepartment from '@/components/element/enterpriseInfoManage/SelectDepartment.vue'
import SelectAccount from '@/components/element/enterpriseInfoManage/SelectAccount.vue'
import enterpriseName from '@/components/element/enterpriseInfoManage/enterpriseName.vue'
import selectDictDis from '@/components/element/enterpriseInfoManage/selectDictDis.vue'
// import { regExp } from '@/validator/index'
// import coreEnterpriseInfoManageApi from '@/api/enterpriseInfoManage/coreEnterpriseInfoManageApi'
export default {
  extends: new BaseEdit(),
  name: 'editContactEdit',
  components: {
    DialogEdit,
    dymForm,
    SelectDictionary,
    SelectArea,
    SelectAccount,
    SelectDepartment,
    GenerateAccountEdit,
    authButton,
    enterpriseName,
    selectDictDis
  },
  data () {
    return {
      reload: false,
      showFlag: false,
      autoSave: false,
      showModel: '',
      accountForm: {},
      accountItem: [],
      // 联系人类型
      employeeTypeList: [],
      // 区域重新加载
      areaReload: false,
      // 重新加载部门
      reloaddeptId: false,
      // 关联账号重新加载
      relevanceAccountReload: false,
      contactForm: {},
      contactTypeexclueds: [],
      contactTypereload: false,
      // 企业标签
      enterpriseTagDTOList: [],
      formRules: {
        // 企业名称
        enterpriseName: [{
          required: true,
          message: this.regMsg.enterpriseInfoManage.enterpriseName,
          trigger: 'change'
        }, { validator: validate.enterpriseNameValidate, trigger: 'blur' }],
        // 统一社会信用代码
        creditCode: [{
          required: true,
          message: this.regMsg.enterpriseInfoManage.creditCode,
          trigger: 'blur'
        }, { validator: validate.creditCodeValidate, trigger: 'blur' }],
        // 企业标签
        enterpriseTag: [{
          required: true,
          message: this.regMsg.enterpriseInfoManage.selectEnterpriseTag,
          trigger: 'blur'
        }],
        // 核心企业简称
        shortName: [{
          required: true,
          message: this.regMsg.enterpriseInfoManage.coreEnterpriseShortName,
          trigger: 'blur'
        }],
        // 核心企业简码
        enterpriseCode: [{
          required: true,
          message: this.regMsg.enterpriseInfoManage.coreEnterpriseCode,
          trigger: 'blur'
        }, { validator: validate.enterpriseCodeValidate, trigger: 'blur' }],
        // 联系人
        employeeName: [{
          required: true,
          message: this.regMsg.enterpriseInfoManage.contact
        }, {
          validator: validate.nameValidate,
          trigger: 'blur'
        }],
        // 联系人类型
        employeeType: [{
          required: true,
          message: this.regMsg.enterpriseInfoManage.contactType,
          trigger: 'blur'
        }],
        // 性别
        sex: [{ required: true, message: this.regMsg.enterpriseInfoManage.sex, trigger: 'change' }],
        // 手机号码
        mobilePhone: [{
          required: true,
          message: this.regMsg.enterpriseInfoManage.mobilePhone
        }, {
          validator: validate.mobilePhoneValidate,
          trigger: 'blur'
        }],
        // 是否生成账号
        isGenerateAccount: [{
          required: true,
          message: this.regMsg.enterpriseInfoManage.isGenerateAccount,
          trigger: 'change'
        }]
      }
    }
  },
  computed: {
    disabledOptions: function () {
      if (this.contactForm.factoringResponsibility && this.contactForm.factoringResponsibility.some(it => it === '1')) {
        return [{ dictId: '1' }]
      } else {
        return []
      }
    },
    // 关联主账号条件
    mainAccountQueryParas () {
      return (item) => {
        return { enterpriseId: item.enterpriseId, employeeAccountType: '1', enterpriseType: this.contactForm.employeeType }
      }
      // return {}
    },
    // 关联已有账号条件
    ExistingAccountQueryParas () {
      return (item) => {
        return { enterpriseId: item.enterpriseId }
      }
    },
    api () {
      return supplierInfoManageApi.enterpriseEmployeeInfo
    }
  },
  methods: {
    forbiddenStatusChange (a) {
      if (a[0]) {
        if (a[0].some(it => it === '1')) {
          this.contactForm.factoringResponsibility = ['1']
        }
        this.$nextTick(() => {
          this.reload = !this.reload
        })
      }
    },
    contactListSelectChanged (val, name, data, obj) {
      if (name === 'deptInfo') {
        if (data) {
          this.$set(this.contactForm, 'deptName', data.deptName)
          this.$set(this.contactForm, 'deptId1', data.keyId)
        } else if (val && !data) {
          this.$set(this.contactForm, 'deptId1', '')
          this.$set(this.contactForm, 'deptName', val)
        }
      }
    },
    // 手机号码校验
    mobilePhoneCheck: function (rule, value, callback) {
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.mobilePhone.test(value)) {
          callback()
        } else {
          callback(new Error(this.regMsg.enterpriseInfoManage.phone))
        }
      } else {
        callback()
      }
    },
    // 微信校验
    weChatCheck: function (rule, value, callback) {
      // let obj = rule.obj
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.weChat.test(value)) {
          callback()
        } else {
          callback(new Error(this.regMsg.enterpriseInfoManage.weixin))
        }
      } else {
        callback()
      }
    },
    // QQ校验
    QQCheck: function (rule, value, callback) {
      // let obj = rule.obj
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.QQ.test(value)) {
          callback()
        } else {
          callback(new Error(this.regMsg.enterpriseInfoManage.qq))
        }
      } else {
        callback()
      }
    },
    // 联系人校验
    contactCheck: function (rule, value, callback) {
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.name.test(value)) {
          callback()
        } else {
          callback(new Error(this.regMsg.enterpriseInfoManage.name))
        }
      } else {
        callback(new Error(this.regMsg.enterpriseInfoManage.contact))
      }
    },
    enterpriseCodeCheck: function (rule, value, callback) {
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.letter.test(value)) {
          callback()
        } else {
          callback(new Error(this.regMsg.enterpriseInfoManage.coreEnterpriseCodeCheck))
        }
      } else {
        callback(new Error(this.regMsg.enterpriseInfoManage.coreEnterpriseCode))
      }
    },
    // 生成账号
    saved () {
      let $this = this
      this.contactForm.enterpriseDepartment = this.contactForm.deptName
      this.contactForm.enterpriseDeptId = this.contactForm.deptId1
      this.contactForm.employeeId = this.contactForm.keyId
      this.contactForm.attributeDTOList = []
      console.log(this.contactForm)
      if (this.contactForm.factoringResponsibility && this.contactForm.factoringResponsibility.length > 0) {
        this.contactForm.factoringResponsibility.forEach(s => {
          let attribute = {}
          attribute.attributeType = '3'
          attribute.attributeValue = s
          this.contactForm.attributeDTOList.push(attribute)
        })
      }
      delete this.contactForm.factoringResponsibility
      $this.api.update(this.contactForm).then(res => {
        if (res.data) {
          $this.success(this.$i18n.messages[this.$i18n.locale].common.saveSuccess)
          this.$emit('createSuccess', this.contactForm)
          this.dialogVisible = false
        } else {
          $this.error(this.$i18n.messages[this.$i18n.locale].common.saveError)
        }
      })
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.contactForm = this.form
        this.$nextTick(() => {
          this.reload = !this.reload
        })
      }
    },
    'contactForm.cenerateType' (val) {
      if (val) {
        if (val === '1') {
          this.$set(this.contactForm, 'exitAccountId', '')
        }
        if (val === '0') {
          this.$set(this.contactForm, 'employeeAccountType', '')
          this.$set(this.contactForm, 'mainAccountId', '')
        }
      }
    },
    'contactForm.employeeAccountType' (val) {
      if (val) {
        if (val === '1' || val === '3') {
          this.$set(this.contactForm, 'mainAccountId', '')
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import '~@/styles/enterpriseInfoManage/supplierInfoManage/contactMaintainEdit.scss';
</style>
