<!-- 项目公司信息管理--一览 -->
<template>
  <div>
    <up-down-layout :header="$t('enterpriseInfoManage.supplierInfoManage.head')" :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.supplierInfoManage.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.supplierInfoManage.create')"
                             icon="iconfont iconxinzeng" size="medium" @click="showCreate"
                             :menuCode="menuId" perms="prCreate" :openPerms="true"></auth-button>
                <auth-button type="danger" :label="$t('enterpriseInfoManage.supplierInfoManage.del')"
                             icon="iconfont iconshanchu" size="medium" @click="delBatch"
                             :menuCode="menuId" perms="prDelete" :openPerms="true"></auth-button>
              </el-col>
            </el-row>
          </template>
          <!-- 企业名称 -->
          <template slot="enterpriseName" slot-scope="scope">
            <div class="divTable">
              <el-tooltip v-if="scope.data.row.blackGreyReason && scope.data.row.blackGreyReason !== ''" placement="top">
                <div slot="content">
                  {{$t('enterpriseInfoManage.projCompanyInfoManage.reasonsSettingUp')}}：{{scope.data.row.blackGreyReason}} <br/>
                  {{$t('enterpriseInfoManage.projCompanyInfoManage.effectTime')}}：{{scope.data.row.tagEffectiveTime | formatCheckDatetime}}
                </div>
                <i :class="listClass(scope.data.row)" v-show="scope.data.row.blackGreyTag === '2' || scope.data.row.blackGreyTag === '1'"></i>
              </el-tooltip>
              <span :class="{spanInfo: !scope.data.row.blackGreyReason}">{{scope.data.row.enterpriseName}}</span>
            </div>
          </template>
          <!-- 业务状态 -->
          <template slot="bizStatus" slot-scope="scope">
            <el-tooltip v-if="scope.data.row.businessInfo && scope.data.row.businessInfo !== ''" placement="top" class="vlank">
              <div slot="content">
                {{scope.data.row.businessInfo}}
              </div>
              <span>{{scope.data.row.bizStatus | formatDict('biz_status')}}</span>
            </el-tooltip>
            <span v-else>{{scope.data.row.bizStatus | formatDict('biz_status')}}</span>
          </template>
          <!-- 核心企业 -->
          <template slot="coreEnterpriseName" slot-scope="scope">
            <expand-collapse :sourceData="sourceData" :colProp="'enterpriseCoreRelList'"
                             :valueProp="'coreEnterpriseName'" :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.enterpriseCoreRelList" :key="index">-->
                <!--<span>{{item.coreEnterpriseName}}</span>-->
              <!--</el-row>-->
            <!--</div>-->
          </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">-->
                <!--<span>{{item.account}}</span>-->
              <!--</el-row>-->
            <!--</div>-->
          </template>
          <!-- 合同 -->
          <template slot="contractName" slot-scope="scope">
            <expand-collapse :sourceData="sourceData" :colProp="'assetContractInfoDTOList'"
                             :valueProp="'contractName'" :rowIndex="scope.data.$index"></expand-collapse>
          </template>
          <!-- 联系人名称 -->
          <template slot="employeeName" slot-scope="scope">
            <expand-collapse :sourceData="sourceData" :colProp="'employeeList'"
                             :valueProp="'employeeName'" :rowIndex="scope.data.$index"></expand-collapse>
          </template>
          <!-- 手机号 -->
          <template slot="telephone" slot-scope="scope">
            <expand-collapse :sourceData="sourceData" :colProp="'employeeList'"
                             :valueProp="'telephone'" :rowIndex="scope.data.$index"></expand-collapse>
          </template>
          <!-- 区域专员 -->
          <template slot="modifyUserId" slot-scope="scope">
            <expand-collapse :sourceData="sourceData" :colProp="'commissionerList'"
                             :valueProp="'companyCommissionerName'" :rowIndex="scope.data.$index"></expand-collapse>
          </template>
          <!-- 操作 -->
          <el-table-column :label="$t('common.operate')" align="center" min-width="180px" fixed="right">
            <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="openList(scope.$index,scope.row)"></auth-button>-->
              <auth-button size="mini" class="iconCircle" icon="iconfont iconbianji" :title="$t('common.edit')"
                           @click="showEdit(scope.row)"
                           :menuCode="menuId" perms="prEdit" :openPerms="true"></auth-button>
              <auth-button size="mini" class="iconCircle" icon="iconfont icongaikuang" @click="showProfileEdit(scope.row)"
                           :title="$t('enterpriseInfoManage.supplierInfoManage.enterpriseProfile')"
                           :menuCode="menuId" perms="prSurvey" :openPerms="true"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
    </up-down-layout>
    <account-details-edit :visible.sync="accountFlag" :form="item" :editModel="accountModel"></account-details-edit>
    <contact-maintain-edit :visible.sync="showContact" :menuId="menuId" @createSuccess="createSuccess" :form="item" :editModel="editModel" :regMsg="regMsg"></contact-maintain-edit>
    <pro-company-enterprise-profile-edit :visible.sync="showProfile" :form="item" :editModel="profileModel"></pro-company-enterprise-profile-edit>
  </div>
