<template>
  <div class="app-container">

    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">客户编号：</span>
        <el-input v-model="query.custCode" style="width: 120px;"  class="filter-item input_item"   />
      </div>
      <div class="container_item">
        <span class="item_text">客户名称：</span>
        <el-input v-model="query.custName" style="width: 120px;"  class="filter-item input_item"   />
      </div>
      <div class="container_item">
        <span class="item_text">批复书编号：</span>
        <el-input v-model="query.certificateCode" style="width: 120px;"  class="filter-item input_item"    />
      </div>
      <div class="container_item">
        <span class="item_text">批复书名称：</span>
        <el-input v-model="query.nodeName"  style="width: 120px;" class="filter-item input_item"   />
      </div>
      <el-button v-waves class="filter-item" type="primary" style="margin-right:10px;" icon="el-icon-my-search" @click="handleSearch">
        {{ $t('table.search') }}
      </el-button>
      <el-button v-waves class="filter-item" type="primary" style="margin-right:10px;" icon="el-icon-my-reset" @click="query={};handleSearch()">
        {{ $t('table.reset') }}
      </el-button>
    </div>
    <div class="wrapper_table">
      <el-table
        :data="tableData"
        stripe
        highlight-current-row
        style="width: 100%;"
        :header-cell-class-name="headerStyle"
        :max-height="tableHeight"
        @row-click="handleTab"
      >
        <el-table-column prop="custCode"  :label="$t('limit.custCode')" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="custName" :label="$t('limit.custName')" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="certificateCode" :label="$t('limit.replyNo')" width="150" show-overflow-tooltip align="left">
          <template slot-scope="scope">
            <span class="code-sel-sl">{{scope.row.certificateCode}}</span>
            <!-- <div class="nowrap"  style="color: #D46E01;cursor: pointer;">
              <el-tooltip v-if="scope.row.certificateCode.length>10" class="item" effect="dark" :content="scope.row.certificateCode" placement="top-start">
                <span>{{scope.row.certificateCode}}</span>
              </el-tooltip>
              <span v-else>{{scope.row.certificateCode}}</span>
              </div> -->
          </template>
        </el-table-column>
        <el-table-column prop="nodeName" :label="$t('limit.replyName')" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="partialFlag" :label="$t('limit.loanForm')" show-overflow-tooltip align="left">
          <template slot-scope="scope">
            <div>
              {{scope.row.partialFlag==1?'单张':'分批'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sanctionDate" label="额度批复日" show-overflow-tooltip align="left" >
          <template slot-scope="scope">
                <div v-if="scope.row.sanctionDate">
                {{formatTime(scope.row.sanctionDate)}}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="overalLimit" :label="$t('limit.approvedAmount')"  show-overflow-tooltip header-align="right" align="rigth">
            <template slot-scope="scope">
              <div style="text-align: end;">
                {{scope.row.overalLimit|numberToCurrency}}
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="earmarkAmount" label="虚占额度"  show-overflow-tooltip header-align="right" align="rigth">
            <template slot-scope="scope">
              <div style="text-align: end;">
                {{scope.row.earmarkAmount|numberToCurrency}}
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="utilizedAmount" label="已用额度"  show-overflow-tooltip header-align="right" align="rigth">
            <template slot-scope="scope">
              <div style="text-align: end;">
                {{scope.row.utilizedAmount|numberToCurrency}}
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="availAmount" label="可用额度"  show-overflow-tooltip header-align="right" align="rigth">
            <template slot-scope="scope">
              <div style="text-align: end;">
                {{(scope.row.overalLimit-scope.row.earmarkAmount-scope.row.utilizedAmount)|numberToCurrency}}
              </div>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getData" />
      <el-dialog
      title="额度虚占"
      :visible.sync="quotaFormVisible"
      :close-on-click-modal="false"
      @close="cancelBut"
      width='1050px'>
        <quota
          :data="formData"
          @cancelBut="cancelBut"
          v-if="DestroyIncomeStatistics == true"
          ref="IncomeStatisticsChild"
          :type="1"
          ></quota>
      </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import http from '@/api/http'
import quota from './quota.vue'
export default {
  name: '',
  components: { Pagination ,quota},
  directives: { waves ,elDragDialog},
  data() {
    return {
        query:{},
        tableData:[],
        total: 0,
        pageNum:1,
        pageSize:20,
        temp:{},
        tableHeight: 0,
        quotaFormVisible:false,
        formData:{},
        DestroyIncomeStatistics:false
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 280
    })
  },
  methods: {
    getData() {
        http.post(`/liability/getSuccessCertificate`,{cpage:this.pageNum,pageSize:this.pageSize,...this.query}).then((res)=>{
            this.tableData = res.data.list;
            this.total = res.data.total || 0;
        }).catch(err=>{});
    },
    handleSearch() {
      this.pageNum= 1
      this.getData()
    },
    certificateClick(row){
      this.formData = row
      this.quotaFormVisible = true
      this.DestroyIncomeStatistics = true
    },
    handleTab(row,column){
      // console.log(column);
      if(column.property=="certificateCode"){
        this.formData = row
        this.quotaFormVisible = true
        this.DestroyIncomeStatistics = true
      }
    },
    cancelBut(){
      this.quotaFormVisible = false
      setTimeout(()=>{
        this.DestroyIncomeStatistics = false
      },500)
    },
    headerStyle() {
      return 'tableStyle'
    },
    formatTime(str){
        return str.split(' ')[0]
    },
  }
}
</script>
<style scoped>
  .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }
  .code-sel-sl {
    color: rgb(212, 110, 1);
    cursor: pointer;
  }
  .code-sel-sl:hover {
     color: rgb(151, 82, 9);;
  }
</style>
