<!-- 核心企业信息管理 -->
<template>
  <div>
    <up-down-layout :handleFlag.sync="handleFlag">
      <search-form :componentList="componentList" :formValue.sync="queryParas"
                   @handleFilter="handleFilter" @clearParam="clearParam" slot="query">
      </search-form>
      <template slot="table">
        <data-table :api="api" :headTitle="$t('enterpriseInfoManage.coreEnterpriseInfoManage.tableHead')" :operateBtnLayout="operateBtnLayout"
                    :queryParas="queryParas" :sourceData.sync="sourceData" :showSelection="showSelection" :loadCount.sync="loadCount"
                    v-bind="elHeightObj"
                    :tableId="tableId"
                    :menuFlag="menuFlag" @selectRowChange="selectRowChange" :columns="columns">
          <template slot="headButton">
            <el-row>
              <el-col :span="24" class="btn-right">
                <auth-button type="primary" :label="$t('enterpriseInfoManage.coreEnterpriseInfoManage.create')"
                             icon="iconfont iconxinzeng" size="medium" @click="showCreate"
                             :menuCode="menuId" perms="coCreate" :openPerms="true"></auth-button>
                <auth-button type="danger" :label="$t('enterpriseInfoManage.coreEnterpriseInfoManage.del')"
                             icon="iconfont iconshanchu" size="medium" @click="delBatch"
                             :menuCode="menuId" perms="coDelete" :openPerms="true"></auth-button>
              </el-col>
            </el-row>
          </template>
          <!-- 登录账号 -->
          <template slot="account" slot-scope="scope">
            <expand-collapse :sourceData="sourceData" :colProp="'enterpriseAccountPageList'"
                             :valueProp="'account'" :rowIndex="scope.data.$index"></expand-collapse>
            <!--<div class="base_clomuns" :class="{ 'more': scope.data.row.showAllFlagStatus}">-->
              <!--<el-row v-for="(item, index) in scope.data.row.enterpriseAccountPageList" :key="index">-->
                <!--&lt;!&ndash;              <span v-if="scope.data.row.accountTypes[index].accountType === '1'" class="account-color"&ndash;&gt;-->
                <!--&lt;!&ndash;                    @click="showAccount(scope.data.row.loginAccount[index])">{{item.loginAccountName}}</span>&ndash;&gt;-->
                <!--<span>{{item.account}}</span>-->
              <!--</el-row>-->
            <!--</div>-->
          </template>
          <!-- 联系人名称 -->
          <template slot="employeeName" slot-scope="scope">
            <expand-collapse :sourceData="sourceData" :colProp="'employeeList'"
                             :valueProp="'employeeName'" :rowIndex="scope.data.$index"></expand-collapse>
            <!--<div class="base_clomuns" :class="{ 'more': scope.data.row.showAllFlagStatus}">-->
              <!--<el-row v-for="(item, index) in scope.data.row.employeeList" :key="index">-->
                <!--<span>{{item.employeeName}}</span>-->
              <!--</el-row>-->
            <!--</div>-->
          </template>
          <!-- 手机号 -->
          <template slot="telephone" slot-scope="scope">
            <expand-collapse :sourceData="sourceData" :colProp="'employeeList'"
                             :valueProp="'telephone'" :rowIndex="scope.data.$index"></expand-collapse>
            <!--<div class="base_clomuns" :class="{ 'more': scope.data.row.showAllFlagStatus}">-->
              <!--<el-row v-for="(item, index) in scope.data.row.employeeList" :key="index">-->
                <!--<span>{{item.telephone}}</span>-->
              <!--</el-row>-->
            <!--</div>-->
          </template>
          <!-- 操作 -->
          <el-table-column :label="$t('common.operate')" align="center" width="110px">
            <template slot-scope="scope">
              <!--<auth-button v-if="scope.row.showFlagButton" size="small" class="iconCircle"-->
                           <!--:icon="scope.row.showAllFlagStatus ? 'iconfont iconshang' :'iconfont iconxia'"-->
                           <!--:title="scope.row.showAllFlagStatus ? $t('common.retract') : $t('common.open') "-->
                           <!--@click="toggleList(scope.$index,scope.row)"></auth-button>-->
              <auth-button class="iconCircle" icon="iconfont iconbianji" :title="$t('common.edit')"
                           @click="showEdit(scope.row)" :menuCode="menuId" perms="coEdit" :openPerms="true"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
    </up-down-layout>
    <contact-maintain-edit :visible.sync="showContact" :menuId="menuId" @createSuccess="createSuccess" :form="item" :editModel="editModel" :regMsg="regMsg"></contact-maintain-edit>
  </div>
</template>

