<template>
    <layout-body>
        <layout-filter ref="filter" :model="query">
            <filter-item label="SKN编码">
                <Input v-model.trim="query.productSkn" :maxlength="9"></Input>
            </filter-item>
            <filter-item label="商品名称">
                <Input v-model.trim="query.productName"></Input>
            </filter-item>
            <filter-item label="品牌">
                <select-search-brand v-model="query.brandId"></select-search-brand>
            </filter-item>
            <filter-item label="库存状态">
                <Select v-model="query.stockStatus" clearable>
                    <Option value="0">库存正常</Option>
                    <Option value="1">即将售罄</Option>
                    <Option value="2">已售罄</Option>
                </Select>
            </filter-item>
            <filter-item label="品类" class="filter-category">
                <select-category v-model="query.sort"></select-category>
            </filter-item>
            <filter-item label="商品状态">
                <Select v-model="query.prodStatus" 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>
            <Button type="error" @click="delProducts">删除</Button>
        </layout-action>

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

<script>
import CandidateListService from 'services/kol/candidate-list-service';
import _ from 'lodash';

export default {
    data() {
        return {
            query: {
                productSkn: '',
                productName: '',
                brandId: null,
                sort: [],
                stockStatus: null,
                prodStatus: null
            },
            pageData: {
                total: 0,
                current: 1,
            },
            tableData: [],
            tableCols: [{
                type: 'selection',
                width: 60,
                align: 'center'
            }, {
                title: 'skn',
                key: 'productSkn',
                align: 'center'
            }, {
                title: '商品图片',
                key: 'imageUrl',
                align: 'center',
                render: (h, params) => {
                    return h('img', {
                        attrs: {
                            src: params.row.imageUrl,
                            style: 'max-width: 100%; display: block; margin: 0 auto;'
                        }
                    });
                }
            }, {
                title: '商品信息',
                align: 'center',
                key: 'productInfo',
                render: (h, params) => {
                    return h('div', [
                        h('p', {
                            domProps: {
                                innerHTML:
                                    `名称：<a target = '_black' style='color: #00b0ff; text-decoration: underline;'
                                        href="//www.yohobuy.com/product/${params.row.productSkn}.html">
                                        ${params.row.productName}</a>`
                            }
                        }),
                        h('p', `品牌：${params.row.brandName}`),
                        h('p', `品类：${params.row.sortName}`)
                    ]);
                }
            }, {
                title: '库存状态',
                key: 'stockStatusName',
                align: 'center',
                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',
                align: 'center'
            }, {
                title: '结算比例',
                key: 'commissionRate',
                align: 'center',
                render: (h, params) => {
                    return <span>{`${params.row.commissionRate.substring(0, params.row.commissionRate.length - 2)}%`}</span>;
                }
            }, {
                title: '预估佣金(元)',
                key: 'brokerage',
                align: 'center'
            }, {
                title: '商品状态',
                width: 150,
                key: 'productStatusName',
                align: 'center',
                render: (h, params) => {
                    if (params.row.productStatusName.indexOf('异常') > -1) {
                        return h('span', {
                            attrs: {
                                style: 'color: red'
                            }
                        }, params.row.productStatusName);
                    } else {
                        return <span>{params.row.productStatusName}</span>;
                    }
                }
            }, {
                title: '操作',
                align: 'center',
                render: (h, params) => {
                    return (
                        <action-group>
                            <i-button type="error" size="small" onClick={() => this.delProducts(params.row.productSkn)}>删除</i-button>
                        </action-group>
                    );
                }
            }]
        };
    },
    created() {
        this.candidateListService = new CandidateListService();
        this.search();
    },
    methods: {
        filterValues() {
            let params = {
                page: this.pageData.current,
                size: 10,
                productSkn: +this.query.productSkn,
                productName: this.query.productName,
                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', ''),
                stockStatus: this.query.stockStatus,
                productStatus: this.query.prodStatus
            };

            return _.pickBy(params, val => val);
        },
        search() {
            if (_.isObject(this.query) &&
                typeof this.query.productSkn !== 'undefined' &&
                !_.isFinite(+this.query.productSkn)) {
                this.$Message.error('SKN编码只能是数字', 3);
                return;
            }

            this.candidateListService.queryPoolProductList(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);
                } else {
                    this.$Message.error(ret.message);
                }
            });
        },
        reset() {
            this.$refs.filter.reset();
            this.search();
        },
        pageChange(val) {
            this.pageData.current = val;
            this.search();
        },
        delProducts(skn) {
            const _this = this;

            if (typeof skn !== 'number' && !_this.productSknStr) {
                return this.$Message.error('请先选择要删除的商品');
            }

            this.$Modal.confirm({
                title: '删除推广商品',
                content: '是否确认删除？商品被删除后，前台小程序中不再展示。',
                onOk() {
                    _this.candidateListService.batchDelProduct({
                        productSknStr: typeof skn === 'number' ? skn : _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}`;
                }
            });
        }
    }
};
</script>

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