<template>
  <!--金融部大区域维护-新增/编辑-->
  <div>
    <dialog-edit :visible.sync="dialogVisible" :editModel="editModel" :form="form"
                 :appendToBody="appendToBody" :width="width" :autoSave="autoSave"
                 :title="editModel === 'C' ? $t('cyjg.financialRegionInfo.bigAreaMaintainCreate') : $t('cyjg.financialRegionInfo.bigAreaMaintainEdit')"
                 :formRules="formRules" labelWidth="80px"
                 :api="api" @onSaved="onSaved">
      <dym-form :componentList="componentList" :formValue="form" @selectChanged="selectChanged">
      </dym-form>
    </dialog-edit>
  </div>
</template>

<script>
// 大区域维护 编辑/新增(金融部)
import { DialogEdit, dymForm, SelectCoreEnterprise } from 'newepoch-components'
import financialRegionInfoApi from '@/api/cyjg/financialRegionInfoApi.js'
import ExcludeSpecialInput from '@/components/element/cyjg/ExcludeSpecialInput.vue'
import BaseEdit from '@/pages/baseEditPage.js'
export default {
  extends: new BaseEdit(),
  name: 'bigAreaMaintainUpdateEdit',
  components: {
    DialogEdit,
    dymForm,
    SelectCoreEnterprise,
    ExcludeSpecialInput
  },
  data () {
    return {
      width: '550px',
      appendToBody: true,
      autoSave: false,
      componentList: [
        // 核心企业
        {
          value: 'coreCompanyId',
          disabled: false,
          componentName: SelectCoreEnterprise,
          name: 'coreEnterprise',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.coreEnterprise,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [24, 24, 24, 24],
          prop: 'coreCompanyId'
        },
        // 大区域
        {
          value: 'areaName',
          disabled: false,
          componentName: ExcludeSpecialInput,
          maxlength: 100,
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.bigArea,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 24],
          prop: 'areaName'
        }
      ],
      formRules: {
        coreCompanyId: [{
          required: true,
          message: this.$i18n.messages[this.$i18n.locale].regMsg.financialRegionInfo.coreEnterprise,
          trigger: 'change'
        }],
        areaName: [{
          required: true,
          message: this.$i18n.messages[this.$i18n.locale].regMsg.financialRegionInfo.bigArea,
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    api () {
      return financialRegionInfoApi.financialBigArea
    }
  },
  methods: {
    selectChanged (val) {
      if (!this.UtilJs.isEmpty(val.coreEnterpriseInfo)) {
        this.form.coreCompanyName = val.coreEnterpriseInfo.enterpriseName
      }
    },
    onSaved () {
      let $this = this
      if (this.editModel === 'C') {
        this.api.create($this.form).then(res => {
          if (res && res.success && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.addBigAreaSuccess)
          } else {
            $this.error(this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.addBigAreaFailed)
          }
          $this.$emit('saveSuccess')
          $this.dialogVisible = false
        })
      } else if (this.editModel === 'E') {
        this.api.update($this.form.keyId, $this.form).then(res => {
          if (res && res.success && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.updateBigAreaSuccess)
          } else {
            $this.error(this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.updateBigAreaFailed)
          }
          $this.$emit('saveSuccess')
          $this.dialogVisible = false
        })
      }
    }
  },
  watch: {
    visible (val) {
      let $this = this
      if (val) {
        if ($this.editModel === 'E') {
          $this.form.areaKid = $this.form.largeAreaId
          $this.$set($this.componentList[0], 'disabled', true)
        } else {
          $this.componentList.forEach(it => {
            $this.$set(it, 'disabled', false)
          })
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
