<!--外部机构页面-->
<template>
<div>
  <el-tabs v-model="activeName" type="card" class="myeltab dueFeedback marginCard" @tab-click="tabClick">
    <el-tab-pane v-for="item in tabList" :key="item.index" :name="item.index">
      <span slot="label">{{item.label}}</span>
    </el-tab-pane>
  </el-tabs>
  <div class="outsideManageMain">
    <up-down-layout :handleFlag.sync="handleFlag" :headerVisible="false">
      <template slot="table">
        <external-transition :title="$t('outsideManageMain.title')" :isCollapse="true">
          <template slot="transition">
            <search-form :formValue.sync="queryParas"
                          searchPerms="search"
                          resetPerms="reset"
                          @clearParam="clearParam"
                          @handleFilter="handleFilter"
                          :componentList="componentList">
            </search-form>
              <data-table :loadCount.sync="loadCount"
                          :api="outsideManageApi"
                          :sourceData.sync="sourceData"
                          :queryParas="queryParas"
                          :showPage="false"
                          :columns="columns"
                          :menuFlag="false"
                          @handleFilter="handleFilter"
                          @getTableData="getTableData"
                          max-height="190"
                          @current-change="handleCurrentChange"
                          ref="dataTable">
                <template slot="showFlag" slot-scope="scope">
                  <div class="iconfont icontanhao1 fengxian2" v-if="scope.data.row.showFlag==='1'"></div>
                </template>
                <template slot="currentShow" slot-scope="scope">
                  <div class="iconfont icongou showColor"  v-if="isSelected === scope.data.row.keyId"></div>
                </template>
                <template slot="dueDates" slot-scope="scope">
                  <span-plus :index="scope.data.$index" :text="scope.data.row.dueDates"></span-plus>
                </template>
              </data-table>
            </template>
          </external-transition>
          <!--tab区域-->
          <div v-if="dataShowFlag">
            <keep-alive>
              <outside-manage-sub :activeName="activeName" :projectParam="params"></outside-manage-sub>
            </keep-alive>
          </div>
        </template>
     </up-down-layout>
  </div>
</div>
</template>
<script>
import BasePage from '@/pages/basePage'
import { searchForm, upDownLayout, DataTable, SpanPlus } from 'newepoch-components'
import outsideManageSub from '@/pages/assetoutfeedback/outsideManage/outsideManageSub'
import externalTransition from '@/components/element/assetoutfeedback/externalTransition'
import outProjectSelectList from '@/components/element/assetoutfeedback/outProjectSelectList'
import outsideManageApi from '@/api/assetoutfeedback/outsideManage/outsideManageApi'
import * as format from '@/filters/index'
export default {
  extends: new BasePage(),
  components: {
    searchForm,
    upDownLayout,
    DataTable,
    SpanPlus,
    outProjectSelectList,
    outsideManageSub,
    externalTransition
  },
  name: 'outsideManageMain',
  data () {
    return {
      activeName: '',
      isSelected: '', // 选中
      currentRow: '',
      handleFlag: false,
      dataShowFlag: false,
      tabList: [
        {
          index: '0',
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.dueDiligenceFeedback, // 尽调反馈
          dealing: '1',
          component: outsideManageSub
        }
      ],
      componentList: [
        {
          // 产品名称
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.projectName,
          disabled: false,
          value: 'projectId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '70px',
          clearable: true,
          name: 'projectId',
          componentName: outProjectSelectList
        },
        {
          // 期数
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.periods,
          disabled: false,
          value: 'periods',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '70px',
          clearable: true,
          name: 'periods',
          componentName: 'el-input'
        }
      ],
      columns: [
        {
          // 是否已处理
          prop: 'showFlag',
          slot: true,
          align: 'center',
          width: '50px',
          label: ''
        },
        {
          // 当前显示
          prop: 'currentShow',
          slot: true,
          align: 'center',
          width: '80px',
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.currentShow
        },
        {
          // 产品名称
          prop: 'projectName',
          align: 'left',
          width: '250px',
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.projectName
        },
        {
          // 期数
          prop: 'periods',
          align: 'center',
          width: '70px',
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.periods
        },
        {
          // 拟入池笔数
          prop: 'estimateAssetTotal',
          align: 'center',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.estimateAssetTotal
        },
        {
          // 现笔数
          prop: 'realAssetTotal',
          align: 'center',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.realAssetTotal
        },
        {
          // 保理总金额
          prop: 'totalAmount',
          align: 'right',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.totalAmount,
          format: (row) => {
            return format.thousandFilter(row.totalAmount, 2)
          }
        },
        {
          // 已退单笔数
          prop: 'returnAssetTotal',
          align: 'center',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.returnAssetTotal
        },
        {
          // 账款到期日
          prop: 'dueDates',
          align: 'left',
          width: '200px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.dueDates

        },
        {
          // 定稿时间
          prop: 'finalizeDate',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.finalizeDate,
          format: (row) => {
            return format.formatDateNull(row.finalizeDate, 'yyyy-MM-dd hh:mm:ss')
          }
        },
        {
          // 金额最大的单笔资产占总金额比重
          prop: 'maxAountPercent',
          align: 'center',
          width: '240px',
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.maxAountPercent,
          format: (row) => {
            return row.maxAountPercent * 100.00 + '%'
          }
        },
        {
          // 第一笔中登时间
          prop: 'firstRegisterDate',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].outsideManageMain.firstRegisterDate,
          format: (row) => {
            return format.formatDateNull(row.firstRegisterDate, 'yyyy-MM-dd hh:mm:ss')
          }
        }
      ],
      sourceData: [],
      projectInfo: {},
      params: {}
    }
  },
  methods: {
    handleCurrentChange (val) {
      if (val) {
        this.currentRow = val
        this.isSelected = val.keyId
        this.params = {
          projectName: val.projectName,
          projectId: val.projectId,
          periods: val.periods.toString()
        }
      }
    },
    // 默认选中第一行
    getTableData (data) {
      if (data && data.length > 0) {
        this.dataShowFlag = true
        this.isSelected = data[0].keyId
        this.params = {
          projectName: data[0].projectName,
          projectId: data[0].projectId,
          periods: data[0].periods.toString()
        }
      } else {
        this.dataShowFlag = false
      }
    },
    tabClick () {

    }
  },
  mounted () {
    this.handleFilter()
  },
  computed: {
    outsideManageApi () {
      return outsideManageApi.getOutsideList
    },
    outsideManageInfoApi () {
      return outsideManageApi.getOutsideInfo
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/assetoutfeedback/common.scss';
</style>
<style lang="scss">
.dueFeedback .el-tabs__nav{
  padding-left: 0 !important;
}
</style>
