<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>
    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',
              render: (h, {row}) => {
                return h('span', {}, pirzeType[row.type]);
              }
            },
            {
              title: '奖品名称',
              key: 'name'
            },
            {
              title: '奖品图片',
              key: 'img',
              render: (h, {row}) => {
                return h('img', {
                  attrs: {
                      src: row.img
                  },
                  style: {
                      width: '100%',
                      height: 'auto',
                      maxWidth: '70px'
                  }
                });
              }
            },
            {
              title: '中奖时间',
              key: 'endTime',
              render: (h, {row}) => {
                return h('span', {}, moment(new Date(row.create_time).getTime()).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
          };

          if (this.uid) {
            params.uid = this.uid;
          }

          if (this.type) {
            params.type = this.type;
          }

          if (this.name) {
            params.name = this.name;
          }

          this.list(params);
        },
        output() {
          console.log('output')
        }
      },
      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>