<template>
  <div>
    <el-row :gutter="10">
      <!-- 联系人角色(下拉组件)(第一联系人无表单验证) -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.contactRole')" :prop="proplabel + '.contactLevel'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false } : { required: true, message: $t('regMsg.enterpriseInfoManage.contactRole'), trigger: 'blur' }">
          <select-dictionary v-model="item.contactLevel" :disabled="item.forbiddenStatus"  :dictTypeCode="'ZD00690'" :placeholder="editModel === 'V' ? '' : $t('common.pleaseSelect')" class="item-width">
          </select-dictionary>
        </el-form-item>
      </el-col>
      <!-- 联系人(表单验证prop) -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.contact')" :prop="proplabel + '.employeeName'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false } : formRules.contact">
          <el-input v-model="item.employeeName" :disabled="item.forbiddenStatus"  :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width dymForm" :clearable="true"></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="proplabel + '.gender'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false }: formRules.sex">
          <select-dictionary v-model="item.gender" :disabled="item.forbiddenStatus"  :dictTypeCode="'ZD0031'" :placeholder="editModel === 'V' ? '' : $t('common.pleaseSelect')" class="item-width">
          </select-dictionary>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <!-- 手机号码(表单验证prop) -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.mobilePhone')" :prop="proplabel + '.telephone'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false } : [{ required: true, message: $t('regMsg.enterpriseInfoManage.mobilePhone'), trigger: 'blur' },
                                  { validator: mobilePhoneValidate, trigger: 'blur' }]">
          <el-input :disabled="item.forbiddenStatus"  v-model="item.telephone" maxlength="11" :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width dymForm" :clearable="true"></el-input>
        </el-form-item>
      </el-col>
      <!-- 微信号(表单验证prop) -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.weChat')" :prop="proplabel + '.weixin'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false } : [{ required: item.qq === undefined || item.qq === '', message: $t('regMsg.enterpriseInfoManage.weChat'), trigger: 'blur' },
                                  {validator: weChatValidate, trigger: 'blur', obj: item}]">
          <el-input :disabled="item.forbiddenStatus" v-model="item.weixin" maxlength="50" :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width dymForm" :clearable="true"></el-input>
        </el-form-item>
      </el-col>
      <!-- QQ号(表单验证prop) -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.QQ')" :prop="proplabel + '.qq'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false } : [{ required: item.weixin === undefined || item.weixin === '', message: $t('regMsg.enterpriseInfoManage.QQ'), trigger: 'blur' },
                                  {validator: QQValidate, trigger: 'blur', obj: item}]">
          <el-input :disabled="item.forbiddenStatus"  v-model="item.qq" maxlength="20" :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width dymForm" :clearable="true"></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.telephone')" :prop="proplabel + '.telephone2'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false } : formRules.telephone2">
          <el-input :disabled="item.forbiddenStatus"  v-model="item.telephone2" maxlength="12" :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width dymForm" :clearable="true"></el-input>
        </el-form-item>
      </el-col>
      <!-- 邮箱地址 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.email')" :prop="proplabel + '.email'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false } : formRules.email">
          <el-input :disabled="item.forbiddenStatus" v-model="item.email" maxlength="100" :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width dymForm" :clearable="true"></el-input>
        </el-form-item>
      </el-col>
      <!-- 做事风格(表单验证prop) -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.workStyle')" :prop="proplabel + '.characterStyle'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false } : { required: index === 0, message: $t('regMsg.enterpriseInfoManage.workStyle'), trigger: 'blur' }">
          <el-input :disabled="item.forbiddenStatus" v-model="item.characterStyle" maxlength="100" :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width dymForm" :clearable="true"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <!-- 部门(表单验证prop) -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.department')" :prop="proplabel + '.enterpriseDepartment'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false } : { required: index === 0, message: $t('regMsg.enterpriseInfoManage.department'), trigger: 'blur' }">
          <select-department :disabled="item.forbiddenStatus" v-model="item.enterpriseDepartment" :queryParas="{ keyId: enterpriseId }"
                             :allowCreate="true" :placeholder="editModel === 'V' ? '' : $t('common.pleaseSelect')" name="deptInfo" :parasObj="{ index: index }"
                             @selectChanged="contactListSelectChanged"></select-department>
        </el-form-item>
      </el-col>
      <!-- 职务(表单验证prop) -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.duty')" :prop="proplabel + '.position'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false } : { required: index === 0, message: $t('regMsg.enterpriseInfoManage.duty'), trigger: 'blur' }">
          <el-input :disabled="item.forbiddenStatus" v-model="item.position" maxlength="100" :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width"></el-input>
        </el-form-item>
      </el-col>
      <!-- 性格(表单验证prop) -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.character')" :prop="proplabel + '.character'"
                      :label-width="labelWidth"
                      :rules="item.forbiddenStatus ? { required: false } : [{ required: index === 0, message: $t('regMsg.enterpriseInfoManage.character'), trigger: 'blur' },
                                    {validator: forbiddenStatusCheck, trigger: 'blur'}]">
          <el-input :disabled="item.forbiddenStatus" v-model="item.character" maxlength="50" :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width 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.birth')"
                      :label-width="labelWidth">
          <div class="birth-class">
            <div style="flex: 0">
              <el-radio-group :disabled="item.forbiddenStatus"  v-model="item.calendarType" @change="calendarTypeEvent(item.calendarType, index)">
                <el-radio class="elRadioDiv" :label="0">{{$t('enterpriseInfoManage.supplierInfoManage.solarCalendar')}}</el-radio>
                <el-radio class="elRadioDiv" :label="1">{{$t('enterpriseInfoManage.supplierInfoManage.lunarCalendar')}}</el-radio>
              </el-radio-group>
            </div>
            <div style="flex: 1">
              <el-tooltip v-if="item.birthday" class="item" effect="dark" :content="item.birthday" placement="top">
                <j-date-picker v-model="item.birthday" ref="calendar"
                               :width="width1"
                               :placeholder="editModel === 'V' ? '' : $t('common.pleaseSelect')"
                               :picker-options="pickerOptions"
                               :rangeSeparator="rangeSeparator"
                               :disabled="item.forbiddenStatus"
                               :showLunarClass="showLunarClass"
                               :showLunarControl="showLunarControl"
                               :type="type"
                               @change="jDatePickerchange"
                               :isLunar1="item.calendarType === 1"
                               @dateEvent="dateEvent"
                               :class="{'day-number': true, 'margin-left': true, 'wedgetWidth': true}"
                               :showBackYears="showBackYears"
                               :index="index"
                               :showLunarIcon="showLunarIcon"
                               :format="format"></j-date-picker>
              </el-tooltip>
              <j-date-picker v-else v-model="item.birthday" ref="calendar"
                             :width="width1"
                             :placeholder="editModel === 'V' ? '' : $t('common.pleaseSelect')"
                             :picker-options="pickerOptions"
                             :rangeSeparator="rangeSeparator"
                             :disabled="item.forbiddenStatus"
                             :showLunarClass="showLunarClass"
                             :showLunarControl="showLunarControl"
                             :type="type"
                             @change="jDatePickerchange"
                             :isLunar1="item.calendarType === 1"
                             @dateEvent="dateEvent"
                             :class="{'day-number': true, 'margin-left': true, 'wedgetWidth': true}"
                             :showBackYears="showBackYears"
                             :index="index"
                             :showLunarIcon="showLunarIcon"
                             :format="format"></j-date-picker>
              <!--<el-date-picker type="date" v-model="form.birthday" :placeholder="$t('common.pleaseSelect')" class="date-class"></el-date-picker>-->
            </div>
          </div>
        </el-form-item>
      </el-col>
      <!-- 年龄 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.age')"
                      :label-width="labelWidth">
          <el-input v-model="item.age" maxlength="11" :disabled="true" :placeholder="''" class="item-width 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.constellation')"
                      :label-width="labelWidth">
          <select-dictionary :disabled="item.forbiddenStatus"  v-model="item.constellation" :dictTypeCode="'ZDC0108'"
                             :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width"></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.native')"
                      :label-width="labelWidth">
          <el-input :disabled="item.forbiddenStatus" v-model="item.nativePlace" maxlength="20" :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width 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.marital')"
                      :label-width="labelWidth">
          <select-dictionary :disabled="item.forbiddenStatus" v-model="item.maritalStatus" :dictTypeCode="'ZD0003'"
                             :placeholder="editModel === 'V' ? '' : $t('common.pleaseSelect')" class="item-width">
          </select-dictionary>
        </el-form-item>
      </el-col>
      <!-- 爱好 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.hobby')" :prop="proplabel + '.hobby'"
                      :rules="item.forbiddenStatus ? { required: false } : formRules.hobby"
                      :label-width="labelWidth">
          <el-input :disabled="item.forbiddenStatus" v-model="item.hobby" maxlength="100" :placeholder="editModel === 'V' ? '' : $t('common.pleaseInput')" class="item-width 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.associateExistingAccount')"
                      :label-width="labelWidth">
          <!--<el-input v-model="item.hobby" :placeholder="$t('common.pleaseInput')" class="item-width"></el-input>-->
          <select-existing-accounts :disabled="item.forbiddenStatus" v-model="item.associateExistingAccount" :placeholder="editModel === 'V' ? '' : $t('common.pleaseSelect')"
                                    class="item-width" :queryParas="{ enterpriseId: enterpriseId }"></select-existing-accounts>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { SelectDictionary, validate, regExp, JDatePicker } from 'newepoch-components'
