<template>
  <div>
    <dialog-edit :title="$t('cyjg.businessRegionInfo.areaMerge')" :width="width" :formRules="formRules" :api="api"
                 labelWidth="95px"
                 :editModel="model" :form="formList" :visible.sync="dialogVisible" ref="mergeDialog" :autoSave="autoSave" @onSaved="onSaved">
      <dym-form :componentList="componentList" :formValue="formList" @selectChanged="selectChanged"></dym-form>
      <!-- 合并类型 -->
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <el-form-item :label="$t('cyjg.businessRegionInfo.mergeType')" prop="mergeType">
            <select-dictionary :store="$store" v-model="formList.mergeType" :dictTypeCode="dictTypeCode" :clearable="clearable" :name="'mergeType'" @selectChanged="changedDict"></select-dictionary>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 被合并区域 -->
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <el-form-item :label="$t('cyjg.businessRegionInfo.areaMerged')" prop="mergeAreaIds">
            <select-big-area v-if="formList.mergeType === '1'" v-model="formList.mergeAreaIds" :queryParas="bigAreaParas"
                             :loadApi="loadApi" :reload="biaAreaLoad" :multiple="multiple" class="dymForm">
            </select-big-area>
            <select-small-area v-if="formList.mergeType === '2'" v-model="formList.mergeAreaIds" :queryParas="smallAreaParas"
                               :loadApi="loadApi" :reload="smallAreaLoad" :multiple="multiple" class="dymForm">
            </select-small-area>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 合并后区域 -->
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <el-form-item :label="$t('cyjg.businessRegionInfo.mergedArea')" prop="mergedAreaId">
            <select-big-area v-if="formList.mergeType === '1'" v-model="formList.mergedAreaId" :queryParas="bigAreaParas" class="dymForm"
                             :loadApi="loadApi" :reload="biaAreaLoad" :allowCreate="allowCreate" @selectChanged="mergedChanged">
            </select-big-area>
            <select-small-area v-if="formList.mergeType === '2'" v-model="formList.mergedAreaId" :queryParas="smallAreaParas" class="dymForm"
                               :loadApi="loadApi" :reload="smallAreaLoad" :allowCreate="allowCreate" @selectChanged="mergedChanged">
            </select-small-area>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 归属大区域 -->
      <el-row :gutter="10" v-if="formList.mergeType === '2'">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <el-form-item :label="$t('cyjg.businessRegionInfo.belongArea')" prop="attributionAreaId">
            <select-big-area v-model="formList.attributionAreaId" :queryParas="bigAreaParas" :reload="biaAreaLoad" class="dymForm"
                             :loadApi="loadApi" :allowCreate="allowCreate" @selectChanged="belongAreaChanged">
            </select-big-area>
          </el-form-item>
        </el-col>
      </el-row>
    </dialog-edit>
  </div>
</template>

