<template>
    <div class="list">
        <div class="filter">
            <Row>
                <Col span="6" class="field-col">
                    <Input v-model="uid" placeholder="用户UID" :maxlength="20"></Input>
                </Col>
                <Col span="6" class="field-col">
                    <Select v-model="type">
                        <Option :value="1">谢谢惠顾</Option>
                        <Option :value="2">红包</Option>
                        <Option :value="3">优惠券</Option>
                        <Option :value="4">实物奖品</Option>
                    </Select>
                </Col>
                <Col span="6" class="field-col">
                    <Input v-model="name" placeholder="奖品名称" :maxlength="100"></Input>
                </Col>
                <Col span="6">
                <Button type="primary" @click="search">检索</Button>
                <Button @click="reset" type="warning" style="margin-left: 10px;">重置
            </Button></Col>
            </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;
          });
        },
        search() {
            let params = {
              act_id: this.actId,
              pageNo: 1,
              pageSize: 10
            };

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

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

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

            this.list(params);
        },
        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);
        },
        reset() {
          this.uid = '';
          this.type = '';
          this.name = '';
          this.pageNo = 1;
          this.list();
        }
      },
      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>