<template>
  <div class="projectCompanyInfo">
    <el-form :model="supplierForm" ref="supplierForm" :rules="formRules">
      <el-row :gutter="10">
        <!-- 法人代表 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="8">
          <el-form-item :label="$t('certificateAudit.legalRepresentative')" label-width="110px" prop="legalPersonName">
            <el-input v-model.trim="supplierForm.legalPersonName" :placeholder="$t('common.input')"></el-input>
          </el-form-item>
        </el-col>
        <!-- 成立日期 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="8">
          <el-form-item :label="$t('certificateAudit.setDate')" label-width="110px" prop="estiblishTime">
            <el-date-picker v-model="supplierForm.estiblishTime" :pickerOptions="pickerOptions" type="date"
                            :placeholder="$t('common.point')" value-format="timestamp"></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 营业期限 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="8" class="businessDate">
          <el-form-item :label="$t('certificateAudit.businessDate')" label-width="110px">
            <date-range-picker v-model="supplierForm.businessDate" v-bind="attrs1" middleText="至"></date-range-picker>
          </el-form-item>
          <span class="span-left">{{$t('taskManage.todoTask.dateMsg')}}</span>
        </el-col>
      </el-row>
      <dym-form :componentList="componentList" :formValue="supplierForm"></dym-form>
    </el-form>
  </div>
</template>
<script>
import BasePage from '@/pages/basePage.js'
import { authButton, dymForm, dateRangePicker, regExp } from 'newepoch-components'
import projCommonFileApi from '@/api/dataAudit/projCommonFileApi.js'
import formateDateStr from '@/utils/date'
import cn from '@/i18n/langs/cn.js'

