<template>
  <div>
    <div class="count-list">
      <div class="count-item" style="margin-right: 20px">全部：{{total || 0}}</div>
      <el-button size="small" @click="$router.push('/main/card_conf')">套餐配置</el-button>
    </div>
    <div>
      <el-table :data="cardsData"  border style="width: 100%">
        <el-table-column
          prop=""
          label="购买方">
          <template slot-scope="scope">
          <span class="lblue point">
            <a  target="_blank" :href="scope.row.host+'/wo/'+scope.row.uid">{{scope.row.uid_name}}</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="被查询方">
          <template slot-scope="scope">
          <span class="lblue point">
            <a  target="_blank" :href="scope.row.host+'/wo/'+scope.row.target_uid">{{scope.row.target_uid_name}}</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="pay_time" label="付款时间">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.pay_time,'Y-m-d H:i')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="购买来源">
          <template slot-scope="scope">
            <span>{{(scope.row.source_type || '') +'-'+ (scope.row.version || '')}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-pagination
        class="order-footer"
        background
        layout="total, prev, pager, next"
        :page-size="20"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: "user_cards_list",
    data() {
      return {
        page: 1,
        total: 0,
        cardsData: [],
      }
    },
    mounted() {
      this.getAuditList();
    },
    methods: {
      async getAuditList() {
        const page = this.page;
        const data = {
          page
        };
        let res = await this.$post("/api/admin/UserCards/getCardsList", data);
        if (res && res.status === 1) {
          this.cardsData = res.data.list || [];
          this.total = res.data.total * 1;
        }
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getAuditList();
      },
      formatDate(time, format = '') {
        if (time === "0") {
          return "--";
        }
        let now = new Date(time * 1000);
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let date = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let second = now.getSeconds();
        if (hour < 10) {
          hour = "0" + hour;
        }
        if (minute < 10) {
          minute = "0" + minute;
        }
        if (second < 10) {
          second = "0" + second;
        }
        return (format == '' ?
            year +
            "-" +
            month +
            "-" +
            date +
            " " +
            hour +
            ":" +
            minute +
            ":" +
            second
            :
            year +
            "-" +
            month +
            "-" +
            date +
            " " +
            hour +
            ":" +
            minute
        );
      },

    }

  }
</script>

<style scoped>
  .count-list {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }
</style>
