<template>
    <div class="list">
        <div class="filter">
            <Row>
                <Button type="primary" @click="output">导出中奖记录</Button>
            </Row>
        </div>
        <Table :columns="columns1" :data="data"></Table>
        <div class="page">
            <Page :total="total" :pageSize="10" :current="pageNo" @on-change="pageChange"/>
        </div>
    </div>
</template>
<script>
    import moment from 'moment';
    const pirzeType = {
      1: '谢谢惠顾',
      2: '红包',
      3: '优惠券',
      4: '实物奖品'
    };

    module.exports = {
      data() {
        return {
          actId: 0,
          uid: '',
          type: '',
          name: '',
          total: 0,
          pageNo: 1,
          pageSize: 10,
          columns1: [
            {
              title: '用户UID',
              key: 'uid'
            },
            {
              title: '奖品类型',
              key: 'type'
            },
            {
              title: '奖品名称',
              key: 'name'
            },
            {
              title: '中奖时间',
              key: 'time',
              render: (h, {row}) => {
                return h('span', {}, moment(row.time).format('YYYY-MM-DD HH:mm:ss'));
              }
            }
          ],
          data: []
        };
      },
      methods: {
        list(params) {
          params = params || {act_id: this.actId, pageNo: 1, pageSize: this.pageSize};

          $.ajax({
            method: 'post',
            url: '/admin/wheelSurf/api/prize/userFind',
            contentType: 'application/json',
            data: JSON.stringify(params)
          }).then(res => {
            this.data = res.data.list;
            this.total = res.data.total;
          });
        },
        pageChange(page) {
          this.pageNo = page;

          let params = {
            act_id: this.actId,
            pageNo: this.pageNo,
            pageSize: this.pageSize
          };

          this.list(params);
        },
        output() {
          window.open(`/admin/wheelSurf/api/prize/exportRecords?actId=${this.actId}`, '_blank');
        }
      },
      created() {
        this.actId = this.$route.query.actId;
        this.list();
      }
    };
</script>
<style lang="scss" scoped>
    .activity-list {
    }

    .filter {
        margin-bottom: 20px;
    }

    .page {
        margin-top: 20px;
        text-align: right;
    }

    .field-col {
        padding-right: 20px;
    }

</style>