<template>
    <layout-body>
        <layout-filter ref="filter" :model="query">
            <filter-item label="品牌">
                <select-search-brand v-model="query.brandId"></select-search-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="0">库存正常</Option>
                    <Option value="1">即将售罄</Option>
                </Select>
            </filter-item>
            <filter-item>
                <Button type="primary" @click="search">筛选</Button>
                <Button @click="reset">清空条件</Button>
            </filter-item>
        </layout-filter>

        <layout-action v-show="!nullData">
            <Button type="error" @click="addSellPool">添加到推广池</Button>
            <span class="add-num">已添加到推广池：{{spreadPrdCnt}}</span>
        </layout-action>

        <layout-list>
            <Table border :columns="tableCols" :data="tableData" @on-selection-change="changeProductStr" v-show="!nullData"></Table>
            <Page :total="pageData.total" :current="pageData.current"
                        @on-change="pageChange" :page-size="10" show-total v-show="!nullData"></Page>

            <div class="null-data" v-show="nullData">
                <p class="red">请选择查询条件，查找你想要推广的商品。.......</p>
                <p class="red">*注：品牌或品类筛选必须选择其中一个。</p>
                <p><Icon type="android-arrow-forward"></Icon><a href="//www.yohobuy.com/boys-brands/">品牌一览</a></p>
            </div>
        </layout-list>
    </layout-body>
</template>

<script>

import CandidateListService from 'services/kol/candidate-list-service';
import {Price} from './components';
import _ from 'lodash';

export default {
    data() {
        return {
            query: {
                poolId: null,
                brandId: null,
                sort: [],
                price: [],
                stockStatus: null
            },
            pageData: {
                total: 0,
                current: 1,
            },
            nullData: true,
            tableData: [],
            tableCols: [{
                type: 'selection',
                width: 60,
                align: 'center'
            }, {
                title: 'skn',
                key: 'productSkn',
                width: 100,
                align: 'center'
            }, {
                title: '商品图片',
                align: 'center',
                key: 'imageUrl',
                render: (h, params) => {
                    return h('img', {
                        attrs: {
                            src: params.row.imageUrl,
                            style: 'max-width: 100%; display: block; margin: 0 auto;'
                        }
                    });
                }
            }, {
                title: '商品名称',
                key: 'productName',
                align: 'center'
            }, {
                title: '商品品牌',
                key: 'brandName',
                align: 'center'
            }, {
                title: '商品类目',
                key: 'sortName',
                align: 'center'
            }, {
                title: '库存状态',
                key: 'stockStatus',
                align: 'center',
                width: 110,
                renderHeader: (h, params) => {
                    return h('div', [
                        h('strong', params.column.title),
                        h('Tooltip', {
                            attrs: {
                                placement: 'bottom-start',
                                content: '这里指整个商品下所有颜色尺码的库存状态。具体颜色、尺码的库存明细请参考商品详情页面。'
                            }
                        }, [
                            h('Icon', {
                                props: {
                                    type: 'android-alert'
                                },
                                attrs: {style: 'font-size: 16px;vertical-align: text-top; margin-left: 5px;'}
                            })
                        ])
                    ]);
                }
            }, {
                title: '当前价格(元)',
                key: 'currentPrice',
                width: 110,
                align: 'center'
            }, {
                title: '结算比例',
                key: 'commissionRate',
                align: 'center'
            }, {
                title: '预估佣金',
                key: 'brokerage',
                align: 'center'
            }],
            productSknStr: '',
            spreadPrdCnt: null
        };
    },
    created() {
        this.candidateListService = new CandidateListService();
    },
    methods: {
        filterValues() {
            let params = {
                page: this.pageData.current,
                size: 10,
                brandId: +this.query.brandId,
                maxSortId: _.get(this.query, 'sort[0].value') || '',
                middleSortId: _.get(this.query, 'sort[1].value') || '',
                smallSortId: _.get(this.query, 'sort[2].value') || '',
                priceRangeLow: _.get(this.query, 'price[0]') || '',
                priceRangeHigh: _.get(this.query, 'price[1]') || '',
                stockStatus: this.query.stockStatus
            };

            return _.pickBy(params, val => val);
        },
        search() {
            const len = this.query.sort.filter(v => v.value).length;

            if (!this.query.brandId && !len &&
                this.query.price.length ===
                0 &&
            !this.query.stockStatus) {
                this.$Message.warning('请选择筛选条件！');
                return;
            }

            if (!this.query.brandId && !len) {
                this.$Message.warning('请先选择品牌或品类！');
                return;
            }

            this.candidateListService.queryWarehouseProductList(this.filterValues()).then(ret => {
                if (ret && ret.code === 200) {
                    this.tableData = _.get(ret, 'data.list', []);
                    this.pageData.total = _.get(ret, 'data.total', 0);
                    this.pageData.current = _.get(ret, 'data.page', 1);
                    this.spreadPrdCnt = _.get(ret, 'data.spreadPrdCnt', '');
                    this.nullData = false;
                } else {
                    this.$Message.error(ret.message);
                }
            });
        },
        addSellPool() {
            this.candidateListService.batchAddProduct({
                productSknStr: this.productSknStr
            }).then(ret => {
                if (ret && ret.code === 200) {
                    this.$Message.success('添加成功！');
                    this.search();
                } else {
                    this.$Message.error(`添加失败：${ret.message}`);
                }
            });
        },
        changeProductStr(selection) {
            this.productSknStr = '';
            _.each(selection, (item) => {
                if (!this.productSknStr) {
                    this.productSknStr += item.productSkn;
                } else {
                    this.productSknStr += `,${item.productSkn}`;
                }
            });
        },
        reset() {
            this.$refs.filter.reset();
            this.nullData = true;
            this.pageData.total = 0;
            this.pageData.current = 1;
            this.tableData = [];
        },
        pageChange(val) {
            this.pageData.current = val;
            this.search();
        }
    },
    components: {
        Price,
    },
    watch: {
    }
};
</script>

<style lang="scss">
    .ivu-table-column-center .ivu-tooltip-inner {
        white-space: normal !important;
    }

    .add-num {
        float: right;
        margin-top: 15px;
    }

    .null-data {
        width: 260px;
        margin: 180px auto 0;
        line-height: 30px;

        .ivu-icon-android-arrow-forward {
            margin-right: 10px;
        }

        .red {
            color: #ed3f16;
        }
    }
</style>