<script>
import SelectCoreEnterprise from '@/components/element/cyjg/SelectBizCoreEnterprise.vue'
import SelectBigArea from '@/components/element/cyjg/SelectBigArea.vue'
import SelectSmallArea from '@/components/element/cyjg/SelectSmallArea.vue'
import businessRegionInfoApi from '@/api/cyjg/businessRegionInfoApi.js'
import BaseEdit from '@/pages/baseEditPage.js'
import { dymForm, DialogEdit, SelectDictionary } from 'newepoch-components'
export default {
  extends: new BaseEdit(),
  props: {
    visible: {
      required: true,
      type: [Boolean],
      default: function () {
        return false
      }
    }
  },
  components: {
    SelectDictionary,
    dymForm,
    DialogEdit,
    SelectBigArea,
    SelectSmallArea,
    SelectCoreEnterprise
  },
  data () {
    return {
      loadApi: false,
      clearable: false,
      autoSave: false,
      biaAreaLoad: true,
      smallAreaLoad: true,
      multiple: true,
      allowCreate: true,
      width: '660px',
      model: 'C',
      dictTypeCode: 'merge_type',
      formList: {
        coreCompanyId: '',
        coreCompanyName: '',
        mergeType: '',
        mergeAreaIds: [],
        mergedAreaId: '',
        areaDTO: {
          areaId: '',
          areaName: ''
        },
        largeAreaId: '',
        attributionAreaId: '',
        largeAreaName: ''
      },
      bigAreaParas: {
        coreCompanyId: '',
        areaType: ''
      },
      smallAreaParas: {
        coreCompanyId: '',
        areaType: ''
      },
      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'
        }
      ],
      formRules: {
        coreCompanyId: [{ required: true, message: this.regMsg.businessRegionInfo.coreEnterprise, trigger: 'change' }],
        mergeType: [{ required: true, message: this.regMsg.businessRegionInfo.mergeType, trigger: 'change' }],
        mergeAreaIds: [{ required: true, message: this.regMsg.businessRegionInfo.mergeAreaIds },
          { validator: this.mergeAreaIdCheck, trigger: 'change' }],
        mergedAreaId: [{ required: true, message: this.regMsg.businessRegionInfo.mergeAreaIds, trigger: 'change' },
          { trigger: 'change', validator: this.SmallAreaIdLength }],
        attributionAreaId: [{ required: true, message: this.regMsg.businessRegionInfo.attributionAreaId, trigger: 'change' }]
      }
    }
  },
  methods: {
    SmallAreaIdLength (rule, value, callback) {
      if (value.length > 50) {
        callback(new Error(this.regMsg.businessRegionInfo.areaLength))
      }
      callback()
    },
    mergeAreaIdCheck (rule, value, callback) {
      if (value.length > 1) {
        callback()
      } else {
        callback(new Error(this.regMsg.businessRegionInfo.mergeAreaNeedTwo))
      }
    },
    submitForm () {},
    selectChanged (obj) {
      let $this = this
      if (!$this.UtilJs.isEmpty(obj.coreEnterpriseInfo)) {
        $this.formList.coreCompanyName = obj.coreEnterpriseInfo.coreCompanyName
        if ($this.formList.mergeType === '1') {
          $this.bigAreaParas.coreCompanyId = obj.coreEnterpriseInfo.coreCompanyId
          $this.smallAreaParas.coreCompanyId = obj.coreEnterpriseInfo.coreCompanyId
          $this.bigAreaParas.areaType = '1'
          $this.biaAreaLoad = !$this.biaAreaLoad
        } else if ($this.formList.mergeType === '2') {
          $this.smallAreaParas.coreCompanyId = obj.coreEnterpriseInfo.coreCompanyId
          $this.smallAreaParas.areaType = '2'
          $this.bigAreaParas.coreCompanyId = obj.coreEnterpriseInfo.coreCompanyId
          $this.bigAreaParas.areaType = '1'
          $this.smallAreaLoad = !$this.smallAreaLoad
          $this.biaAreaLoad = !$this.biaAreaLoad
        }
      }
    },
    changedDict (val) {
      let $this = this
      if (val === '1') {
        $this.formList.mergeAreaIds = []
        $this.formList.mergedAreaId = ''
        $this.bigAreaParas.areaType = '1'
        $this.$refs['mergeDialog'].resetForm()
      } else if (val === '2') {
        $this.formList.mergeAreaIds = []
        $this.formList.mergedAreaId = ''
        $this.smallAreaParas.areaType = '2'
        $this.formList.attributionAreaId = ''
        $this.$refs['mergeDialog'].resetForm()
      }
    },
    mergedChanged (val, name, data) {
      let $this = this
      if (!$this.UtilJs.isEmpty(data)) {
        $this.formList.areaDTO.areaId = val
        $this.formList.areaDTO.areaName = data.areaName
      } else {
        $this.formList.areaDTO.areaId = ''
        $this.formList.areaDTO.areaName = val
      }
    },
    belongAreaChanged (val, name, data) {
      let $this = this
      if (!$this.UtilJs.isEmpty(data)) {
        $this.formList.largeAreaId = val
        $this.formList.largeAreaName = data.areaName
      } else {
        $this.formList.largeAreaId = ''
        $this.formList.largeAreaName = val
      }
    },
    onSaved () {
      let $this = this
      this.api.create(this.formList).then(res => {
        if (res && res.data) {
          if ($this.formList.mergeType === '1') {
            $this.success(this.regMsg.businessRegionInfo.mergeLargeAreaSuc)
            $this.dialogVisible = false
            $this.$emit('refresh')
          } else if ($this.formList.mergeType === '2') {
            $this.success(this.regMsg.businessRegionInfo.mergeSmallAreaSuc)
            $this.dialogVisible = false
            $this.$emit('refresh')
          }
        } else {
          $this.error(this.regMsg.businessRegionInfo.mergeAreaFail)
        }
      })
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    },
    api () {
      return businessRegionInfoApi.areaMerge
    }
  },
  watch: {
    'formList.coreCompanyId' (now, old) {
      let $this = this
      if (now !== old && $this.visible) {
        if ($this.formList.mergeType === '2') {
          $this.formList.attributionAreaId = ''
        }
        $this.formList.mergeAreaIds = []
        $this.formList.mergedAreaId = ''
      }
    },
    visible (val) {
      let $this = this
      if (val) {
        $this.formList.mergeType = '1'
      } else {
        $this.formList = {
          coreCompanyId: '',
          mergeType: '',
          mergeAreaIds: [],
          mergedAreaId: '',
          areaDTO: {
            areaId: '',
            areaName: ''
          },
          largeAreaId: '',
          attributionAreaId: '',
          largeAreaName: ''
        }
      }
    }
  }
}
</script>

<style>

</style>
