<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">交易编号：</span>
        <el-input v-model="query.transactionNo"  class="filter-item input_item"    />
      </div>
      <div class="container_item">
        <span class="item_text">产品细项：</span>
        <el-input v-model="query.productCode"  class="filter-item input_item"   />
      </div>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleSearch">
        {{ $t('table.search') }}
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-refresh" @click="refreshBut">
        {{ $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"
      >
         <el-table-column prop="transactionNo" width="150" show-overflow-tooltip label="交易编号" align="left" >
            <template slot-scope="scope">
              <span class="nowrap">{{scope.row.transactionNo}}</span>
                <!-- <div style="display: flex;justify-content: space-between;align-items: center;">
                        <el-tooltip class="item" effect="dark" :content="scope.row.transactionNo" placement="top-start">
                            <span style="display: inline-block;width: 100px;padding-top: 3px;" class="nowrap">{{scope.row.transactionNo}}</span>
                        </el-tooltip>
                </div> -->
            </template>
            </el-table-column>
            <el-table-column prop="productCode"  show-overflow-tooltip label="产品细项" align="left">
            <template slot-scope="scope">
                <div>
                {{scope.row.productCode}}
                </div>
            </template>
            </el-table-column>
            <el-table-column prop="recordType" show-overflow-tooltip label="额度操作"  align="left">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.recordType==1?'虚占':scope.row.recordType==1?'动用':'恢复'}}
                    </div>
                </template>

            </el-table-column>
            <el-table-column prop="startDate"  show-overflow-tooltip  label="额度异动日期"  align="left">
            <template slot-scope="scope">
                <div v-if="scope.row.startDate">
                {{formatTime(scope.row.startDate)}}
                </div>
            </template>
            </el-table-column>
            <el-table-column prop="transactionCurrencyCode" show-overflow-tooltip width="80" label="交易币种"  align="left"></el-table-column>
            <el-table-column prop="transactionAmount" show-overflow-tooltip label="交易金额" align="right">
            <template slot-scope="scope">
                <div  >
                    {{scope.row.transactionAmount|numberToCurrency}}
                </div>
            </template>
            </el-table-column>
            <el-table-column prop="fxExchangeRate" show-overflow-tooltip  label="折算汇率"  align="right"></el-table-column>
            <el-table-column prop="colCode" show-overflow-tooltip  label="额度异动金额"  align="right">
            <template slot-scope="scope">
              <div>
                <span>{{(scope.row.rateTransactionAmount * scope.row.hairCut)|numberToCurrency}}</span>
              </div>
                
            </template>
            </el-table-column>
            <el-table-column prop=""  show-overflow-tooltip label="交易状态" align="left" >
                <template slot-scope="scope">
                    <div>
                        {{scope.row.recordType==1?'虚占':scope.row.recordType==2?'动用':'恢复'}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" 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 :label="$t('table.actions')" align="left" width="150" >
            <template  slot-scope="scope">
                <div class="but_list">
                    <el-button v-if="permission.includes('dbpdraft_area_update')" v-waves class="" type="text" icon="el-icon-my-modify" @click="details(scope.row)">
                    {{ $t('table.modify') }}
                    </el-button>
                    <el-button v-if="permission.includes('dbpdraft_area_del')" v-waves class=""  type="text" icon="el-icon-my-del-y" @click="handleDelete(scope.row.id)">
                        {{ $t('table.delete') }}
                    </el-button>
                </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="cancelBut"
      :close-on-click-modal="false"
      width='1050px'>
        <quota
          :data="formData"
          @cancelBut="cancelBut"
          v-if="DestroyIncomeStatistics == true"
          ref="IncomeStatisticsChild"
          :type="3"
          ></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'
import { mapGetters } from 'vuex'
export default {
  name: '',
  components: { Pagination ,quota},
  directives: { waves ,elDragDialog},
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
        query:{
          recordType:1,
          processStatusEnd:3
        },
        tableData:[],
        total: 0,
        pageNum:1,
        pageSize:20,
        temp:{},
        tableHeight: 0,
        DestroyIncomeStatistics:false,
        formData:{},
        quotaFormVisible:false
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 280
    })
  },
  methods: {
    getData() {
        http.post(`/limit/list`,{cpage:this.pageNum,pageSize:this.pageSize,...this.query}).then((res)=>{
            this.tableData = res.data.list;
            this.total = res.data.total || 0;
        }).catch(err=>{});
    },
    details(row){
        http.post(`/limit/info`,{id:row.id}).then((res)=>{
            this.formData = res.data
            this.quotaFormVisible = true
            this.DestroyIncomeStatistics = true
        })
    },
    handleSearch() {
      this.pageNum= 1
      this.getData()
    },
    cancelBut(t){
      this.getData()
      this.quotaFormVisible = false
      setTimeout(()=>{
        this.DestroyIncomeStatistics = false
      },500)
    },
    headerStyle() {
      return 'tableStyle'
    },
    formatTime(str){
        return str.split(' ')[0]
    },
     // 删除操作
    handleDelete(id) {
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
            type: 'warning'
        }).then(() => {
            http.post(`/limit/delDraft`,{id}).then((res)=>{
                this.$message.success('删除成功');
                this.getData()
            }).catch(err=>{});
        }).catch(() => {});
    },
    refreshBut(){
        this.query.transactionNo='';
        this.query.productCode='';
        this.handleSearch()
    },
    colPercentLimit(item){
        let Amount
        // if(item['rateType']==1){
        //     Amount =  item.rateTransactionAmount * Number(item.hairCut) * item.fxExchangeRate
        // }else{
            Amount =  item.rateTransactionAmount * Number(item.hairCut)
        // }
        return Amount.toFixed(2)
    },
  }
}
</script>
<style lang="scss" scoped>
.but_list{
  display: flex;
}
  .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }
</style>
