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

<template>
    <div>
        <Row class="margin-top-10" v-show="proShow">
            <Col>
                <Card>
                    <p slot="title">
                        <Icon type="android-remove"></Icon>
                        产品分类
                        <Button type="primary" @click="add">新增</Button>
                    </p>
                    <div class="edittable-table-height-con">
                        <Table :columns="columns" :data="prosHandle"></Table>
                        <Page :total="total" :page-size="pageSize" @on-change="getData"></Page>
                    </div>
                </Card>
            </Col>
        </Row>
        <add :addShow="addShow" :products="products" @close="closeAddModal"></add>
        <edit :editShow="editShow" :editClassify="prosHandle" :row="row" @close="closeModal"></edit>
    </div>
</template>

<script>
import add from './add';
import edit from './edit';
export default {
    name: 'classify',
    components: {
        add,
        edit
    },
    computed: {
        prosHandle() {
            /*let products = [];
            this.products.forEach((product, index) => {
                products.push({
                    id: ++index,
                    classify: product.classify
                });
            });*/
            return this.products;
        }
    },
    data () {
        return {
            row: {},
            total: 0,
            pageSize: 20,
            proShow: true,
            addShow: false,
            editShow: false,
            formContent: {},
            columns: [
                {title: "id", key: 'id'},
                {title: "产品分类", key: 'classify', 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: () => {
                                        this.row = params.row;
                                        this.editShow = true;
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'default'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        let id = params.row.id;
                                        this.$Modal.confirm({
                                            title: '注意',
                                            content: '确定要删除？',
                                            onOk: () => {
                                                this.axios.delete(`product_classify/${id}`, {
                                                }).then((res) => {
                                                    this.$message.success("删除成功");
                                                    this.products = this.products.filter((product) => {
                                                        return product.classify != params.row.classify;
                                                    });
                                                    this.$Modal.remove();
                                                });
                                            },
                                            onCancel: () => {
                                                this.$Modal.remove();
                                            }
                                        });
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            products: []
        };
    },
    methods: {
        add () {
            this.addShow = true;
        },
        pubSuccess() {
            this.proShow = true;
            this.getData();
        },
        getData (num) {
            this.axios.get("product_classify", {
                params: {
                    page: num || 1
                }
            }).then((res) => {
                this.products = res.data.data;
                this.pageSize = res.data.per_page;
                this.total = res.data.total;
            });
        },
        closeModal(row) {
            this.editShow = false;
            this.getData();
            // location.reload();
            /*if (row && row.classifys) {
                this.products = row.classifys;
            }*/
        },
        closeAddModal(row) {
            this.addShow = false;
            this.getData();
            // location.reload();
            /*if (row && row.classify) {
                this.products.push({classify: row.classify});
            }*/
        },
    },
    created () {
        this.getData();
    }
};
</script>
