<template>
  <div class="businessRegionInfoList">
    <up-down-layout :header="$t('cyjg.businessRegionInfo.businessRegionInfoTitle')" :handleFlag.sync="handleFlag">
      <search-form :componentList="componentList" @handleFilter="handleFilter" :formValue.sync="queryParas"
                   @clearParam="clearParam" @selectChanged="searchChanged" slot="query">
      </search-form>
      <template slot="table">
        <data-table :api="api" :operateBtnLayout="operateBtnLayout" :sourceData.sync="sourceData" :menuFlag="menuFlag" :columns="columns"
                    :queryParas="queryParas" :loadCount.sync="loadCount" :showSelection="showSelection" @selectRowChange="selectRowChange"
                    :headTitle="$t('cyjg.businessRegionInfo.businessRegionInfoList')" v-bind="elHeightObj" @getTableData="getTableData">
          <template slot="headButton">
            <el-row>
              <el-col :span="24" class="btn-right">
                <auth-button icon="iconfont icondaquyu" size="medium" type="primary" :label="$t('cyjg.businessRegionInfo.largeAreaMaintain')" @click="bigAreaVisible = true"></auth-button>
                <auth-button icon="iconfont iconxiaoquyu" size="medium" type="primary" :label="$t('cyjg.businessRegionInfo.littleAreaMaintain')" @click="showLittleAreaEdit('C')"></auth-button>
                <auth-button size="medium" type="primary" icon="iconfont iconchaifen" @click="showSplitEdit" :label="$t('cyjg.businessRegionInfo.areaSplit')"></auth-button>
                <auth-button size="medium" type="primary" icon="iconfont iconhebing" :label="$t('cyjg.businessRegionInfo.areaMerge')" @click="regionMerge"></auth-button>
<!--                <btn-download :xhr="$xhr" type="primary" :classType="classType" :fileID="fileId" :downloadButtonMsg="$t('cyjg.businessRegionInfo.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="importSuccess" size="medium" class="btnMarginLeft"></btn-auto-import>
                <btn-export :xhr="$xhr" :templateCode="templateCode" :beforeExport="beforeExport" icon="iconfont icondaochu" :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>
          <!-- 区域专员 -->
          <template slot="areaCommissioner" slot-scope="scope">
            <div v-if="scope.data.row.qyzyMoreFlag">
              <el-row v-for="(item, index) in scope.data.row.qyzyBtnFlag ? scope.data.row.areaCommissioner.slice(0, 2) : scope.data.row.areaCommissioner" :key="index">
                <a @click="showAreaCommissioner(scope.data.row.littleAreaKeyId)" class="linkClass">{{item.areaCommissionerName}}</a>
              </el-row>
              <i v-show="scope.data.row.qyzyBtnFlag" @click="showCommissioner(scope)" class="el-icon-arrow-down very_list"></i>
              <i v-show="!scope.data.row.qyzyBtnFlag" @click="showCommissioner(scope)" class="el-icon-arrow-up very_list"></i>
            </div>
            <div v-else>
              <el-row v-for="(item, index) in scope.data.row.areaCommissioner" :key="index">
                <a @click="showAreaCommissioner(scope.data.row.littleAreaKeyId)" class="linkClass">{{item.areaCommissionerName}}</a>
              </el-row>
            </div>
          </template>

          <!-- 业务专员 -->
          <template slot="marketer" slot-scope="scope">
            <div v-if="scope.data.row.ywMoreFlag">
              <el-row v-for="(item, index) in scope.data.row.ywBtnFlag ? scope.data.row.marketer.slice(0, 2) : scope.data.row.marketer" :key="index">
                <span>{{item.areaMarketerName}}</span>
              </el-row>
              <i v-show="scope.data.row.ywBtnFlag" @click="showMarketer(scope)" class="el-icon-arrow-down very_list"></i>
              <i v-show="!scope.data.row.ywBtnFlag" @click="showMarketer(scope)" class="el-icon-arrow-up very_list"></i>
            </div>
            <div v-else>
              <el-row v-for="(item, index) in scope.data.row.marketer" :key="index">
                <span>{{item.areaMarketerName}}</span>
              </el-row>
            </div>
