<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :editModel="editModel" :form="form" :appendToBody="appendToBody" :width="width"
          :api="api" :autoSave="autoSave" @onSaved="onSaved"
          :title="editModel === 'C' ? $t('cyjg.financialRegionInfo.bigAreaMaintainCreate') : $t('cyjg.financialRegionInfo.bigAreaMaintainEdit')"
          :formRules="formRules" labelWidth="100px">
      <dym-form :componentList="componentList" :formValue="form" @selectChanged="selectChanged">
      </dym-form>
    </dialog-edit>
  </div>
</template>

<script>
// 大区域维护 编辑/新增(业务部)
import BaseEdit from '@/pages/baseEditPage.js'
import businessRegionInfoApi from '@/api/cyjg/businessRegionInfoApi.js'
import { DialogEdit, dymForm } from 'newepoch-components'
import SelectCoreEnterprise from '@/components/element/cyjg/SelectAllCoreEnterprise.vue'
export default {
  extends: new BaseEdit(),
  name: 'bigAreaMaintain',
  components: {
    DialogEdit,
    dymForm,
    SelectCoreEnterprise
  },
  data () {
    return {
      autoSave: false,
      appendToBody: true,
      width: '550px',
      componentList: [
        // 核心企业
        {
          value: 'coreCompanyId',
          disabled: false,
          componentName: SelectCoreEnterprise,
          name: 'coreEnterprise',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.coreEnterprise,
          width: '50%',
          cols: [24, 24, 24, 24],
          prop: 'coreCompanyId'
        },
        // 大区域
        {
          value: 'areaName',
          disabled: false,
          componentName: 'el-input',
          maxlength: 50,
          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.regMsg.businessRegionInfo.coreEnterprise,
          trigger: 'change'
        }],
        areaName: [{
          required: true,
          message: this.regMsg.businessRegionInfo.bigArea,
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    api () {
      return businessRegionInfoApi.largePage
    }
  },
  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.regMsg.businessRegionInfo.addBigAreaSuccess)
          } else {
            $this.error(this.regMsg.businessRegionInfo.addBigAreaFailed)
          }
          $this.$emit('saveSuccess')
          $this.dialogVisible = false
        })
      } else if (this.editModel === 'E') {
        this.api.update($this.form.areaKid, $this.form).then(res => {
          if (res && res.success && res.data) {
            $this.success(this.regMsg.businessRegionInfo.updateBigAreaSuccess)
          } else {
            $this.error(this.regMsg.businessRegionInfo.updateBigAreaFailed)
          }
          $this.$emit('saveSuccess')
          $this.dialogVisible = false
        })
      }
    }
  },
  watch: {
    visible (val) {
      let $this = this
      if (val) {
        if ($this.editModel === 'E') {
          $this.form.areaKid = $this.form.keyId
          $this.form.largeAreaId = $this.form.keyId
          $this.$set($this.componentList[0], 'disabled', true)
        } else {
          $this.componentList.forEach(it => {
            $this.$set(it, 'disabled', false)
          })
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