</template>

<script>
import BasePage from '@/pages/basePage'
import storage from '@/utils/storage'
import * as format from '@/filters/index.js'
import { upDownLayout, searchForm, DataTable, authButton, ExpandCollapse } from 'newepoch-components'
import projCompanyInfoManageApi from '@/api/enterpriseInfoManage/projCompanyInfoManageApi.js'
import supplierInfoManageApi from '@/api/enterpriseInfoManage/supplierInfoManageApi.js'
import SelectProjContract from '@/components/element/enterpriseInfoManage/SelectProjContract.vue'
import SelectArea from '@/components/element/enterpriseInfoManage/SelectArea.vue'
import ContactMaintainEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/contactMaintainEdit.vue'
import AccountDetailsEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/accountDetailsEdit.vue'
import ProCompanyEnterpriseProfileEdit from '@/pages/enterpriseInfoManage/projCompanyInfoManage/proCompanyEnterpriseProfileEdit.vue'
import EnterpriseMaintainEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/enterpriseMaintainEdit.vue'
import mixin from '@/pages/mixin.js'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'projCompanyInfoManageList',
  components: {
    upDownLayout,
    searchForm,
    DataTable,
    authButton,
    ContactMaintainEdit,
    AccountDetailsEdit,
    SelectArea,
    SelectProjContract,
    ProCompanyEnterpriseProfileEdit,
    EnterpriseMaintainEdit,
    ExpandCollapse
  },
  data () {
    return {
      tableId: 'projCompanyInfoManageList',
      handleFlag: true,
      menuFlag: true,
      showContact: false,
      showSelection: true,
      accountFlag: false,
      showProfile: false,
      accountModel: '',
      profileModel: '',
      operateBtnLayout: '',
      sourceData: [],
      queryParas: {
        tagCode: '150'
        // enterpriseName: '',
        // companyCommissionerName: '',
        // employeeName: '',
        // telephone: '',
        // coreEnterpriseName: '',
        // regionCode: [],
        // optDifficultyLevel: '',
        // bizStatus: '',
        // account: ''
      },
      componentList: [
        // 企业名称
        {
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.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.projCompanyInfoManage.regionalCommissioner,
          disabled: false,
          clearable: true,
          value: 'companyCommissionerName',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '130px',
          componentName: 'el-input'
        },
        // 联系人名称
        {
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.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.supplierInfoManage.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.supplierInfoManage.coreEnterprise,
          disabled: false,
          clearable: true,
          value: 'coreEnterpriseName',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '130px',
          componentName: 'el-input'
        },
        // 合同(下拉组件)
        {
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.hetong,
          clearable: true,
          multiple: true,
          value: 'preContractId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '130px',
          componentName: SelectProjContract
        },
        // 操作难度登记(字典)
        {
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.difficultLevel,
          disabled: false,
          clearable: true,
          store: this.$store,
          value: 'optDifficultyLevel',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '130px',
          componentName: 'SelectDictionary',
          dictTypeCode: 'opt_difficulty_level'
        },
        // 业务状态(字典)
        {
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.businessStatus,
          disabled: false,
          clearable: true,
          store: this.$store,
          value: 'bizStatus',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '130px',
          componentName: 'SelectDictionary',
          dictTypeCode: 'biz_status'
        },
        // 登录账号
        {
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.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.supplierInfoManage.enterpriseName,
          width: '150px',
          slot: true
        },
        // 企业性质
        {
          prop: 'enterpriseNature',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.enterpriseProperty,
          width: '150px',
          format: (row) => {
            if (row.enterpriseNature.toString() === '0' || row.enterpriseNature.toString() === '-1') return ''
            return format.formatDict(row.enterpriseNature, 'enterprise_nature')
          }
        },
        // 业务状态
        {
          prop: 'bizStatus',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.businessStatus,
          width: '150px',
          slot: true
        },
        // 是否合作方
        {
          prop: 'partnerFlag',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.projCompanyInfoManage.partnerOrNot,
          width: '150px',
          format: (row) => { return format.formatDict(row.partnerFlag, 'ZD0003') }
        },
        // 操作难度
        {
          prop: 'optDifficultyLevel',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.difficultLevel,
          width: '150px',
          format: (row) => { return format.formatDict(row.optDifficultyLevel, 'opt_difficulty_level') }
        },
        // 核心企业
        {
          prop: 'coreEnterpriseName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.coreEnterprise,
          width: '150px',
          slot: true
        },
        // 登录账号
        {
          prop: 'account',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.loginAccount,
          width: '150px',
          slot: true
        },
        // 合同
        {
          prop: 'contractName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.hetong,
          width: '200px',
          slot: true
        },
        // 联系人名称
        {
          prop: 'employeeName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.contactsName,
          width: '150px',
          slot: true
        },
        // 手机号
        {
          prop: 'telephone',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.phone,
          width: '150px',
          slot: true
        },
        // 区域专员
        {
          prop: 'modifyUserId',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.projCompanyInfoManage.regionalCommissioner,
          width: '150px',
          slot: true
        }
      ]
    }
  },
  computed: {
    api () {
      return projCompanyInfoManageApi.projCompanyInfoApi
    }
  },
  methods: {
    listClass (row) {
      if (row.blackGreyTag === '2') {
        return 'el-icon-warning gray-text-Icon'
      } else if (row.blackGreyTag === '1') {
        return 'el-icon-warning black-text-Icon'
      }
    },
    // 展开 收起
    openList (index, data) {
      if (data.showAllFlagStatus) {
        this.$set(this.sourceData[index], 'showAllFlagStatus', false)
      } else {
        this.$set(this.sourceData[index], 'showAllFlagStatus', true)
      }
    },
    // 复选框勾选数据
    selectRowChange (val) {
      this.selectedRows = val
    },
    // 企业概况界面
    showProfileEdit (data) {
      if (this.UtilJs.isEmpty(data.creditCode)) {
        return this.warning(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.timeoutInfo)
      }
      this.profileModel = 'V'
      this.item = Object.assign({}, data)
      this.showProfile = true
    },
    // 新增联系人界面
    showCreate () {
      this.editModel = 'C'
      this.item = { tagCode: '150', loading: false }
      this.showContact = true
    },
    // 主账号详情界面
    showAccount (data) {
      this.accountModel = 'C'
      this.item = Object.assign({}, data)
      this.accountFlag = true
    },
    // 编辑界面
    showEdit (data) {
      if (this.UtilJs.isEmpty(data.creditCode)) {
        return this.warning(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.timeoutInfo)
      }
      this.$set(data, 'tagCode', '150')
      this.$set(data, 'menuId', this.menuId)
      storage.setLocal('params', data)
      this.$router.push({
        name: 'projCompanyInfoManageEdit'
      })
    },
    // 批量删除
    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: '150' }).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(() => {})
    },
    // 重置
    clearParam () {
      this.queryParas = {
        pageIndex: 1,
        pageSize: 10,
        tagCode: '150',
        enterpriseName: '',
        companyCommissionerName: '',
        employeeName: '',
        telephone: '',
        coreEnterpriseName: '',
        regionCode: [],
        optDifficultyLevel: '',
        bizStatus: '',
        account: ''
      }
    },
    // 新增成功调查询
    createSuccess () {
      this.handleFilter()
    }
  },
  watch: {
    sourceData () {
      if (this.sourceData.length > 0) {
        this.sourceData.forEach((it, index) => {
          let day = 0
          if (it.lastLadingTime && it.lastLadingTime !== -2209017600000) {
            day = format.timeAgo(it.lastLadingTime)
          }
          this.$set(this.sourceData[index], 'businessInfo', '未提单天数' + day + '天')
          // this.$set(this.sourceData[index], 'bizStatus', '1')
          if (it.employeeList.length > 3 || it.enterpriseInfoRegionList.length > 3 || it.enterpriseAccountPageList.length > 3 || it.enterpriseCoreRelList.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/projCompanyInfoManage/projCompanyInfoManageList.scss';
</style>
