<!-- 区域信息维护(金融部) 一览 -->
<template>
  <div>
    <up-down-layout :header="$t('cyjg.financialRegionInfo.financialRegionInfoList')" :handleFlag.sync="handleFlag">
      <search-form :componentList="componentList" @handleFilter="handleFilter" :formValue.sync="queryParas"
                   @clearParam="clearParam" slot="query" @selectChanged="selectChanged">
      </search-form>
      <template slot="table">
        <data-table :api="api" :operateBtnLayout="operateBtnLayout" :columns="columns" :sourceData.sync="sourceData" :menuFlag="menuFlag"
                    :type="selectionType" :queryParas="queryParas" :loadCount.sync="loadCount" :showSelection="showSelection"
                    @selectRowChange="selectRowChange" :headTitle="$t('cyjg.businessRegionInfo.businessRegionInfoList')" v-bind="elHeightObj">
          <template slot="headButton">
            <el-row>
              <el-col :span="24" class="btn-right">
                <auth-button type="primary" icon="iconfont icondaquyu" :label="$t('cyjg.financialRegionInfo.bigAreaMaintain')" @click="showBigEdit" size="medium"></auth-button>
                <auth-button type="primary" icon="iconfont iconxiaoquyu" :label="$t('cyjg.financialRegionInfo.smallAreaMaintain')" @click="showSmallEdit" size="medium"></auth-button>
<!--                <btn-download :xhr="$xhr" type="primary" :classType="classType" :fileID="fileId" :downloadButtonMsg="$t('cyjg.financialRegionInfo.downloadTemplate')" size="medium"></btn-download>-->
                <auth-button type="primary" icon="iconfont iconycxiazai" :label="$t('cyjg.financialRegionInfo.downloadTemplate')"
                             :loading="downloadFileByTemplateCodeLoading"
                             @click="downloadFileByTemplateCode" size="medium"></auth-button>
                <btn-auto-import :xhr="$xhr" @upload="upload" :size="size" class="btnMarginLeft"></btn-auto-import>
                <btn-export :xhr="$xhr" :templateCode="templateCode" :beforeExport="beforeExport" :queryParas="exportParams" btnSize="medium" class="btnMarginLeft"></btn-export>
                <auth-button :label="$t('cyjg.financialRegionInfo.delete')" @click="delBatch" type="primary" icon="iconfont iconshanchu" size="medium"></auth-button>
              </el-col>
            </el-row>
          </template>
          <el-table-column :label="$t('common.operate')" align="center" fixed="right" width="100px">
            <template slot-scope="scope">
              <auth-button :title="$t('cyjg.financialRegionInfo.areaCompanyManage')" @click="showEdit(scope.$index, scope.row)" icon="iconfont iconquyuxiangmugongsiguanli" class="iconCircle"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
    </up-down-layout>
    <!-- 大区域维护 -->
    <big-area-maintain-edit :visible.sync="showBigDetail" :editModel="bigEditModel" :form="item" :regMsg="regMsg" @refreshBigArea="refreshBigArea"></big-area-maintain-edit>
    <!-- 小区域维护 -->
    <small-area-maintain-edit :visible.sync="showSmallDetail" :editModel="smallEditModel" :form="item" :regMsg="regMsg" @saveSuccess="saveSuccess"></small-area-maintain-edit>
    <!-- 金融部区域项目公司管理 -->
    <regionCompanyManage :visible.sync="showDetail" :form="companyItem"/>
  </div>
</template>

