<template>
  <div id="withdraw">
    <el-select @change="changeSelect" v-model="selectValue" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <div class="table">
      <el-table
        v-if="tableData.length"
        height="100%"
        border
        style="width: 100%"
        :data="tableData"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          v-for="(prop, index) of tableProps"
          :key="index"
          :prop="prop"
          :label="tableHeaders[index]"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="prop === 'uid'"
              @click="clickUID(scope.row[prop])"
            >{{scope.row[prop]}}</el-button>
            <span v-else-if="prop === 'statusShow' && scope.row['status'] !== '1'">
              {{scope.row[prop]}}
              <el-button type="text" @click="clickRetry(scope.row['id'])">重试</el-button>
            </span>
            <span v-else>{{scope.row[prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @current-change="getTableData"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="totalCount"
    ></el-pagination>
  </div>
</template>

<script>
  const tableHeaders = [
    "用户ID",
    "真实姓名",
    "提现金额",
    "到账金额",
    "账户余额",
    "到账账户",
    "提现时间",
    "到账时间",
    "订单号",
    "支付方式",
    "状态"
  ]
  const tableProps = [
    "uid",
    "real_name",
    "amount",
    "true_amount",
    "after_amount",
    "account",
    "created_atShow",
    "taken_atShow",
    "order_no",
    "channel",
    "statusShow"
  ]

  export default {
    data() {
      return {
        options: [
          {
            value: -1,
            label: '全部'
          },
          {
            value: 0,
            label: '提交'
          },
          {
            value: 1,
            label: '成功'
          },
          {
            value: 2,
            label: '失败'
          },
          {
            value: 3,
            label: '进行中'
          },
        ],
        selectValue: -1,
        // 数据总条目
        totalCount: 0,
        currentPage: 1,
        // 列表头显示内容
        tableHeaders,
        // 列表头字段
        tableProps,
        // 列表数据
        tableData: []
      };
    },
    mounted() {
      this.getTableData()
    },
    methods: {
      changeSelect(status) {
        this.getTableData()
      },
      // 点击重试
      async clickRetry(id) {
        const res = await this.$post("/api/admin/payment/redoDraw", { id })
      },
      // 点击用户的 uid
      clickUID(uid) {
        // console.log("click uid: " + uid)
      },
      // 根据状态显示图表样式
      tableRowClassName({ row, rowIndex }) {
        let className = ""
        if(row.status === "1") className = "success-row"
        return className
      },
      // 格式化列表数据
      formatTableData(data) {
        return data.map(i => ({
          ...i,
          statusShow: i.status === "1" ? "到账" : "失败",
          created_atShow: new Date(Number(i.created_at) * 1000).toLocaleString(),
          taken_atShow: new Date(Number(i.taken_at) * 1000).toLocaleString()
        }));
      },
      // 获取列表数据
      async getTableData(page = this.currentPage) {
        this.tableData = []
        const res = await this.$post("/api/admin/payment/listDraw", { page, status: this.selectValue })
        const data = res.data
        this.tableData = this.formatTableData(res.data.list)
        this.totalCount = Number(data.total)
        this.totalPage = data.totalPage
      }
    }
  };
</script>

<style scoped>
  .table {
    height: calc(100% - 80px);
  }
</style>