<!--            <expand-collapse :sourceData="sourceData" :colProp="'marketer'" :valueProp="'areaMarketerName'" :rowIndex="scope.data.$index"></expand-collapse>-->
          </template>

          <!-- 区域统筹人 -->
          <template slot="areaCoordinatorName" slot-scope="scope">
            <div v-if="scope.data.row.tcMoreFlag">
              <el-row v-for="(item, index) in scope.data.row.tcBtnFlag ? scope.data.row.coordinator.slice(0, 2) : scope.data.row.coordinator" :key="index">
                <a @click="toRegionCoordinatorList(item.areaCoordinatorName)" class="linkClass">{{item.areaCoordinatorName}}</a>
              </el-row>
              <i v-show="scope.data.row.tcBtnFlag" @click="showCoordinator(scope)" class="el-icon-arrow-down very_list"></i>
              <i v-show="!scope.data.row.tcBtnFlag" @click="showCoordinator(scope)" class="el-icon-arrow-up very_list"></i>
            </div>
            <div v-else>
              <el-row v-for="(item, index) in scope.data.row.coordinator" :key="index">
                <a @click="toRegionCoordinatorList(item.areaCoordinatorName)" class="linkClass">{{item.areaCoordinatorName}}</a>
              </el-row>
            </div>
          </template>

          <!-- 区域对接人 -->
          <template slot="areaContacts" slot-scope="scope">
            <div v-if="scope.data.row.qydjMoreFlag">
              <el-row v-for="(item, index) in scope.data.row.qydjBtnFlag ? scope.data.row.areaContacts.slice(0, 2) : scope.data.row.areaContacts" :key="index">
                <a @click="showContacts(item, scope.data.row)" class="linkClass">{{item.contactsName}}</a>
              </el-row>
              <i v-show="scope.data.row.qydjBtnFlag" @click="showAreaContacts(scope)" class="el-icon-arrow-down very_list"></i>
              <i v-show="!scope.data.row.qydjBtnFlag" @click="showAreaContacts(scope)" class="el-icon-arrow-up very_list"></i>
            </div>
            <div v-else>
              <el-row v-for="(item, index) in scope.data.row.areaContacts" :key="index">
                <a @click="showContacts(item, scope.data.row)" class="linkClass">{{item.contactsName}}</a>
              </el-row>
            </div>
          </template>

          <!-- 电话 -->
          <template slot="phoneNumber" slot-scope="scope">
            <div v-if="scope.data.row.phoneMoreFlag">
              <el-row v-for="(item, index) in scope.data.row.phoneBtnFlag ? scope.data.row.areaContacts.slice(0, 2) : scope.data.row.areaContacts" :key="index">
                <span>{{item.phoneNumber}}</span>
              </el-row>
              <i v-show="scope.data.row.phoneBtnFlag" @click="showPhone(scope)" class="el-icon-arrow-down very_list"></i>
              <i v-show="!scope.data.row.phoneBtnFlag" @click="showPhone(scope)" class="el-icon-arrow-up very_list"></i>
            </div>
            <div v-else>
              <el-row v-for="(item, index) in scope.data.row.areaContacts" :key="index">
                <span>{{item.phoneNumber}}</span>
              </el-row>
            </div>