<script>
import BasePage from '@/pages/basePage'
import { UPLOAD_API } from '@/constant.js'
import * as format from '@/filters/index.js'
import financialRegionInfoApi from '@/api/cyjg/financialRegionInfoApi.js'
import regionCompanyManage from '@/pages/cyjg/financialRegionInfo/regionCompanyManage.vue'
import bigAreaMaintainEdit from '@/pages/cyjg/financialRegionInfo/bigAreaMaintainEdit.vue'
import SelectBigArea from '@/components/element/cyjg/SelectBigArea.vue'
import SelectSmallArea from '@/components/element/cyjg/SelectSmallArea.vue'
import SmallAreaMaintainEdit from '@/pages/cyjg/financialRegionInfo/smallAreaMaintainEdit.vue'
import mixin from '@/pages/mixin.js'
import { upDownLayout, searchForm, DataTable, authButton, btnAutoImport, btnExport, btnDownload, SelectCoreEnterprise } from 'newepoch-components'
import fileApi from '@/api/fileApi'
import { downFile } from '@/utils/devUtils'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'financialRegionInfoList',
  components: {
    bigAreaMaintainEdit,
    searchForm,
    DataTable,
    authButton,
    btnAutoImport,
    btnExport,
    btnDownload,
    upDownLayout,
    SelectCoreEnterprise,
    SelectBigArea,
    SelectSmallArea,
    SmallAreaMaintainEdit,
    regionCompanyManage
  },
  data () {
    return {
      downloadFileByTemplateCodeLoading: false,
      showSelection: true,
      classType: true,
      handleFlag: true,
      menuFlag: true,
      showDetail: false,
      showSmallDetail: false,
      showBigDetail: false,
      operateBtnLayout: '',
      smallEditModel: 'C',
      bigEditModel: 'V',
      size: 'medium',
      selectionType: 'selection',
      templateCode: 'cyjg002',
      uploadApi: UPLOAD_API,
      loadCount: 0,
      item: {},
      companyItem: {},
      importParas: {
        importList: []
      },
      queryParas: {
        pageIndex: 1,
        pageSize: 10,
        coreCompanyId: '',
        largeAreaId: '',
        largeAreaType: '1',
        smallAreaId: '',
        smallAreaType: '2'
      },
      sourceData: [],
      componentList: [
        // 核心企业
        {
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.coreEnterprise,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '',
          value: 'coreCompanyId',
          name: 'coreCompany',
          componentName: SelectCoreEnterprise
        },
        // 大区域
        {
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.bigArea,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '',
          value: 'largeAreaId',
          name: 'largeArea',
          queryName: ['coreCompanyId', 'areaType'],
          queryValue: ['coreCompanyId', 'largeAreaType'],
          componentName: SelectBigArea,
          reload: true
        },
        // 小区域
        {
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.smallArea,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '',
          value: 'smallAreaId',
          name: 'smallArea',
          queryName: ['coreCompanyId', 'largeAreaId', 'areaType'],
          queryValue: ['coreCompanyId', 'largeAreaId', 'smallAreaType'],
          componentName: SelectSmallArea,
          reload: true
        }
      ],
      detectVisible: true,
      columns: [
        // 核心企业
        {
          prop: 'coreCompanyName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.coreEnterprise,
          minWidth: '200px'
        },
        // 大区域
        {
          prop: 'largeAreaName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.bigArea
        },
        // 小区域
        {
          prop: 'smallAreaName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.smallArea
        }
      ]
    }
  },
  mounted () {
    // this.$nextTick(() => {
    //   this.$el.getElementsByClassName('el-checkbox')[3].style.display = 'none'
    // })
  },
  computed: {
    api () {
      return financialRegionInfoApi.financialInfoManage
    },
    fileId () {
      return format.formatDict('cyjg001', 'ZDCY0001')
    },
    exportParams () {
      let coreCompanyId = this.queryParas.coreCompanyId
      let largeAreaId = this.queryParas.largeAreaId
      let smallAreaId = this.queryParas.smallAreaId
      return {
        coreCompanyId: coreCompanyId,
        largeAreaId: largeAreaId,
        smallAreaId: smallAreaId
      }
    }
  },
  methods: {
    // 通过模板下载
    downloadFileByTemplateCode () {
      this.downloadFileByTemplateCodeLoading = true
      fileApi.file.downloadFileByTemplateCode({ templateCode: 'cyjgdrmb001' }).then(res => {
        downFile(res)
      }).finally(res => {
        this.downloadFileByTemplateCodeLoading = false
      })
    },
    beforeExport () {
      if (this.sourceData.length === 0) {
        this.warning(this.$i18n.messages[this.$i18n.locale].common.importTip)
      } else {
        return true
      }
    },
    refreshBigArea () {
      this.handleFilter()
      this.componentList[1].reload = !this.componentList[1].reload
    },
    // 勾选操作
    selectChanged (val) {},
    // 复选框勾选数据
    selectRowChange (val) {
      this.selectedRows = val
    },
    // 新增/编辑 操作成功
    saveSuccess () {
      this.handleFilter()
      this.componentList[2].reload = !this.componentList[2].reload
    },
    // 批量删除
    delBatch () {
      let common = this.$i18n.messages[this.$i18n.locale].common
      if (this.selectedRows.length === 0) {
        this.warning(common.delSelectedTip)
        return
      }
      let arr = this.selectedRows.map(it => {
        return it.keyId
      })
      let $this = this
      $this.$confirm(common.confirmTip, common.warningTip, {
        type: 'warning'
      }).then(() => {
        $this.api.dels({ ids: arr, delType: '2' }).then(res => {
          if (res && res.data) {
            $this.success(common.delSuccess)
            $this.onDeletedRowHandle()
          } else {
            $this.error(common.delFailure)
          }
        })
      }).catch(() => {})
    },
    // 导入查询
    upload (returnData) {
      let $this = this
      let fm = new FormData()
      fm.append('file', returnData)
      $this.api.regionImport(fm).then(res => {
        if (res.data) {
          $this.success(this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.importSuccess)
          $this.handleFilter()
        }
      })
      // let importFlag = false
      // let data = []
      // $this.importParas.importList = []
      // returnData.forEach((it, index) => {
      //   let size = null
      //   if (index === 0) {
      //     if (it[0] === '核心企业' && it[1] === '大区域' && it[2] === '小区域' && it[3] === '项目公司') {
      //       importFlag = true
      //     } else {
      //       importFlag = false
      //     }
      //   } else {
      //     size = it.filter(res => {
      //       if (!$this.UtilJs.isEmpty(res)) {
      //         return true
      //       }
      //     })
      //     if (size.length > 0) {
      //       data.push(it)
      //     }
      //   }
      // })
      // if (importFlag) {
      //   data.forEach(item => {
      //     let info = {}
      //     // 核心企业
      //     info.coreCompanyName = item[0]
      //     // 大区域
      //     info.largeAreaName = item[1]
      //     // 小区域
      //     info.smallAreaName = item[2]
      //     // 项目公司
      //     let str = item[3]
      //     str = str.replace(new RegExp('[,，]+', 'gm'), ',')
      //     str = (str.substring(str.length - 1) === ',') ? str.substring(0, str.length - 1) : str
      //     info.projectName = str
      //     $this.importParas.importList.push(info)
      //   })
      //   financialRegionInfoApi.financialInfoManage.regionImport($this.importParas.importList).then(res => {
      //     if (res.data) {
      //       $this.success(this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.importSuccess)
      //     }
      //   })
      // } else {
      //   $this.warning(this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.importCheck)
      // }
    },
    // 弹出大区域维护
    showBigEdit () {
      this.item = {}
      this.showBigDetail = true
    },
    // 弹出小区域维护
    showSmallEdit () {
      this.item = {}
      this.showSmallDetail = true
    },
    // 弹出区域项目公司管理
    showEdit (index, row) {
      this.companyItem = Object.assign({}, row)
      this.showDetail = true
    },
    // 重置
    clearParam () {
      this.queryParas.pageIndex = 1
      this.queryParas.pageNumber = 10
      this.queryParas.coreCompanyId = ''
      this.queryParas.largeAreaId = ''
      this.queryParas.largeAreaType = '1'
      this.queryParas.smallAreaId = ''
      this.queryParas.smallAreaType = '2'
    }
  },
  watch: {
    // 级联重置
    'queryParas.coreCompanyId' (now, old) {
      if (now !== old) {
        this.queryParas.largeAreaId = ''
        this.queryParas.smallAreaId = ''
      }
    },
    // 级联重置
    'queryParas.largeAreaId' (now, old) {
      if (now !== old) {
        this.queryParas.smallAreaId = ''
      }
    }
  }
}
</script>

<style scoped lang="scss" src="@/styles/cyjg/financialRegionInfo/financialRegionInfoList.scss">
</style>
