<template>
  <div class="relation-disburse">
    <ol class="breadcrumb">
      <li>资方管理</li>
      <li>关联支用</li>
    </ol>
    <div class="tempalte-content">
      <div class="search">
        <div class="left"></div>
        <div class="right">
          <div>
            <el-input v-model="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" height="calc(100vh - 0.85rem - 180px)">
          <el-table-column type="index" label="序号"  width="50"></el-table-column>
          <el-table-column prop="institutionName" label="资方名称" width="400">
            <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="customerManager" label="客户经理" width="300" ></el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="{row}">
              <el-tooltip effect="dark" content="修改资方账号" placement="top">
                <i v-power="'addAccount'" class="iconfont icon-xiugai" @click="modifyClick('addNumber', row)"></i>
              </el-tooltip>
              <el-tooltip effect="dark" content="关联企业" placement="top">
                <i v-power="'addEnterprise'" class="iconfont icon-qiye" @click="modifyClick('company', row)"></i>
              </el-tooltip>
              <el-tooltip effect="dark" content="关联支用" placement="top">
                <i v-power="'addEnterpriseDisburse'" class="iconfont icon-tubiao11" @click="modifyClick('disburse', row)"></i>
              </el-tooltip>
              <el-tooltip effect="dark" content="详情" placement="top">
                <i v-power="'getDetailList'" class="iconfont icon-xiangqing" @click="modifyClick('details', 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>
    <cy-dialog ref="dialog" :title="dialog.title" width="50vw" top="15vh">
      <add-number ref="addNumber" @modify-click="modifyClick" v-if="dialog.type ==='addNumber'" :row-info="dialog.row"></add-number>
      <relation-company ref="relationCompany" @modify-click="modifyClick" v-if="dialog.type ==='company'" :row-info="dialog.row"></relation-company>
      <relation-disburse-list ref="relationDisburseList" @modify-click="modifyClick" v-if="dialog.type ==='disburse'" :row-info="dialog.row"></relation-disburse-list>
    </cy-dialog>
  </div>
</template>

<script>
module.exports = {
  name: 'RelationDisburse',
  components: {
    AddNumber: httpVueLoader('./components/AddNumber.vue'),
    RelationCompany: httpVueLoader('./components/RelationCompany.vue'),
    RelationDisburseList: httpVueLoader('./components/RelationDisburseList.vue'),
  },
  data() {
    return {
      search: {
        fastSearch: ''
      },
      deepSearch: {},
      loading: false,
      tableData: [],
      page: 1,
      size: 10,
      count: 0,
      dialog: {
        title: '',
        type: '',
        row: {}
      },
    }
  },
  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 = {
        ...this.search,
        page: this.page,
        rows: this.size
      }
      this.$api.capitalManage.getRelationDisburseList(params).then(({ data }) => {
        const { rows, records} = data
        this.loading = false
        this.tableData = rows
        this.count = records
      })
    },
    modifyClick(type, row) {
      if(type === 'close') {
        this.$refs.dialog.show = false
      }else if(type === 'comfirm') {
        this.fetchData()
        this.$refs.dialog.show = false
      }else {
        if(type === 'details') {
          const { id, institutionName } = row
          this.$router.push({
            path: '/relationDisburseDetails',
            query: {
              id,
              institutionName
            }
          })
        }else {
          this.$refs.dialog.show = true
        }
        if(type === 'addNumber') {
          this.dialog = { title: '添加资方登录账号', type, row}
          setTimeout(() => {
            // this.$refs.addNumber.ruleForm.loginName = ''
          }, 300);
        }
        if(type === 'company') {
          this.dialog = { title: '关联企业', type, row}
          setTimeout(() => {
            this.$refs.relationCompany.resetData()
          }, 300);
        }
        if(type === 'disburse') {
          this.dialog = { title: '关联支用', type, row}
          setTimeout(() => {
            this.$refs.relationDisburseList.getCreditData()
          }, 100);
        }

      }
    },
    handleSizeChange(val) {
      // 公共分页每页显示条数
      this.size = val
      this.page = 1
      this.fetchData()
    },
    handleCurrentChange(val) {
      // 公共分页页码事件
      this.page = val
      this.fetchData()
    },
  },
}
</script>

<style scoped>

</style>
