<style lang="less">
    @import '../../styles/common.less';
    @import './components/table.less';
    .ivu-card-head {
        p {
            height: 32px;
            line-height: 32px;
        }
        button {
            float: right;
        }
    }
</style>

<template>
    <div>
        <Row class="margin-top-10" v-show="actShow">
            <Col>
                <Card>
                    <p slot="title">
                        <Icon type="android-remove"></Icon>
                        活动列表
                        <Button type="primary" @click="add">新增</Button>
                    </p>
                    <div class="edittable-table-height-con">
                        <!-- <can-edit-table refs="table2" v-model="editInlineData" :columns-list="editInlineColumns"></can-edit-table> -->
                        <Table :columns="columns" :data="actsHandle"></Table>
                    </div>
                </Card>
            </Col>
        </Row>
        <editor v-show="editorShow" @pubSuccess="pubSuccess" :editContent="editContent"></editor>
    </div>
</template>

<script>
import editor from "../main-components/editor";
export default {
    name: 'editable-table',
    components: {
        editor
    },
    computed: {
        editorShow() {
            return !this.actShow;
        },
        actsHandle() {
            let arr = [];
            this.acts.forEach((act) => {
                let obj = {
                    id: act.id,
                    title: act.title
                }
                if (act.status == 0) {
                    obj.status = "进行中";
                } else {
                    obj.status = "结束";
                }
                arr.push(obj);
            });
            return arr;
        }
    },
    data () {
        return {
            actShow: true,
            editContent: {},
            columns: [
                {title: "id", key: 'id'},
                {title: "标题", key: 'title'},
                {title: "状态", key: 'status', align: 'center'},
                {
                    title: "操作",
                    key: "action",
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'default'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        let id = params.row.id;
                                        this.actShow = false;
                                        this.acts.forEach((act) => {
                                            if (act.id == id) {
                                                this.editContent = act;
                                            }
                                        })
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'default'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        let id = params.row.id;
                                        this.axios.delete(`/api/campaign/${id}`)
                                            .then((res) => {
                                                // console.log(res);
                                            });
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            acts: []
        };
    },
    methods: {
        add () {
            this.actShow = false;
        },
        pubSuccess() {
            this.actShow = true;
            this.getData();
        },
        getData () {
            this.axios.get("/api/campaigns")
                .then((res) => {
                    this.acts = res.data.data;
                });
        }
    },
    created () {
        this.getData();
    }
};
</script>
