<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>
    module.exports = {
        data() {
            return {
                columns1: [
                    {
                        title: '活动标题',
                        key: 'title'
                    },
                    {
                        title: '开始时间',
                        key: 'startTime'
                    },
                    {
                        title: '结束时间',
                        key: 'endTime'
                    },
                    {
                        title: '操作',
                        render: (h, {row}) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.conf(row.id)
                                        }
                                    }
                                }, '配置'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.delete(row.id)
                                        }
                                    }
                                }, '删除'),
                            ])
                        }
                    }
                ],
                data: []
            }
        },
        methods: {
            toCreate() {
              this.$router.push({name: 'create'});
            },
            conf(actId) {
                this.$router.push({name: 'conf', query: {actId}});
            },
            delete(id) {
                this.$Modal.warning({
                    title: '删除',
                    content: '删除后不可恢复，确认删除？',
                    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 {
    }

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

</style>