<template>
  <div class="customer-info">
    <ol class="breadcrumb">
      <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>
              <el-input v-model.trim="search.fastSearch" placeholder="请输入资方名称/客户名称" style="width: 200px" 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 v-loading="loading" :data="tableData" :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="资方名称">
              <template slot-scope="{row}">
                <el-tooltip 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="客户名称"></el-table-column>
            <el-table-column prop="status.name" label="状态"></el-table-column>
            <el-table-column label="操作"  width="300">
              <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('examine', row)" v-if="row.status.name === '待审核' && activeName === 'pending' "></i>
                </el-tooltip>

                <el-tooltip effect="dark" content="编辑" placement="top">
                  <i class="iconfont icon-xiugai" @click="modifyClick('edit', row)" v-if="row.status.name === '待编辑' && activeName === 'pending'"></i>
                </el-tooltip>

                <el-tooltip effect="dark" content="查看" placement="top">
                  <i class="iconfont icon-Magnifier" v-power="'viewFinancialCustomer'" @click="modifyClick('see', row)"></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="'downloadCustomerFile'"
                  >
                  </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: 'CustomerInfo',
  data() {
    return {
      search: {
        fastSearch: '',
        difference: 'pending',
        simpleClassName: 'FinancialCustomer'
      },
      activeName: 'pending',
      tableKey: 0,
      deepSearch: {},
      page: 1,
      size: 10,
      count: 40,
      loading: false,
      tableData: [],
      timeAxisParams: {
        businessKey: '',
        businessType: 'FinancialCustomer'
      }
    }
  },
  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 params = {
        page: this.page,
        rows: this.size,
        ...this.search,
      }
      this.$api.capitalManage.getCustomerInfoList(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: 'customerInfoEdit', query: {
          id,
          taskId
        } })
      }
      if(type === 'examine') {
        this.$router.push({ path: 'customerInfoExamine', query: {
          businessKey: id,
          taskId
        } })
      }
      if(type === 'see') {
        this.$router.push({ path: 'customerInfoSee', query: {
          businessKey: id,
          taskId,
          type
        }})
      }
      if(type === 'downLoad') {
        this.$api.capitalManage.customerInfoDataDownload({ id }).then(res => {
          this.$utils.exportFiles(res, '')
        })
      }
    },
    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.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>
