<template>
    <layout-body>
        <layout-filter ref="filter" :model="query">
            <filter-item label="SKN编码">
                <Input v-model.trim="query.sknCode" :maxlength="9"></Input>
            </filter-item>
            <filter-item label="商品名称">
                <Input v-model.trim="query.prodName"></Input>
            </filter-item>
            <filter-item label="品牌">
                <select-brand v-model="query.brand"></select-brand>
            </filter-item>
            <filter-item label="品类">
                <select-category v-model="query.sort"></select-category>
            </filter-item>
            <filter-item label="库存状态">
                <Select v-model="query.stockStatus" clearable>
                    <Option value="1">即将售罄</Option>
                    <Option value="2">库存正常</Option>
                </Select>
            </filter-item>
            <filter-item label="商品状态">
                <Select v-model="query.prodStatus" clearable>
                    <Option value="1">即将售罄</Option>
                    <Option value="2">库存正常</Option>
                </Select>
            </filter-item>
            <filter-item>
                <Button type="primary" @click="search">筛选</Button>
                <Button @click="reset">清空条件</Button>
            </filter-item>
        </layout-filter>

        <layout-action>
            <Button type="error" @click="delProducts">删除</Button>
        </layout-action>

        <layout-list>
            <Demo></Demo>
            <Table border :columns="tableCols" :data="tableData"></Table>
            <Page :total="pageData.total" :current="pageData.current"
                        @on-change="pageChange" :page-size="20" show-total></Page>
        </layout-list>
    </layout-body>
</template>

<script>
import {Demo} from './components';
export default {
    data() {
        return {
            query: {
                sknCode: '',
                prodName: '',
                brand: null,
                sort: [],
                stockStatus: 0,
                prodStatus: 0,
            },
            pageData: {
                total: 0,
                current: 1,
            },
            tableData: [{
                col1: '1',
                col2: '2'
            }, {
                col1: '3',
                col2: '4'
            }, {
                col1: '5',
                col2: '6'
            }],
            tableCols: [{
                type: 'selection',
                width: 60,
                align: 'center'
            }, {
                title: 'skn',
                key: 'col1'
            }, {
                title: '商品图片',
                key: 'col2'
            }, {
                title: '商品信息',
                key: 'col2'
            }, {
                title: '库存状态',
                key: 'col2'
            }, {
                title: '当前价格(元)',
                key: 'col2'
            }, {
                title: '结算比例',
                key: 'col2'
            }, {
                title: '预估佣金(元)',
                key: 'col2'
            }, {
                title: '商品状态',
                key: 'col2'
            }, {
                title: '操作',
                render: (h, params) => {
                    return (
                        <action-group>
                            <i-button type="error" size="small" onClick={() => this.del(params.row)}>删除</i-button>
                        </action-group>
                    );
                }
            }]
        };
    },
    methods: {
        search() {
            // 在这里实现异步查询的方法，建议在service中做
            let params = Object.assin(this.query, this.pageData);

            console.log(params);
        },
        reset() {
            this.$refs.filter.reset();
        },
        pageChange() {
            this.search();
        },
        edit() {},
        del() {},
        delProducts() {

        }
    },
    components: {Demo}
};
</script>

<style lang="scss">
</style>