<!--            <expand-collapse :sourceData="sourceData" :colProp="'areaContacts'" :valueProp="'phoneNumber'" :rowIndex="scope.data.$index"></expand-collapse>-->
          </template>

          <!-- 区域账号 -->
          <template slot="contactName" slot-scope="scope">
            <div v-if="scope.data.row.accountMoreFlag">
              <el-row v-for="(item, index) in scope.data.row.accountBtnFlag ? scope.data.row.areaContacts.slice(0, 2) : scope.data.row.areaContacts" :key="index">
                <a @click="showContact(item.areaContactsAccount, scope.data.row)" class="linkClass">{{item.areaContactsAccount!== undefined ? item.areaContactsAccount.account : ''}}</a>
              </el-row>
              <i v-show="scope.data.row.accountBtnFlag" @click="showAccounts(scope)" class="el-icon-arrow-down very_list"></i>
              <i v-show="!scope.data.row.accountBtnFlag" @click="showAccounts(scope)" class="el-icon-arrow-up very_list"></i>
            </div>
            <div v-else>
              <el-row v-for="(item, index) in scope.data.row.areaContacts" :key="index">
                <a @click="showContact(item.areaContactsAccount, scope.data.row)" class="linkClass">{{item.areaContactsAccount!== undefined ? item.areaContactsAccount.account : ''}}</a>
              </el-row>
            </div>
          </template>

          <!-- 操作 -->
          <el-table-column align="center" header-align="center" :label="$t('common.operate')" width="120px">
            <template slot-scope="scope">
              <auth-button :title="$t('common.edit')" size="small" @click="showLittleAreaEdit('E', scope.row)" icon="iconfont iconbianji" class="iconCircle"></auth-button>
              <auth-button :title="$t('cyjg.businessRegionInfo.areaCompanyManage')" size="small" @click="showCompanyEdit(scope.row)" icon="iconfont iconquyuxiangmugongsiguanli" class="iconCircle"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
    </up-down-layout>
    <!-- 小区域维护 -->
    <little-area-edit :visible.sync="littleAreaVisable" :editModel="littleAreaModel" :form="littleAreaItem" :regMsg="regMsg" @handleFilter="reload"></little-area-edit>
    <!-- 区域专员履历 -->
    <commissionerEdit :visible.sync="areaCommissionerVisable" :editModel="commissionerModel" :form="areaCommissionerItem" :regMsg="regMsg"></commissionerEdit>
    <!-- 区域对接人维护 -->
    <contact-info-edit :visible.sync="contactsEditVisable" :form="item" :editModel="contactsEditModel" :regMsg="regMsg" @createSuccess="reload"></contact-info-edit>
    <contact-maintain-edit :visible.sync="showDetail" :editModel="contactsEditModel" :form="item" :regMsg="regMsg"></contact-maintain-edit>
<!--    <contactsEdit :visible.sync="contactsEditVisable" :editModel="contactsEditModel" :form="item" :regMsg="regMsg"></contactsEdit>-->
    <!-- 区域账号查看 -->
    <contactEdit :visible.sync="contactEditVisable" :editModel="contactEditModel" :form="contactItem" :regMsg="regMsg"></contactEdit>
    <!-- 大区域维护一览 -->
    <big-area-maintain-view :editModel="editModel" :form="item" :visible.sync="bigAreaVisible" @refreshBigArea="refreshBigArea"></big-area-maintain-view>
    <!-- 区域项目公司管理 -->
    <busregionCompanyManage   :visible.sync="CompanyVisible" :form="companyItem" />
    <!-- 区域拆分 -->
    <region-split-edit :visible.sync="splitEditDetail" :editModel="editModel" :form="item" :regMsg="regMsg" @refresh="reload"></region-split-edit>
    <!-- 区域合并 -->
    <region-merge :visible.sync="regionMergeVisible" :editModel="editModel" :form="item" :regMsg="regMsg" @refresh="reload"></region-merge>
    <!-- 导入信息弹框 -->
    <business-import-edit :visible.sync="importVisible" :form="importItem" :editModel="importModel" :importData="conflictData" @import-success="handleFilter"></business-import-edit>
  </div>
</template>

