<template>
  <div class="customer-info">
    <ol class="breadcrumb">
      <li>资方管理</li>
      <li>客户支用信息</li>
    </ol>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="待我处理" name="pending"></el-tab-pane>
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <div class="tempalte-content">
        <div class="search">
          <div class="left"></div>
          <div class="right">
            <div v-if="activeName === 'all'">
              <span>到期日：</span>
              <el-date-picker
                v-model="search.date"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
            <div>
              <el-input style="width: 250px" v-model="search.fastSearch" placeholder="请输入资方名称/客户名称" clearable></el-input>
            </div>
            <div class="leftBtn">
              <el-button type="primary" @click="fetchData('search')">查询</el-button>
            </div>
          </div>
        </div>
        <div class="table-box">
          <el-table :data="tableData" v-loading="loading" :key="tableKey" height="calc(100vh - 0.85rem - 220px)">
            <el-table-column type="index" label="序号"  width="50"></el-table-column>
            <el-table-column prop="institutionName" label="资方名称" :width="activeName === 'pending' ? '220' : '150'">
              <template slot-scope="{row}">
                <el-tooltip class="item" effect="dark" :content="row.institutionName" placement="top">
                  <span class="one-ellipsis">{{ row.institutionName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="customerName" label="客户名称" :width="activeName === 'pending' ? '220' : '150'">
              <template slot-scope="{row}">
                <el-tooltip class="item" effect="dark" :content="row.customerName" placement="top">
                  <span class="one-ellipsis">{{ row.customerName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="contractNumber" label="合同编号">
              <template slot-scope="{row}">
                <el-tooltip class="item" effect="dark" :content="row.contractNumber" placement="top">
                  <span class="one-ellipsis">{{ row.contractNumber }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="quotaDisburseBatch" label="批次号"></el-table-column>
            <el-table-column prop="loanAmountTotal" label="放款金额" v-if="activeName === 'all'" width="180">
              <template slot-scope="{row}">
                <span>{{row.loanAmountTotal}} {{row.currencyCode}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="loanDateList" label="放款日期" v-if="activeName === 'all'" width="140">
              <template slot-scope="{row}">
                <div v-for="(item, index) in row.loanDateList" :key="index"> {{ item }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="expireDate" label="到期日" v-if="activeName === 'all'" width="140"></el-table-column>
            <el-table-column prop="status.name" label="状态"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" content="时间进度轴" placement="top">
                  <i class="iconfont icon-timeAxis" @click="timeAxisClick(row)"></i>
                </el-tooltip>
                <el-tooltip effect="dark" content="审核" placement="top">
                  <i class="iconfont icon-shenhe" @click="modifyClick('approval', row)" v-if="row.status.name === '待审核' && activeName === 'pending'"></i>
                </el-tooltip>
                <el-tooltip effect="dark" content="编辑" placement="top">
                  <i class="iconfont icon-xiugai" v-if="row.status.name === '待编辑' && activeName === 'pending'" @click="modifyClick('edit', row)"></i>
                </el-tooltip>
                <el-tooltip effect="dark" content="查看" placement="top">
                  <i
                    class="iconfont icon-Magnifier"
                    @click="modifyClick('see', row)"
                    v-power="'viewCustomerDisburse'"
                  >
                  </i>
                </el-tooltip>
                <el-tooltip effect="dark" content="资料下载" placement="top">
                  <i
                    class="iconfont icon-xiazai"
                    v-if="row.status.name === '通过' && activeName === 'all'"
                    @click="modifyClick('download', row)"
                    v-power="'downloadCustomerDisburseFile'"
                  >
                  </i>
                </el-tooltip>
                <el-tooltip effect="dark" content="上传合同清单" placement="top">
                  <i
                    class="iconfont icon-shangchuandaochu"
                    v-if="row.status.name === '通过' && activeName === 'all' && row.buttonFlag === true"  @click="modifyClick('contract', row)"
                  >
                  </i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="count" class="pagination">
          <el-pagination
            :page-sizes="[10, 20, 30, 50]"
            :page-size="size"
            :total="count"
            :current-page="page"
            layout="slot, total, sizes, prev, pager, next, jumper"
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-tabs>
    <cy-dialog title="时间进度轴" ref="timeAxisDialog" class="assets-box" top="15vh">
      <time-axis ref="timeAxis" :time-axis-params="timeAxisParams"></time-axis>
    </cy-dialog>
  </div>
</template>

<script>
module.exports = {
  name: 'CustomerDisburseInfo',
  data () {
    return {
      search: {
        date:[],
        fastSearch: '',
        difference: 'pending',
        simpleClassName: 'FinancialCustomerExpenditure'
      },
      activeName: 'pending',
      tableKey: 0,
      deepSearch: {},
      page: 1,
      size: 10,
      count: 40,
      loading: false,
      tableData: [],
      timeAxisParams: {
        businessKey: '',
        businessType: 'FinancialCustomerExpenditure'
      }
    }
  },
  activated() {
    this.fetchData()
  },
  methods:{
    fetchData(type) {
      if(type === 'search') {
        this.page = 1
        this.size = 10
        this.deepSearch = JSON.parse(JSON.stringify(this.search))
      }
      if(Object.keys(this.deepSearch).length !== 0) {
        this.search = JSON.parse(JSON.stringify(this.deepSearch))
      }
      this.loading = true
      const { date } = this.search
      const params = {
        ...this.search,
        startDate:date ? date[0] : '',
        endDate:date ? date[1] : '',
        page: this.page,
        rows: this.size,
      }
      delete params.date
      this.$api.capitalManage.getcustomerDisburseInfoList(params).then(({ data }) => {
        const { rows, records } = data
        this.loading = false
        this.tableData = rows
        this.count = records
      })
    },
    modifyClick(type, row) {
      const { id, taskId } = row
      if(type === 'edit') {
        this.$router.push({ path: 'customerDisburseInfoEdit',query: {
          id,
          taskId
        } })
      }
      if(type === 'approval') {
        this.$router.push({ path: 'customerDisburseInfoApproval', query: {
          businessKey: id,
          taskId
        } })
      }
      if(type === 'see') {
        this.$router.push({ path: 'customerDisburseInfoSee', query: {
          businessKey: id,
          taskId,
          type
        }})
      }
      if(type === 'download') {
        this.$api.capitalManage.customerDisburseInfoDataDownload({ id }).then(res => {
          this.$utils.exportFiles(res, '')
        })
      }
      if(type=='contract') {
        this.$router.push({ path: 'customerDisburseInfoContract',query:{
          businessKey: id,
          taskId
        } })
      }
    },
    timeAxisClick(row) {
      this.timeAxisParams.businessKey = row.id
      this.$refs.timeAxisDialog.show = true
      this.$nextTick(() => {
        this.$refs.timeAxis.fetchData()
      })
    },
    handleTabClick(tab, event) {
      this.search.fastSearch =  ''
      this.search.date =  []
      this.search.difference = tab.name
      this.activeName = tab.name
      this.fetchData('search')
      this.tableKey += 1
    },
    handleSizeChange(val) {
      // 公共分页每页显示条数
      this.size = val
      this.page = 1
      this.fetchData()
    },
    handleCurrentChange(val) {
      // 公共分页页码事件
      this.page = val
      this.fetchData()
    },
  }
}
</script>

<style scoped>
  .el-tabs--border-card>.el-tabs__content {
    padding: 0px;
  }
</style>