<script>
import BasePage from '@/pages/basePage'
import storage from '@/utils/storage'
import * as format from '@/filters/index.js'
import coreEnterpriseInfoManageApi from '@/api/enterpriseInfoManage/coreEnterpriseInfoManageApi.js'
import ContactMaintainEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/contactMaintainEdit.vue'
import { upDownLayout, searchForm, DataTable, authButton, ExpandCollapse } from 'newepoch-components'
import supplierInfoManageApi from '@/api/enterpriseInfoManage/supplierInfoManageApi.js'
import mixin from '@/pages/mixin.js'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'coreEnterpriseInfoManageList',
  components: {
    upDownLayout,
    searchForm,
    DataTable,
    authButton,
    ContactMaintainEdit,
    ExpandCollapse
  },
  data () {
    return {
      tableId: 'coreEnterpriseInfoManageList',
      handleFlag: true,
      menuFlag: true,
      showSelection: true,
      showContact: false,
      operateBtnLayout: '',
      sourceData: [],
      queryParas: {
        tagCode: '60'
        // pageIndex: 1,
        // pageSize: 10,
        // enterpriseName: '',
        // employeeName: '',
        // telephone: '',
        // account: ''
      },
      componentList: [
        // 企业名称
        {
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.coreEnterpriseInfoManage.enterpriseName,
          disabled: false,
          clearable: true,
          value: 'enterpriseName',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '130px',
          componentName: 'el-input'
        },
        // 联系人名称
        {
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.coreEnterpriseInfoManage.contactsName,
          disabled: false,
          clearable: true,
          value: 'employeeName',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '130px',
          componentName: 'el-input'
        },
        // 联系人手机号
        {
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.coreEnterpriseInfoManage.contactsPhone,
          disabled: false,
          clearable: true,
          value: 'telephone',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '130px',
          componentName: 'el-input'
        },
        // 登录账号
        {
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.coreEnterpriseInfoManage.loginAccount,
          disabled: false,
          clearable: true,
          value: 'account',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '130px',
          componentName: 'el-input'
        }
      ],
      columns: [
        // 企业名称
        {
          prop: 'enterpriseName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.coreEnterpriseInfoManage.enterpriseName,
          width: ''
        },
        // 企业性质
        {
          prop: 'enterpriseNature',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.coreEnterpriseInfoManage.enterpriseProperty,
          width: '',
          format: (row) => {
            if (row.enterpriseNature.toString() === '0' || row.enterpriseNature.toString() === '-1') return ''
            return format.formatDict(row.enterpriseNature, 'enterprise_nature')
          }
        },

        // 联系人名称
        {
          prop: 'employeeName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.coreEnterpriseInfoManage.contactsName,
          width: '',
          slot: true
        },
        // 登录账号
        {
          prop: 'account',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.coreEnterpriseInfoManage.loginAccount,
          width: '',
          slot: true
        },
        // 手机号
        {
          prop: 'telephone',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.coreEnterpriseInfoManage.phone,
          width: '',
          slot: true
        }
      ]
    }
  },
  computed: {
    api () {
      return coreEnterpriseInfoManageApi.coreEnterpriseInfo
    }
  },
  methods: {
    // 展开，收起
    toggleList (index, data) {
      if (data.showAllFlagStatus) {
        this.$set(this.sourceData[index], 'showAllFlagStatus', false)
      } else {
        this.$set(this.sourceData[index], 'showAllFlagStatus', true)
      }
    },
    // 打开新增页面
    showCreate () {
      this.editModel = 'C'
      this.item = { tagCode: '60', loading: false }
      this.showContact = true
    },
    // 获取勾选数据
    selectRowChange (row) {
      this.selectedRows = row
    },
    // 批量删除
    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.enterpriseId
      })
      let $this = this
      $this.$confirm(this.$i18n.messages[this.$i18n.locale].common.confirmTip, this.$i18n.messages[this.$i18n.locale].common.warningTip, {
        type: 'warning'
      }).then(() => {
        supplierInfoManageApi.enterpriseDeleteApi.dels({ ids: arr, tagCode: '60' }).then(res => {
          if (res && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].common.delSuccess)
            $this.onDeletedRowHandle()
          } else {
            $this.error(this.$i18n.messages[this.$i18n.locale].common.delFailure)
          }
        })
      }).catch(() => {})
    },
    // },
    // 打开编辑页面
    showEdit (data) {
      if (this.UtilJs.isEmpty(data.creditCode)) {
        return this.warning(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.timeoutInfo)
      }
      this.$set(data, 'tagCode', '60')
      this.$set(data, 'menuId', this.menuId)
      storage.setLocal('params', data)
      this.$router.push({
        name: 'coreEnterpriseInfoManageEdit'
      })
    },
    // 重置
    clearParam () {
      this.queryParas = {
        pageIndex: 1,
        pageSize: 10,
        tagCode: '60',
        enterpriseName: '',
        employeeName: '',
        telephone: '',
        account: ''
      }
    },
    // 新增成功调查询
    createSuccess () {
      this.handleFilter()
    }
  },
  watch: {
    sourceData () {
      if (this.sourceData.length > 0) {
        this.sourceData.forEach((it, index) => {
          if (it.enterpriseAccountPageList.length > 3 || it.employeeList.length > 3) {
            this.$set(this.sourceData[index], 'showFlagButton', true)
          } else {
            this.$set(this.sourceData[index], 'showFlagButton', false)
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import '~@/styles/enterpriseInfoManage/coreEnterpriseInfoManage/coreEnterpriseInfoManageList.scss';
</style>
