<template>
    <div class="top-data">
        <Row>
            <Col :xs="24" :sm="12" :md="12" :lg="12">
                <div class="query-item">
                    <div class="query-title">
                        <p>商品top20</p>
                    </div>
                    <ul>
                        <li v-for = "item in productData">
                            <div class="query-info">
                                <div class="info-name">
                                    <tooltip placement="bottom-start" :content="`${item.productName}`">
                                        <div class="info-name-inner">
                                            {{item.productName}}：
                                        </div>
                                    </tooltip>
                                </div>
                                <div class="info-outer">
                                    <div class="info-inner">
                                        <div class="info-bg" :style="{width: `${item.orderAmount/productMax*100}`+ '%'}">
                                            <!-- <div class="pay-order" :style="{width: `${item.payOrderAmount/item.orderAmount*100}`+ '%'}"></div> -->
                                            <div class="info-num">{{Math.round(item.orderAmount)}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </Col>
            <Col :xs="24" :sm="12" :md="12" :lg="12">
                <div class="query-item">
                    <div class="query-title">
                        <p>品牌top20</p>
                    </div>
                    <ul>
                        <li v-for = "item in brandData">
                            <div class="query-info">
                                <div class="info-name">
                                    <tooltip placement="bottom-start" :content="`${item.brandName}`">
                                        <div class="info-name-inner">
                                            {{item.brandName}}：
                                        </div>
                                    </tooltip>
                                </div>
                                <div class="info-outer">
                                    <div class="info-inner">
                                        <div class="info-bg" :style="{width: `${item.orderAmount/brandMax*100}`+ '%'}">
                                            <!-- <div class="pay-order" :style="{width: `${item.payOrderAmount/item.orderAmount*100}`+ '%'}"></div> -->
                                            <div class="info-num">{{Math.round(item.orderAmount)}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>
import * as service from 'service.wap';
export default {
    name: 'top-data',
    props: ['cId'],
    data() {
        return {
            disabled: false,
            productData: [],
            productMax: {},
            brandData: [],
            brandMax: {}
        };
    },
    created() {
        if (this.cId != 3) {
            this.loadProductData();
            this.loadBrandData();

            this.interval = setInterval(() => {
                this.loadProductData();
                this.loadBrandData();
            }, 30000);
        }
    },
    watch: {
        cId() {
            if (this.cId != 3) {
                this.loadProductData();
                this.loadBrandData();
            }
        }
    },
    beforeDestroy() {
        if (this.interval) {
            clearInterval(this.interval);
        }
    },
    methods: {
        loadProductData() {
            service.get('rs/lineShop/queryLineShopProductTop', {
                type: this.cId
            }).then(ret => {
                let t = ret.today;
                let ts = _.map(t, 'productName');
                const productMax = _.max(_.map(t, 'orderAmount'));

                this.productData = t;
                this.productMax = productMax;
            });
        },
        loadBrandData() {
            service.get('rs/lineShop/queryLineShopBrandTop', {
                type: this.cId
            }).then(ret => {
                let t = ret.today;
                let ts = _.map(t, 'brandName');
                const brandMax = _.max(_.map(t, 'orderAmount'));

                this.brandData = t;
                this.brandMax = brandMax;
            });
        }
    }
};
</script>
<style lang="scss">
$queryCircle: #ea6c1f;
$queryCircle02: #2e2d67;
$queryList: #1437ac;
$queryList02: #b2142c;
$queryListDev: #14efb9;
$queryListDev02: #eef92a;
.top-data {
    .query-circle-box {
        padding: 15px 20px 30px;
        border: none;
        box-sizing: border-box;
        font-family: 'Microsoft YaHei';
    }
    .query-item {
        padding: 0 10px 35px;
        font-family: 'Microsoft YaHei';
        border: none;
        box-sizing: border-box;
        .query-title {
            position: relative;
            margin-bottom: 15px;
            border-bottom: 1px solid rgba(145, 145, 145, 0.4);
            box-sizing: border-box;
            p{
                display: inline-block;
                color: #fff;
                font-size: 16px;
                line-height: 35px;
                box-sizing: border-box;
                text-align: center;
                width: 100%;
            }
        }
        li{
            &:nth-child(2n) {
                .info-bg {
                    // background: -moz-linear-gradient(left, $queryList, $queryListDev);
                    // background: -webkit-linear-gradient(left, $queryList, $queryListDev);
                    background: $queryListDev;
                }

                .pay-order {
                    background: #006ea1;
                }

                .info-num {
                    color: $queryListDev;
                }

                .pay-order-num{
                    color: #03b0ff;
                }
            }
        }
        .query-info {
            position: relative;
            width: 100%;
            font-size: 12px;
            margin-bottom: 4px;
        }
        .info-name {
            float: left;
            color: #fff;
            width: 30%;
            height: 20px;
            line-height: 20px;
            box-sizing: border-box;
            .ivu-tooltip{
                width: 100%;
            }
            .ivu-tooltip-rel{
                width: 100%;
            }
            .info-name-inner {
                overflow: hidden;
                -ms-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .info-outer {
            display: inline-block;
            width: 50%;
            height: 20px;
            margin-right: 0;
            padding-right: 0;
            box-sizing: border-box;
        }
        .info-inner {
            display: inline-block;
            width: 100%;
            background: rgba(145, 145, 145, .2);
            border-radius: 100px;
            vertical-align: middle;
        }
        .query-label {
            color: #fff;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 15px;
        }
        .info-bg {
            position: relative;
            width: 0;
            height: 16px;
            border-radius: 100px;
            // background: -moz-linear-gradient(left, $queryList02, $queryListDev02);
            // background: -webkit-linear-gradient(left, $queryList02, $queryListDev02);
            background: $queryListDev02;
            transition: all .2s linear;
        }

        .pay-order {
            position: absolute;
            left: 0;
            top: 0;
            background: #da7100;
            border-radius: 100px;
            height: 16px;
        }

        .pay-order-num{
            color: #ff8607;
        }

        .info-num {
            position: absolute;
            right: -70px;
            font-size: 12px;
            line-height: 20px;
            color: $queryListDev02;
        }
        .ivu-tabs-nav-scroll {
            overflow-x: auto;
            scrollbar-arrow-color: transparent;
            -ms-scrollbar-arrow-color: transparent;
            scrollbar-track-color: transparent;
            -ms-scrollbar-track-color: transparent;
            scrollbar-shadow-color: transparent;
            -ms-scrollbar-shadow-color: transparent;
            &::-webkit-scrollbar
            {
                height: 1px;
                background-color: transparent;
            }
        }
        .ivu-tabs-content {
            .query-info {
                padding: 0 10px;
            }
        }
        .ivu-tabs-nav .ivu-tabs-tab-active {
            color: #fff;
        }
    }
    .query-circle-item {
        .query-circle-container {
            display: table;
            width: 90px;
            height: 90px;
            margin: 0 auto;
            border: 1px solid $queryCircle;
            background-color: $queryCircle;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            border-radius: 50%;
            box-sizing: border-box;
            strong {
                display: table-cell;
                vertical-align: middle;
            }
        }
        .query-circle-name {
            font-size: 14px;
            color: #fff;
            height: 20px;
            line-height: 20px;
            margin-top: 15px;
            margin-bottom: 15px;
            font-weight: bold;
            text-align: center;
        }
    }
    .query-circle {
        margin: 10px 0;
    }
    .query-circle02 {
        .query-circle-item {
            .query-circle-container {
                border: 1px solid $queryCircle02;
                background-color: $queryCircle02;
            }
        }
    }
};
</style>