<template>
    <layout-body>
        <layout-filter ref="filter" :model="query">
            <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="价格区间">
                <Price v-model="query.price"></Price>
            </filter-item>
            <filter-item label="库存状态">
                <Select v-model="query.stockStatus" 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="addSellPool">添加到推广池</Button>
        </layout-action>

        <layout-list>
            <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 CandidateListService from 'services/kol/candidate-list-service';
import {Price} from './components';

export default {
    data() {
        return {
            query: {
                brand: null,
                sort: [],
                price: [],
                stockStatus: null
            },
            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: '预估佣金',
                key: 'col2'
            }]
        };
    },
    created() {
        this.candidateListService = new CandidateListService();
    },
    methods: {
        search() {
            let params = Object.assign(this.query, this.pageData);

            console.log(params);
        },
        addSellPool() {

        },
        reset() {
            this.$refs.filter.reset();
        },
        pageChange() {
            this.search();
        },
        edit() {},
        del() {}
    },
    components: {
        Price
    },
    watch: {
    }
};
</script>

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