<template>
    <div class="list">
        <Button type="primary" class="create-btn" @click="toCreate">创建新活动</Button>
        <div class="activity-list">
            <Table :columns="columns1" :data="data"></Table>
        </div>
    </div>
</template>
<script>
    import moment from 'moment';
    module.exports = {
      data() {
        return {
          columns1: [
            {
              title: '活动ID',
              key: 'encryptedId'
            },
            {
              title: '活动标题',
              key: 'title'
            },
            {
              title: '开始时间',
              key: 'startTime',
              render: (h, {row}) => {
                return h('span', {}, moment(row.startTime * 1000).format('YYYY-MM-DD HH:mm:ss '));
              }
            },
            {
              title: '结束时间',
              key: 'endTime',
              render: (h, {row}) => {
                return h('span', {}, moment(row.endTime * 1000).format('YYYY-MM-DD HH:mm:ss '));
              }
            },
            {
              title: '操作',
              render: (h, {row}) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.conf(row.encryptedId);
                      }
                    }
                  }, '配置'),
                  h('Button', {
                      props: {
                          type: 'success',
                          size: 'small'
                      },
                      style: {
                          marginRight: '5px'
                      },
                      on: {
                          click: () => {
                              this.prizeSent(row.encryptedId);
                          }
                      }
                  }, '中奖一览'),
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.delete(row.encryptedId);
                      }
                    }
                  }, '删除')
                ]);
              }
            }
          ],
          data: []
        };
      },
      methods: {
        toCreate() {
          this.$router.push({name: 'create'});
        },
        conf(actId) {
          this.$router.push({name: 'conf', query: {actId}});
        },
        prizeSent(actId) {
          this.$router.push({name: 'prizeSent', query: {actId}});
        },
        delete(id) {
          this.$Modal.confirm({
            title: '删除',
            content: '删除后不可恢复，确认删除？',
            cancelText: '取消',
            onOk: () => {
              $.ajax({
                method: 'post',
                url: '/admin/wheelSurf/api/delete',
                data: {id}
              }).then(() => {
                this.list();
              });
            }
          });
        },
        list() {
          $.ajax({
            url: '/admin/wheelSurf/api/list',
          }).then(res => {
            this.data = res.data;
          });
        }
      },
      created() {
        this.list();
      }
    };
</script>
<style lang="scss">
    .activity-list {
      width: 100%;
    }

    .create-btn {
      margin-bottom: 10px;
    }

</style>