<script>
// 区域信息维护(业务部) 一览
import { upDownLayout, searchForm, DataTable, authButton, btnAutoImport, btnExport, btnDownload, SelectCoreEnterprise } from 'newepoch-components'
import * as format from '@/filters/index'
import { IMPORT_API } from '@/constant.js'
import businessRegionInfoApi from '@/api/cyjg/businessRegionInfoApi.js'
import BasePage from '@/pages/basePage.js'
import SelectBigArea from '@/components/element/cyjg/SelectBigArea.vue'
import SelectSmallArea from '@/components/element/cyjg/SelectSmallArea.vue'
import SelectCommissioner from '@/components/element/cyjg/SelectLocalCommissioner.vue'
import BigAreaMaintainView from '@/pages/cyjg/businessRegionInfo/bigAreaMaintainView.vue'
import busregionCompanyManage from './projectManage/busregionCompanyManage'
import commissionerEdit from '@/pages/cyjg/businessRegionInfo/commissionerEdit.vue'
import contactEdit from '@/pages/cyjg/businessRegionInfo/contactEdit.vue'
// import contactsEdit from '@/pages/cyjg/businessRegionInfo/contactsEdit.vue'
import RegionSplitEdit from '@/pages/cyjg/businessRegionInfo/regionSplitEdit.vue'
import regionMerge from '@/pages/cyjg/businessRegionInfo/regionMerge.vue'
// import storage from '@/utils/storage'
import littleAreaEdit from '@/pages/cyjg/businessRegionInfo/littleAreaEdit.vue'
import BusinessImportEdit from '@/pages/cyjg/businessRegionInfo/businessImportEdit.vue'
import ExpandCollapse from '@/components/element/ExpandCollapse.vue'
import ExcludeSpecialInput from '@/components/element/cyjg/ExcludeSpecialInput.vue'
import contactInfoEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/contactInfoEdit/contactInfoEdit.vue'
import contactMaintainEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/editContactEdit.vue'
import mixin from '@/pages/mixin.js'
import fileApi from '@/api/fileApi'
import { downFile } from '@/utils/devUtils'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'businessRegionInfoList',
  components: {
    SelectCommissioner,
    SelectCoreEnterprise,
    SelectBigArea,
    SelectSmallArea,
    upDownLayout,
    searchForm,
    DataTable,
    authButton,
    btnAutoImport,
    btnExport,
    btnDownload,
    BigAreaMaintainView,
    commissionerEdit,
    contactEdit,
    littleAreaEdit,
    regionMerge,
    RegionSplitEdit,
    busregionCompanyManage,
    BusinessImportEdit,
    ExpandCollapse,
    ExcludeSpecialInput,
    contactInfoEdit,
    contactMaintainEdit
  },
  data () {
    return {
      downloadFileByTemplateCodeLoading: false,
      showDetail: false,
      templateCode: 'cyjg001',
      importApi: IMPORT_API,
      showSelection: true,
      classType: true,
      handleFlag: true,
      littleAreaVisable: false,
      areaCommissionerVisable: false,
      contactsEditVisable: false,
      contactEditVisable: false,
      splitEditDetail: false,
      menuFlag: true,
      importVisible: false,
      operateBtnLayout: '',
      importModel: 'C',
      importItem: {},
      loadCount: 0,
      importParas: {
        importList: []
      },
      conflictData: [],
      queryParas: {
        pageIndex: 1,
        pageSize: 10,
        coreCompanyId: '',
        bigAreaId: '',
        littleAreaId: '',
        largeAreaType: '1',
        smallAreaType: '2',
        areaCommissionerId: '',
        areaCommissionerName: '',
        areaContactsName: '',
        areaCoordinatorName: ''
      },
      littleAreaModel: '',
      commissionerModel: 'V',
      contactsEditModel: 'V',
      contactEditModel: 'V',
      editModel: 'E',
      componentList: [
        // 核心企业
        {
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.coreEnterprise,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.point,
          lableWidth: '',
          value: 'coreCompanyId',
          componentName: SelectCoreEnterprise
        },
        // 大区域
        {
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.bigArea,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.point,
          lableWidth: '',
          value: 'bigAreaId',
          queryName: ['coreCompanyId', 'areaType'],
          queryValue: ['coreCompanyId', 'largeAreaType'],
          componentName: SelectBigArea,
          loadApi: false,
          reload: false
        },
        // 小区域
        {
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.smallArea,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.point,
          lableWidth: '',
          value: 'littleAreaId',
          queryName: ['coreCompanyId', 'largeAreaId', 'areaType'],
          queryValue: ['coreCompanyId', 'bigAreaId', 'smallAreaType'],
          componentName: SelectSmallArea,
          loadApi: false,
          reload: false
        },
        // 区域专员
        {
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.commissionerName,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.point,
          value: 'areaCommissionerId',
          name: 'areaCommissioner',
          queryName: 'areaId',
          queryValue: 'littleAreaId',
          componentName: SelectCommissioner
        },
        // 区域对接人
        {
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.contactsName,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          value: 'areaContactsName',
          maxlength: 100,
          componentName: ExcludeSpecialInput
        },
        // 区域统筹人
        {
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.areaCoordinatorName,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          value: 'areaCoordinatorName',
          maxlength: 100,
          componentName: ExcludeSpecialInput
        }
      ],
      dialogtitle: '',
      detectVisible: true,
      // 控制区域项目公司管理
      CompanyVisible: false,
      // 大区域维护弹框
      bigAreaVisible: false,
      areaCommissionerItem: {},
      contactItem: {},
      companyItem: {},
      littleAreaItem: {},
      sourceData: [],
      // 控制区域合并显示弹框
      regionMergeVisible: false,
      columns: [
        // 核心企业
        {
          prop: 'coreCompanyName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.coreEnterprise,
          width: ''
        },
        // 大区域
        {
          prop: 'bigAreaName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.lageArea,
          width: ''
        },
        // 小区域
        {
          prop: 'littleAreaName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.littleArea,
          width: ''
        },
        // 区域编号
        {
          prop: 'areaNumber',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.areaNumber,
          width: ''
        },
        // 区域专员
        {
          prop: 'areaCommissioner',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.commissionerName,
          width: '',
          slot: true
        },
        // 业务专员
        {
          prop: 'marketer',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.marketer,
          width: '',
          slot: true
        },
        // 区域统筹人
        {
          prop: 'areaCoordinatorName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.areaCoordinatorName,
          width: '',
          slot: true
        },
        // 区域对接人
        {
          prop: 'areaContacts',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.contactsName,
          width: '',
          slot: true
        },
        // 电话
        {
          prop: 'phoneNumber',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.phoneNumber,
          width: '120px',
          slot: true
        },
        // 区域账号
        {
          prop: 'contactName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.contactName,
          width: '60px',
          slot: true
        }
      ]
    }
  },
  computed: {
    api () {
      return businessRegionInfoApi.businessRegionInfoQueryApi
    },
    fileId () {
      return format.formatDict('cyjg003', 'ZDCY0001')
    },
    exportParams () {
      let coreCompanyId = this.queryParas.coreCompanyId
      let largeAreaId = this.queryParas.bigAreaId
      let smallAreaId = this.queryParas.littleAreaId
      let areaContactsName = this.queryParas.areaContactsName
      let areaCoordinatorName = this.queryParas.areaCoordinatorName
      let areaCommissionerName = this.queryParas.areaCommissionerName
      return {
        coreCompanyId: coreCompanyId,
        largeAreaId: largeAreaId,
        smallAreaId: smallAreaId,
        areaContactsName: areaContactsName,
        areaCoordinatorName: areaCoordinatorName,
        areaCommissionerName: areaCommissionerName
      }
    }
  },
  mounted () {
    // this.$nextTick(() => {
    //   this.$el.getElementsByClassName('el-checkbox')[10].style.display = 'none'
    // })
  },
  methods: {
    // 通过模板下载
    downloadFileByTemplateCode () {
      this.downloadFileByTemplateCodeLoading = true
      fileApi.file.downloadFileByTemplateCode({ templateCode: 'cyjgdrmb002' }).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
      }
    },
    searchChanged (obj) {
      let $this = this
      if (!$this.UtilJs.isEmpty(obj.areaCommissionerInfo)) {
        $this.queryParas.areaCommissionerName = obj.areaCommissionerInfo.areaCommissionerName
      } else {
        $this.queryParas.areaCommissionerName = ''
      }
    },
    // 列表数据
    getTableData (returnData) {
      let $this = this
      returnData.forEach(it => {
        // 区域专员
        if (it.areaCommissioner && it.areaCommissioner.length > 2) {
          $this.$set(it, 'qyzyMoreFlag', true)
          $this.$set(it, 'qyzyBtnFlag', true)
        } else {
          $this.$set(it, 'qyzyMoreFlag', false)
          $this.$set(it, 'qyzyBtnFlag', false)
        }
        // 业务人员
        if (it.marketer && it.marketer.length > 2) {
          $this.$set(it, 'ywMoreFlag', true)
          $this.$set(it, 'ywBtnFlag', true)
        } else {
          $this.$set(it, 'ywMoreFlag', false)
          $this.$set(it, 'ywBtnFlag', false)
        }
        // 区域统筹人
        if (it.coordinator && it.coordinator.length > 2) {
          $this.$set(it, 'tcMoreFlag', true)
          $this.$set(it, 'tcBtnFlag', true)
        } else {
          $this.$set(it, 'tcMoreFlag', false)
          $this.$set(it, 'tcBtnFlag', false)
        }
        // 区域对接人、电话、账号
        if (it.areaContacts && it.areaContacts.length > 2) {
          $this.$set(it, 'qydjMoreFlag', true)
          $this.$set(it, 'qydjBtnFlag', true)
          $this.$set(it, 'phoneMoreFlag', true)
          $this.$set(it, 'phoneBtnFlag', true)
        } else {
          $this.$set(it, 'qydjMoreFlag', false)
          $this.$set(it, 'qydjBtnFlag', false)
          $this.$set(it, 'phoneMoreFlag', false)
          $this.$set(it, 'phoneBtnFlag', false)
        }
        if (it.areaContacts) {
          let count = 0
          it.areaContacts.forEach(item => {
            if (item.areaContactsAccount !== undefined && !$this.UtilJs.isEmpty(item.areaContactsAccount.account)) {
              count++
            }
          })
          if (count > 2) {
            $this.$set(it, 'accountMoreFlag', true)
            $this.$set(it, 'accountBtnFlag', true)
          } else {
            $this.$set(it, 'accountMoreFlag', false)
            $this.$set(it, 'accountBtnFlag', false)
          }
        } else {
          $this.$set(it, 'accountMoreFlag', false)
        }
      })
    },
    showCommissioner (scope) {
      if (scope.data.row.qyzyBtnFlag) {
        this.$set(this.sourceData[scope.data.$index], 'qyzyBtnFlag', !scope.data.row.qyzyBtnFlag)
      } else {
        this.$set(this.sourceData[scope.data.$index], 'qyzyBtnFlag', !scope.data.row.qyzyBtnFlag)
      }
    },
    showMarketer (scope) {
      if (scope.data.row.ywBtnFlag) {
        this.$set(this.sourceData[scope.data.$index], 'ywBtnFlag', !scope.data.row.ywBtnFlag)
      } else {
        this.$set(this.sourceData[scope.data.$index], 'ywBtnFlag', !scope.data.row.ywBtnFlag)
      }
    },
    showCoordinator (scope) {
      if (scope.data.row.tcBtnFlag) {
        this.$set(this.sourceData[scope.data.$index], 'tcBtnFlag', !scope.data.row.tcBtnFlag)
      } else {
        this.$set(this.sourceData[scope.data.$index], 'tcBtnFlag', !scope.data.row.tcBtnFlag)
      }
    },
    showAreaContacts (scope) {
      if (scope.data.row.qydjBtnFlag) {
        this.$set(this.sourceData[scope.data.$index], 'qydjBtnFlag', !scope.data.row.qydjBtnFlag)
      } else {
        this.$set(this.sourceData[scope.data.$index], 'qydjBtnFlag', !scope.data.row.qydjBtnFlag)
      }
    },
    showPhone (scope) {
      if (scope.data.row.phoneBtnFlag) {
        this.$set(this.sourceData[scope.data.$index], 'phoneBtnFlag', !scope.data.row.phoneBtnFlag)
      } else {
        this.$set(this.sourceData[scope.data.$index], 'phoneBtnFlag', !scope.data.row.phoneBtnFlag)
      }
    },
    showAccounts (scope) {
      if (scope.data.row.accountBtnFlag) {
        this.$set(this.sourceData[scope.data.$index], 'accountBtnFlag', !scope.data.row.accountBtnFlag)
      } else {
        this.$set(this.sourceData[scope.data.$index], 'accountBtnFlag', !scope.data.row.accountBtnFlag)
      }
    },
    // 页面刷新
    reload () {
      let $this = this
      $this.handleFilter()
      $this.componentList[1].reload = !$this.componentList[1].reload
      $this.componentList[2].reload = !$this.componentList[2].reload
    },
    // 重置筛选条件
    clearParam () {
      this.queryParas = {
        pageIndex: 1,
        pageSize: 10,
        coreCompanyId: '',
        bigAreaId: '',
        littleAreaId: '',
        largeAreaType: '1',
        smallAreaType: '2',
        areaCommissionerId: '',
        areaCommissionerName: '',
        areaContactsName: '',
        areaCoordinatorName: ''
      }
    },
    // 大区域新增后 刷新页面和大区域组件
    refreshBigArea () {
      this.componentList[1].reload = !this.componentList[1].reload
    },
    // 跳转统筹人维护一览
    toRegionCoordinatorList (val) {
      // storage.setLocal('name', val)
      // console.log(storage.getLocal('name'))
      this.$router.push({ name: 'regionCoordinatorList' })
    },
    // 小区域维护
    showLittleAreaEdit (littleAreaModel, row) {
      if (littleAreaModel === 'E') {
        let item = JSON.parse(JSON.stringify(row))
        let areaCommissionerIds = []
        let areaMarketerIds = []
        let areaContacts = []
        // 用于数据比对
        let commissioner = []
        let businessPeople = []
        let contacts = []
        if (item.areaCommissioner !== undefined) {
          item.areaCommissioner.forEach(issue => {
            areaCommissionerIds.push(issue.areaCommissionerId)
          })
          item.areaCommissioner.forEach(issue => {
            commissioner.push({
              areaCommissionerId: issue.areaCommissionerId,
              areaCommissionerName: issue.areaCommissionerName
            })
          })
        }
        if (item.marketer !== undefined) {
          item.marketer.forEach(issue => {
            areaMarketerIds.push(issue.areaMarketerId)
          })
          item.marketer.forEach(issue => {
            businessPeople.push({
              areaMarketerId: issue.areaMarketerId,
              areaMarketerName: issue.areaMarketerName
            })
          })
        }
        if (item.areaContacts !== undefined) {
          item.areaContacts.forEach(issue => {
            areaContacts.push(issue.contactsId)
          })
          item.areaContacts.forEach(issue => {
            contacts.push({
              areaContactsId: issue.contactsId,
              areaContactsName: issue.contactsName
            })
          })
        }
        // let shortName = ''
        // if (item.littleAreaName && item.littleAreaName.indexOf('-') >= 0) {
        //   shortName = item.littleAreaName.split('-')[0]
        // }
        let littleAreaItem = {
          littleAreaId: item.littleAreaKeyId,
          shortName: item.shortName,
          areaName: item.littleAreaName,
          coreCompanyId: item.coreCompanyId,
          bigAreaKeyId: item.bigAreaKeyId,
          coreCompanyName: item.coreCompanyName,
          areaNumber: item.areaNumber,
          areaCommissionerIds: areaCommissionerIds,
          areaMarketerIds: areaMarketerIds,
          areaContacts: areaContacts,
          commissioner: commissioner,
          businessPeople: businessPeople,
          contacts: contacts
        }
        this.littleAreaItem = littleAreaItem
      } else {
        this.littleAreaItem = {
          littleAreaId: '',
          areaName: '',
          coreCompanyId: '',
          bigAreaKeyId: '',
          shortName: '',
          coreCompanyName: '',
          areaNumber: '',
          areaCommissionerIds: [],
          areaMarketerIds: [],
          areaContacts: [],
          commissioner: [],
          businessPeople: [],
          contacts: []
        }
      }
      this.littleAreaModel = littleAreaModel
      this.littleAreaVisable = true
    },
    // 区域专员履历查看
    showAreaCommissioner (littleAreaKeyId) {
      this.areaCommissionerVisable = true
      this.areaCommissionerItem = { littleAreaKeyId: littleAreaKeyId }
    },
    // 区域项目公司管理
    showCompanyEdit (row) {
      this.companyItem = row
      this.CompanyVisible = true
    },
    // 区域对接人编辑
    showContacts (val, data) {
      this.api.getAccountId({ employeeId: val.contactsId }).then(res => {
        if (res && res.data) {
          this.item = Object.assign({ tagCode: '61' }, data, res.data)
          this.item.enterpriseId = this.item.coreCompanyId
          this.contactsEditModel = 'E'
          this.contactsEditVisable = true
        } else {
          this.api.GetAreaContact({ employeeId: val.contactsId }).then(res => {
            if (res && res.data) {
              if (!res.data.deptId || res.data.deptId.toString() === '0') {
                this.$set(res.data, 'deptId', '')
              }
              if (!res.data.gender || res.data.gender.toString() === '0') {
                this.$set(res.data, 'gender', '')
              }
              this.item = Object.assign({}, { tagCode: '61', employeeType: '61' }, data, res.data)
              this.item.enterpriseId = this.item.coreCompanyId
              this.showDetail = true
              this.contactsEditModel = 'E'
            }
          })
        }
      })
    },
    // 区域账号查看
    showContact (item, row) {
      this.contactEditVisable = true
      this.contactItem = {
        keyId: item.keyId,
        companyId: row.coreCompanyId,
        account: item.account
      }
    },
    // 区域拆分
    showSplitEdit () {
      this.editModel = 'C'
      this.item = {}
      this.splitEditDetail = true
    },
    // 复选框勾选数据
    selectRowChange (val) {
      this.selectedRows = val
    },
    // 批量删除
    delBatch () {
      if (this.selectedRows.length === 0) {
        this.warning(this.$i18n.messages[this.$i18n.locale].common.delSelectedTip)
        return
      }
      let arr = this.selectedRows.map(it => {
        return it.littleAreaKeyId
      })
      let $this = this
      $this.$confirm(this.$i18n.messages[this.$i18n.locale].common.confirmTip, this.$i18n.messages[this.$i18n.locale].common.warningTip, {
        type: 'warning'
      }).then(() => {
        $this.api.dels({ ids: arr, delType: '1' }).then(res => {
          if (res && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].common.delSuccess)
            $this.handleFilter()
          } else {
            $this.error(this.$i18n.messages[this.$i18n.locale].common.delFailure)
          }
        })
      })
    },
    // 导入查询
    importSuccess (returnData) {
      let $this = this
      let tip = this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo
      let fm = new FormData()
      fm.append('file', returnData)
      businessRegionInfoApi.companyView.fileParse(fm).then(res => {
        if (res && res.data) {
          if (res.data.length > 0) {
            $this.conflictData = res.data
            $this.importVisible = true
          } else {
            $this.success(tip.importSuccess)
            $this.handleFilter()
          }
          // let count = 0
          // res.data.forEach(it => {
          //   if (!it.flag) {
          //     count++
          //   }
          // })
          // if (count > 0) {
          //   $this.conflictData = res.data
          //   $this.importVisible = true
          // } else {
          //   let saveData = res.data
          //   for (let i = 0; i < res.data.length; i++) {
          //     // 将Map转换为List对象，构造每个 区域人员 的数据结构
          //     let areaList = this.formatArea(res.data[i])
          //     // 将Map转换为List对象，构造每个 业务经理 的数据结构
          //     let businessList = this.formatBusiness(res.data[i])
          //     saveData[i].areaCommissioner = []
          //     saveData[i].businessCommissioner = []
          //     // 区域人员
          //     for (let j = 0; j < areaList.length; j++) {
          //       let p = {
          //         keyId: '',
          //         name: ''
          //       }
          //       p.keyId = areaList[j].dataList[0].keyId
          //       p.name = areaList[j].commissioner
          //       saveData[i].areaCommissioner.push(p)
          //     }
          //     // 业务经理
          //     for (let n = 0; n < businessList.length; n++) {
          //       let m = {
          //         keyId: '',
          //         name: ''
          //       }
          //       m.keyId = businessList[n].dataList[0].keyId
          //       m.name = businessList[n].business
          //       saveData[i].businessCommissioner.push(m)
          //     }
          //   }
          //   businessRegionInfoApi.companyView.import(saveData).then(res => {
          //     if (res && res.data) {
          //       $this.success(tip.importSuccess)
          //     }
          //   })
          // }
        }
      })
    },
    // 区域人员--Map转List对象
    formatArea (data) {
      let areaData = []
      if (!this.UtilJs.isEmpty(data.areaCommissioner)) {
        Object.keys(data.areaCommissioner).forEach(it => {
          let info = {
            commissioner: '',
            dataList: []
          }
          info.commissioner = it
          info.dataList = data.areaCommissioner[it]
          areaData.push(info)
        })
      }
      return areaData
    },
    // 业务经理--Map转List对象
    formatBusiness (data) {
      let businessData = []
      if (!this.UtilJs.isEmpty(data.businessCommissioner)) {
        for (let key of Object.keys(data.businessCommissioner)) {
          let info = {
            business: '',
            dataList: []
          }
          info.business = key
          info.dataList = data.businessCommissioner[key]
          businessData.push(info)
        }
      }
      return businessData
    },
    // 区域合并
    regionMerge () {
      this.regionMergeVisible = true
    },
    // 切割中文英文逗号
    cutComma (str) {
      str = str.replace(new RegExp('[,，]+', 'gm'), ',')
      str = (str.substring(str.length - 1) === ',') ? str.substring(0, str.length - 1) : str
      return str
    }
  },
  watch: {
    // 级联重置
    'queryParas.coreCompanyId' (now, old) {
      if (now !== old) {
        this.$set(this.queryParas, 'bigAreaId', '')
        this.$set(this.queryParas, 'littleAreaId', '')
      }
    },
    // 级联重置
    'queryParas.bigAreaId' (now, old) {
      if (now !== old) {
        this.$set(this.queryParas, 'littleAreaId', '')
      }
    },
    'queryParas.littleAreaId' (now, old) {
      if (now !== old) {
        this.$set(this.queryParas, 'areaCommissionerId', '')
      }
    }
  }
}
</script>

<style scoped lang="scss" src="@/styles/cyjg/businessRegionInfo/businessRegionInfoList.scss">
</style>
