<!-- 区域信息维护(金融部) 小区域维护 -->
<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :editModel="editModel" :form="saveForm" :width="width" :formRules="formRules" :api="api"
                 :title="$t('cyjg.financialRegionInfo.smallAreaMaintain')" :autoSave="autoSave" labelWidth="80px" @onSave="onSave">
      <dym-form :componentList="componentList" :formValue="saveForm" @selectChanged="selectChanged">
      </dym-form>
    </dialog-edit>
  </div>
</template>

<script>
// 小区域维护(金融部)
import BaseEdit from '@/pages/baseEditPage.js'
import financialRegionInfoApi from '@/api/cyjg/financialRegionInfoApi.js'
import { dymForm, DialogEdit, SelectCoreEnterprise } from 'newepoch-components'
import SelectBigArea from '@/components/element/cyjg/SelectBigArea.vue'
import ExcludeSpecialInput from '@/components/element/cyjg/ExcludeSpecialInput.vue'
export default {
  extends: new BaseEdit(),
  name: 'smallAreaMaintainEdit',
  components: {
    DialogEdit,
    dymForm,
    SelectCoreEnterprise,
    SelectBigArea,
    ExcludeSpecialInput
  },
  props: {},
  data () {
    return {
      width: '550px',
      saveForm: {
        largeAreaType: '1'
      },
      autoSave: true,
      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: 'areaParent',
          disabled: false,
          queryName: ['coreCompanyId', 'areaType'],
          queryValue: ['coreCompanyId', 'largeAreaType'],
          componentName: SelectBigArea,
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.bigArea,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [24, 24, 24, 24],
          prop: 'areaParent'
        },
        // 小区域
        {
          value: 'areaName',
          disabled: false,
          componentName: ExcludeSpecialInput,
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.smallArea,
          width: '50%',
          maxlength: 100,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 24],
          prop: 'areaName'
        }
      ],
      formRules: {
        // 核心企业验证
        coreCompanyId: [{
          required: true,
          message: this.regMsg.financialRegionInfo.coreEnterprise,
          trigger: 'change'
        }],
        // 小区域验证
        areaName: [{
          required: true,
          message: this.regMsg.financialRegionInfo.smallArea,
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    api () {
      return financialRegionInfoApi.financialSmallArea
    }
  },
  methods: {
    selectChanged (obj) {
      let $this = this
      if (!$this.UtilJs.isEmpty(obj.coreEnterpriseInfo)) {
        $this.saveForm.coreCompanyName = obj.coreEnterpriseInfo.enterpriseName
      }
    },
    onSave () {
      this.$emit('saveSuccess')
    }
  },
  watch: {
    'saveForm.coreCompanyId' (now, old) {
      if (now !== old && !this.UtilJs.isEmpty(this.saveForm.areaParent)) {
        this.saveForm.areaParent = ''
      }
    },
    visible (val) {
      if (!val) {
        this.saveForm = {
          largeAreaType: '1'
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