import SelectDepartment from '@/components/element/enterpriseInfoManage/SelectDepartmentModify.vue'
import SelectExistingAccounts from '@/components/element/enterpriseInfoManage/SelectExistingAccountsModify.vue'
import * as format from '@/filters/index.js'
export default {
  name: 'contactBasicInfo',
  inject: {
    formClearFiled: {
      default: {}
    }
  },
  components: {
    SelectDictionary,
    SelectDepartment,
    JDatePicker,
    SelectExistingAccounts
  },
  props: {
    enterpriseId: {
      type: [Number, String],
      required: true
    },
    index: {
      type: [Number, String],
      required: true
    },
    editModel: {
      type: [Number, String],
      required: true
    },
    item: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    },
    formRules: {
      type: [Array, Object],
      default: () => {
        return {}
      }
    },
    proplabel: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      labelWidth: '150px', // formitem文字宽度
      // 农历组件
      type: 'DATE',
      showLunarIcon: false,
      showLunarControl: false,
      showLunarClass: 'MIX',
      format: 'YYYY-MM-DD',
      width1: '98%',
      showBackYears: 2,
      rangeSeparator: '-',
      pickerOptions: {
        disabledDate (time) {
          // return time.getTime() < Date.now() - 8.64e7;
        }
      },
      mobilePhoneValidate: validate.mobilePhoneValidate,
      weChatValidate: (a, b, c) => {
        validate.weChatValidate(a, b, c)
        this.clearValidateField('qq', a)
      },
      QQValidate: (a, b, c) => {
        validate.QQValidate(a, b, c)
        this.clearValidateField('weixin', a)
      }
    }
  },
  methods: {
    // 清空qq微信
    clearValidateField (checkType, rule) {
      var field = rule.field
      field = field.split('.')
      field[2] = checkType
      field = field.join('.')
      if (this.formClearFiled.$refs.dialog && this.formClearFiled.$refs.dialog.$refs.editForm) {
        this.formClearFiled.$refs.dialog.$refs.editForm.clearValidate(field)
      }
    },
    jDatePickerchange (data) {
      if (!data || data.length === 0) {
        this.$set(this.item, 'birthday', '')
        this.$set(this.item, 'age', '')
        this.$set(this.item, 'constellation', '')
        this.$set(this.item, 'newDate', '')
      }
    },
    // 性格验证
    forbiddenStatusCheck (rule, value, callback) {
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.legalPerson.test(value)) {
          callback()
        } else {
          callback(new Error('请输入中英文'))
        }
      } else {
        callback()
      }
    },
    // 部门改变
    contactListSelectChanged (val, name, data, obj) {
      if (name === 'deptInfo') {
        if (data) {
          // this.$set(this.formValue.contactArray[obj.index], 'deptName', data.deptName)
          this.$set(this.item, 'deptId', data.keyId)
        } else if (val && !data) {
          this.$set(this.item, 'deptId', '')
          this.$set(this.item, 'deptName', val)
        }
      }
    },
    // 阳历星座返回
    dateEvent (date, constellation, index) {
      let $this = this
      // this.contactForm.contactList[index].constellation = constellation
      let borthday = date.substring(0, 4)
      let nowDate = new Date()
      let newYear = nowDate.getFullYear()
      let age = newYear - parseInt(borthday)
      // let barthday1 = format.getTimestamp(date)
      // $this.contactForm.contactList[index].newDate = format.getTimestamp(date)
      let num = format.constellationToNumber(constellation)
      if (num) {
        $this.$set(this.item, 'constellation', num.toString())
      } else {
        $this.$set(this.item, 'constellation', '12')
      }
      $this.$set(this.item, 'age', age)
      $this.$set(this.item, 'newDate', date)
    },
    // 单选框事件
    calendarTypeEvent (calendarType, index) {
      this.$set(this.item, 'birthday', '')
      this.$set(this.item, 'age', '')
      this.$set(this.item, 'constellation', '')
      this.$set(this.item, 'newDate', '')
    }
  }
}
</script>

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