const { common, certificateAudit } = cn
export default {
  extends: new BasePage(),
  components: {
    authButton,
    dymForm,
    dateRangePicker
  },
  props: {},
  data () {
    return {
      supplierForm: {
        threeCertificates: '0'
      },
      attrs1: {},
      componentList: [
        // 核准日期
        {
          label: certificateAudit.approvedDate,
          value: 'approvedTime',
          componentName: 'el-date-picker',
          valueFormat: 'timestamp',
          cols: [24, 24, 24, 8],
          labelWidth: '110px',
          prop: 'approvedTime',
          placeholder: common.point
        },
        // 是否三证合一
        {
          label: certificateAudit.threeCertificates,
          value: 'threeCertificates',
          clearable: false,
          componentName: 'SelectDictionary',
          dictTypeCode: 'ZDZD0024',
          cols: [24, 24, 24, 8],
          labelWidth: '110px',
          prop: 'threeCertificates'
        },
        // 三证合一编号
        {
          label: certificateAudit.threeCertificatesNumber,
          disabled: false,
          value: 'combCertificates',
          componentName: 'el-input',
          showFlag: true,
          cols: [24, 24, 24, 8],
          labelWidth: '110px',
          prop: 'combCertificates',
          placeholder: common.input
        },
        // 营业执照号码
        {
          label: certificateAudit.businessLicenseNumber,
          disabled: false,
          value: 'creditCode',
          componentName: 'el-input',
          showFlag: true,
          cols: [24, 24, 24, 8],
          labelWidth: '110px',
          prop: 'creditCode',
          placeholder: common.input
        },
        // 组织机构号码
        {
          label: certificateAudit.organizationNumber,
          disabled: false,
          value: 'orgNumber',
          componentName: 'el-input',
          showFlag: true,
          cols: [24, 24, 24, 8],
          labelWidth: '110px',
          prop: 'orgNumber',
          placeholder: common.input
        },
        // 所属核心企业
        {
          label: certificateAudit.coreCompanyName,
          disabled: true,
          value: 'coreCompanyName',
          componentName: 'el-input',
          cols: [24, 24, 24, 8],
          labelWidth: '110px',
          prop: 'coreCompanyName'
        },
        // 所属区域
        {
          label: certificateAudit.smallAreaName,
          disabled: true,
          value: 'smallAreaName',
          componentName: 'el-input',
          cols: [24, 24, 24, 8],
          labelWidth: '110px',
          prop: 'smallAreaName'
        },
        // 区域专员
        {
          label: certificateAudit.businessCommissioners,
          disabled: true,
          value: 'businessCommissioners',
          componentName: 'el-input',
          cols: [24, 24, 24, 8],
          labelWidth: '110px',
          prop: 'businessCommissioners'
        }
      ],
      formRules: {
        threeCertificates: [{ required: true, message: common.point + certificateAudit.threeCertificates, trigger: 'change' }],
        combCertificates: [{ required: false, validator: this.combCertificatesCheck, trigger: 'blur' }],
        creditCode: [{ required: false, validator: this.creditCodeCheck, trigger: 'blur' }],
        orgNumber: [{ required: false, message: common.input + certificateAudit.organizationNumber, trigger: 'blur' }]
      },
      pickerOptions: {
        disabledDate: (val) => {
          return !(val.valueOf() <= new Date().valueOf())
        }
      }
    }
  },
  computed: {
    api () {
      return projCommonFileApi.projComFile
    }
  },
  methods: {
    loadData (params) {
      let _this = this
      _this.api.getCompanyInfo(params).then(res => {
        if (res && res.data) {
          _this.supplierForm = Object.assign({ threeCertificates: '0' }, res.data)
          _this.$set(_this.supplierForm, 'threeCertificates', res.data.threeCertificates + '')
          _this.$set(_this.supplierForm, 'estiblishTime', _this.formatTime(res.data.estiblishTime))
          _this.$set(_this.supplierForm, 'approvedTime', _this.formatTime(res.data.approvedTime))
          _this.$set(_this.supplierForm, 'businessDate', [_this.formatTime(res.data.fromTime), _this.formatTime(res.data.toTime)])
        }
      })
    },
    formatTime (value) {
      if (!this.UtilJs.isNull(value)) {
        if (!this.UtilJs.isNull(this.formatDateTS(value))) {
          return this.formatDateTS(value).indexOf('1900-01-01') !== -1 ? null : value
        } else {
          return null
        }
      } else {
        return null
      }
    },
    formatDateTS (value, format) {
      if (value === -2209017600000 || value === '1900-01-01') {
        return null
      } else {
        let formatStr = format || 'yyyy-MM-dd'
        return formateDateStr(new Date(value), formatStr)
      }
    },
    combCertificatesCheck (rule, value, callback) {
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.creditCode.test(value)) {
          callback()
        } else {
          callback(new Error('请输入18位大写英文或数字'))
        }
      } else {
        callback(new Error(common.input + certificateAudit.threeCertificatesNumber))
      }
    },
    creditCodeCheck (rule, value, callback) {
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.businessLicenseNum.test(value)) {
          callback()
        } else {
          callback(new Error('请输入18位大写英文或数字'))
        }
      } else {
        callback(new Error(common.input + certificateAudit.businessLicenseNumber))
      }
    },
    validateForm () {
      if (this.supplierForm.threeCertificates === '0') {
        let props1 = ['creditCode', 'orgNumber']
        let count1 = 0
        this.$refs.supplierForm.validateField(props1, (valid) => {
          if (!this.UtilJs.isEmpty(valid)) {
            count1++
          }
        })
        if (count1 === 0) {
          return true
        } else {
          return false
        }
      } else {
        let count2 = 0
        this.$refs.supplierForm.validateField('combCertificates', (valid) => {
          if (!this.UtilJs.isEmpty(valid)) {
            count2++
          }
        })
        if (count2 === 0) {
          return true
        } else {
          return false
        }
      }
    }
  },
  watch: {
    'supplierForm.threeCertificates': {
      handler (val) {
        let _this = this
        if (val === '0') {
          _this.$set(_this.componentList[2], 'showFlag', false)
          _this.$set(_this.componentList[3], 'showFlag', true)
          _this.$set(_this.componentList[4], 'showFlag', true)
          _this.$set(_this.formRules.combCertificates[0], 'required', false)
          _this.$set(_this.formRules.creditCode[0], 'required', true)
          _this.$set(_this.formRules.orgNumber[0], 'required', true)
          _this.$set(_this.supplierForm, 'combCertificates', '')
          _this.$nextTick(() => {
            _this.$refs.supplierForm.clearValidate()
          })
        } else if (val === '1') {
          _this.$set(_this.componentList[2], 'showFlag', true)
          _this.$set(_this.componentList[3], 'showFlag', false)
          _this.$set(_this.componentList[4], 'showFlag', false)
          _this.$set(_this.formRules.combCertificates[0], 'required', true)
          _this.$set(_this.formRules.creditCode[0], 'required', false)
          _this.$set(_this.formRules.orgNumber[0], 'required', false)
          _this.$refs.supplierForm.clearValidate()
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped src="@/styles/dataAudit/certificateAudit/projectThreeCertificatesEdit.scss">
</style>
