<template>
  <div class="table-box">
    <div class="total-amount">
      <div class="item">
        <div class="pay-name">{{$t("order.weixinPay")}}</div>
        <div class="pay-amount">￥  {{ details.wechatAmount }} </div>
        <div class="pay-percent">{{ details.wechatPercent | percent }}%</div>
      </div>
      <div class="item">
        <div class="pay-name">{{$t("order.aliPay")}}</div>
        <div class="pay-amount">￥ {{ details.alipayAmount }} </div>
        <div class="pay-percent">{{ details.alipayPercent | percent }}%</div>
      </div>
      <div class="item">
        <div class="pay-name">{{$t("publics.balancePay")}}</div>
        <div class="pay-amount">￥  {{ details.balanceAmount }}  </div>
        <div class="pay-percent">{{ details.balancePercent | percent }}%</div>
      </div>
      <div class="item">
        <div class="pay-name">{{$t("publics.payPal")}}</div>
        <div class="pay-amount">￥  {{ details.paypalAmount }}  </div>
        <div class="pay-percent">{{ details.paypalPercent | percent }}%</div>
      </div>
    </div>
    <div class="list">
      <el-table
        :data="tableData"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
        style="width: 100%"
      >
        <el-table-column
          prop="alipayAmount"
          :label="this.$i18n.t('order.aliPay')"
        >
          <template slot-scope="scope">
            <span>￥ {{ scope.row.alipayAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="wechatAmount"
          :label="this.$i18n.t('order.weixinPay')"
        >
          <template slot-scope="scope">
            <span>￥ {{ scope.row.wechatAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="balanceAmount"
          :label="this.$i18n.t('publics.balancePay')"
        >
          <template slot-scope="scope">
            <span>￥ {{ scope.row.balanceAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="paypalAmount"
          :label="this.$i18n.t('publics.payPal')"
        >
          <template slot-scope="scope">
            <span>￥ {{ scope.row.paypalAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="total"
          :label="this.$i18n.t('shopWallet.totalNum')"
        >
          <template slot-scope="scope">
            <span>￥ {{ scope.row.total }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          :label="this.$i18n.t('remindPop.operation')"
          align="center"
        >
          <template slot-scope="scope">
            <div class="default-btn text-btn" @click="exportFrom(scope.row.orderNumber)">{{$t("shopWallet.exportRiconciliazioneDetail")}}</div>
            <div class="default-btn text-btn" @click="handleDetail(scope.row.orderId)">{{$t("shopWallet.riconciliazioneDetail")}}</div>
            <!-- <el-button type="text" size="small" @click="handleDetail(scope.row.orderId)">明细</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页条 -->
    <!-- <pagination style="text-align: right" :total="total" :page.sync="params.pageNum" :limit.sync="params.pageSize" @pagination="pagination" /> -->
  </div>
</template>

<script>
  // import Pagination from '@/components/Pagination'
  import moment from 'moment'
  export default {
    filters: {
      percent (value) {
        return (value * 100).toFixed(2)
      }
    },
    // components: { Pagination },
    data () {
      return {
        time: '',
        activeName: 'second',
        total: 0,
        params: {
          pageNum: 1,
          pageSize: 10
        },
        payList: [
          {
            name: '微信',
            amount: 0.10,
            percent: 0.10
          },
          {
            name: '支付宝',
            amount: 0.10,
            percent: 0.10
          },
          {
            name: '余额',
            amount: 0.10,
            percent: 0.10
          }
        ],
        tableData: [],
        details: {
          wechatAmount: 0,
          wechatPercent: 0,
          alipayAmount: 0,
          alipayPercent: 0,
          balanceAmount: 0,
          balancePercent: 0,
          paypalAmount: 0.00,
          paypalPercent: 0.00
        }
      }
    },

    mounted () {
    },

    methods: {
      handleClick (tab) {
        console.log(tab.name)
      },
      getDataDetail (params) {
        this.timeData = params
        this.tableData = []
        this.$http({
          url: this.$http.adornUrl('/platform/account_detail/get_refund_account_detail'),
          method: 'get',
          params: params
        }).then(({data}) => {
          this.details = data
          this.tableData.push(data)
        })
      },
      exportFrom () {
        this.params.startTime = this.timeData.startTime
        this.params.endTime = this.timeData.endTime
        this.$http({
          url: this.$http.adornUrl('/platform/account_detail/get_refund_info_form'),
          method: 'get',
          params: this.params,
          responseType: 'blob'
        }).then(({ data }) => {
          var blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
          const fileName = this.$i18n.t('shopWallet.riconciliazioneFinanziaria') + this.$i18n.t('shopWallet.refundCheck') +
            '(' + moment(this.timeData.startTime).format('yyyy-MM-DD') +
            ' ' + this.$i18n.t('date.tip') + ' ' +
            moment(this.timeData.endTime).format('yyyy-MM-DD') + ').xlsx'

          const elink = document.createElement('a')
          if ('download' in elink) { // 非IE下载
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName)
          }
        })
      },
      // pagination(page) {
      //   this.params.pageNum = page.pageNum
      //   this.params.pageSize = page.pageSize
      //   this.getData()
      // },
      handleDetail () {
        this.$router.push({
          path: '/finance-reconciliation-details/index',
          query: {
            type: 0,
            ...this.timeData
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .table-box {
    .total-amount {
      height: 100px;
      background: #f7f8fa;
      padding: 15px 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item {
        flex: 1;
        font-size: 14px;
        .pay-name {
          color: #666;
          margin-bottom: 8px;
        }
        .pay-amount {
          color: #333;
          font-size: 26px;
          font-weight: bold;
          margin-bottom: 8px;
        }
        .pay-percent {
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
    .list{
      margin-top: 25px;
    }
  }
</style>
