
<template>
  <div class="n-app-container">
    <el-card v-if="!showFull" shadow="never" style="margin-bottom:20px;">
      <el-form v-model="pagerDto" inline label-width="80px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="客户" size="mini">
              <el-input v-model="pagerDto._Eq_CustomerId" />
            </el-form-item>
            <el-form-item label="业务单号" size="mini">
              <el-input v-model="pagerDto._Eq_BillNo" />
            </el-form-item>
            <el-form-item label="业务类型" size="mini">
              <el-input v-model="pagerDto._Co_BillType" />
            </el-form-item>
            <el-form-item label="计费项　" size="mini">
              <el-input v-model="pagerDto._Co_ChargeName" />
            </el-form-item>
            <el-form-item label="扣费类型" size="mini">
              <el-select v-model="pagerDto._Eq_IncomeOrESxpense" clear size="mini">
                <el-option value="支出" label="支出" />
                <el-option value="收入" label="收入" />
              </el-select>
            </el-form-item>
            <el-form-item label="显示冲抵" size="mini">
              <el-switch v-model="pagerDto._Eq_ChargeTarget" clear size="mini" />
            </el-form-item>
            <el-form-item label="计费时间" size="mini" style="margin-bottom:0">
              <el-date-picker
                v-model="pagerDto._Range_AccountingDate"
                type="daterange"
                range-separator="至"
                start-placeholder="计费时间"
                end-placeholder="计费时间"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col><el-col :span="6">
            <el-form-item>
              <el-button type="primary" size="small" style="margin-left:10px" @click="pagerSerach(1)">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span style="margin-right:10px;color:#409EFF">交易流水</span>
        <el-tag type="danger">
          总计 ￥{{ totalAmount }}
        </el-tag>
        <div style="float:right">
          <el-link slot="reference" type="primary" style="margin-right:10px;"><span class="el-icon-download"> 导出</span></el-link>
          <el-popover
            placement="bottom"
            width="250"
            trigger="click"
          >
            <el-form label-width="100" inline label-position="left">
              <el-form-item label="业务单号">
                <el-checkbox v-model="showColumn.BillNo" />
              </el-form-item>
              <el-form-item label="交易单号">
                <el-checkbox v-model="showColumn.TransactionNo" />
              </el-form-item>
              <el-form-item label="业务类型">
                <el-checkbox v-model="showColumn.BillType" />
              </el-form-item>
              <el-form-item label="扣费类型">
                <el-checkbox v-model="showColumn.IncomeOrESxpense" />
              </el-form-item>
              <el-form-item label="计费项　">
                <el-checkbox v-model="showColumn.ChargeName" />
              </el-form-item>
              <el-form-item label="计费币种">
                <el-checkbox v-model="showColumn.Currency" />
              </el-form-item>
              <el-form-item label="计费金额">
                <el-checkbox v-model="showColumn.AmountinOriginalCurrency" />
              </el-form-item>
              <el-form-item label="计费时间">
                <el-checkbox v-model="showColumn.AccountingDate" />
              </el-form-item>
              <el-form-item label="计费版本">
                <el-checkbox v-model="showColumn.PriceVersion" />
              </el-form-item>
              <el-form-item label="结算金额">
                <el-checkbox v-model="showColumn.SettlementAmount" />
              </el-form-item>
              <el-form-item label="结算币种">
                <el-checkbox v-model="showColumn.SettlementCurrency" />
              </el-form-item>
              <el-form-item label="结算汇率">
                <el-checkbox v-model="showColumn.SettlementRate" />
              </el-form-item>
              <el-form-item label="交易时间">
                <el-checkbox v-model="showColumn.TransactionTime" />
              </el-form-item>
              <el-form-item label="交易备注">
                <el-checkbox v-model="showColumn.FeeDescription" />
              </el-form-item>
            </el-form>
            <el-link slot="reference" type="primary">选择显示项</el-link>
          </el-popover>
        </div>
      </div>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
        border
      >
        <el-table-column v-if="showColumn.BillNo" column-key="BillNo" prop="BillNo" label="业务单号" min-width="200">
          <template slot-scope="r">
            {{ r.row.BillNo }}
            <el-tag v-if="r.row.Offset" type="danger">冲抵</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="showColumn.TransactionNo" prop="TransactionNo" label="交易单号" min-width="200" />
        <el-table-column v-if="showColumn.BillType" prop="BillType" label="业务类型" min-width="140" />
        <el-table-column v-if="showColumn.IncomeOrESxpense" prop="IncomeOrESxpense" label="扣费类型" min-width="80" />
        <el-table-column v-if="showColumn.ChargeName" prop="ChargeName" label="计费项" min-width="120" />
        <el-table-column v-if="showColumn.Currency" prop="Currency" label="计费币种" min-width="80" />
        <el-table-column v-if="showColumn.AmountinOriginalCurrency" prop="AmountinOriginalCurrency" label="计费金额" min-width="80" formatter="" />
        <el-table-column v-if="showColumn.AccountingDate" prop="AccountingDate" label="计费时间" min-width="170" />
        <el-table-column v-if="showColumn.PriceVersion" prop="PriceVersion" label="计费版本" min-width="100" />
        <el-table-column v-if="showColumn.SettlementAmount" prop="SettlementAmount" label="结算金额" min-width="100" />
        <el-table-column v-if="showColumn.SettlementCurrency" prop="SettlementCurrency" label="结算币种" min-width="80" />
        <el-table-column v-if="showColumn.SettlementRate" prop="SettlementRate" label="结算汇率" min-width="80" />
        <el-table-column v-if="showColumn.TransactionTime" prop="TransactionTime" label="交易时间" min-width="170" />
        <el-table-column v-if="showColumn.FeeDescription" prop="FeeDescription" label="交易备注" min-width="170" />
      </el-table>
      <el-pagination
        :page-sizes="[10, 100, 200,500, 1000]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pagerSerach"
      />
    </el-card>
  </div></template>

<script>
import BaseList from '@/components/Xyy/baselist'
import { _queryPager } from '@/api/transaction/index'
export default {
  name: 'TransactionList',
  components: { 'base-list': BaseList },
  data() {
    return {
      totalAmount: 0.00,
      data: [], dataLoading: false,
      pagerDto: { PageIndex: 0, PageSize: 10, total: 0, _Eq_IncomeOrESxpense: '' },
      showColumn: {
        BillNo: true,
        TransactionNo: false,
        BillType: true,
        IncomeOrESxpense: true,
        ChargeName: true,
        Currency: true,
        AmountinOriginalCurrency: true,
        AccountingDate: true,
        PriceVersion: true,
        SettlementAmount: true,
        SettlementCurrency: true,
        SettlementRate: true,
        TransactionTime: true,
        FeeDescription: false
      }
    }
  },
  mounted() {
    this.pagerSerach(1)
  },
  methods: {
    fiex(r, v, l) {

    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      _queryPager(this.pagerDto).then(res => {
        this.data = res.Result
        this.pagerDto.total = res.TotalCount
        this.totalAmount = res.TotalAmount
      }).finally(res => { this.dataLoading = false })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    }
  }
}
</script>
