<template>
    <Card class="uv-top">
        <div slot="title">
            访客行为
        </div>
        <Row :gutter="20">
            <Col span="12">
                <Card :bordered="false" dis-hover :padding="0">
                    <div slot="title">
                        <h3>热门品牌TOP{{selNumModel_brand}}</h3>
                    </div>
                    <div slot="extra">
                        数量：
                        <Select v-model="selNumModel_brand" size="small" style="width:50px">
                            <Option v-for="num in selNum" :value="num" :key="num">{{ num }}</Option>
                        </Select>
                    </div>
                    <Table class="overview-table" :columns="overviewCol_brand" :data="overviewData_brand"></Table>
                </Card>
                
            </Col>
            <Col span="12">
                <Card :bordered="false" dis-hover :padding="0">
                    <div slot="title">
                        <h3>热门单品TOP{{selNumModel_product}}</h3>
                    </div>
                    <div slot="extra">
                        数量：
                        <Select v-model="selNumModel_product" size="small" style="width:50px">
                            <Option v-for="num in selNum" :value="num" :key="num">{{ num }}</Option>
                        </Select>
                    </div>
                    <Table class="overview-table" :columns="overviewCol_product" :data="overviewData_product"></Table>
                </Card>
            </Col>
        </Row>
    </Card>
</template>

<script>
import * as service from 'service.pc';
export default {
    name: 'uv-behavior',
    props: ['date','appEdition'],
    data() {
        return {
            phone: 'apple',
            selNumModel_product: 10,
            selNumModel_brand: 10,
            selNum: [
                10,
                20,
                50
            ],
            overviewCol_brand: [
                {
                    title: '关键词',
                    key: 'url',
                    render(row) {
                        return `<span>${row.name}</span>`;
                    }
                },
                {
                    title: '访客数(人)',
                    key: 'num',
                    render(row) {
                        return `<p>${row.uv}</p><i-progress :percent="${row.percent}" hide-info status="normal"></i-progress>`; // eslint-disable-line
                    }
                },
                {
                    title: '引导下单转化率',
                    key: 'lv',
                    align: 'center',
                    render(row) {
                        return `<span>${row.order_rate}%</span>`;
                    }
                }
            ],
            overviewCol_product: [
                {
                    title: '商品名称',
                    key: 'url',
                    render(row) {
                        return `<span>${row.name}</span>`;
                    }
                },
                {
                    title: '商品skn',
                    key: 'skn',
                    render(row) {
                        return `<p>${row.pid}</p>`; // eslint-disable-line
                    }
                },
                {
                    title: '访客数',
                    key: 'lv',
                    align: 'center',
                    render(row) {
                        return `<span>${row.uv}</span><i-progress :percent="${row.percent}" hide-info status="normal"></i-progress>`;
                    }
                },
                {
                    title: '下单转化率',
                    key: 'lvcg',
                    align: 'center',
                    render(row) {
                        return `<span>${row.order_rate}%</span>`;
                    }
                }
            ],
            overviewData_product: [],
            overviewData_brand: []
        };
    },
    components: {},
    created(){
        this.loadData();
    },
    watch: {
        date() {
            this.loadData();
        },
        appEdition() {
            this.loadData();
        },
        selNumModel_product(){
            this.loadData();
        },
        selNumModel_brand(){
            this.loadData();
        }
    },
    methods: {
        loadData: function() {
            //product
            service.get('data-analysis-web/flowsurvey/action_rank', {
                type: 'product',
                date: this.date,
                appEdition: this.appEdition,
                top:this.selNumModel_product
            }).then(result => {
                result = result.data.content;
                let uvs=_.map(result,'uv');
                let maxUa=_.max(uvs);
                result=result.map((item,index)=>{
                    item.percent=100*uvs[index]/maxUa-1;
                    return item;
                });
                this.overviewData_product=result;
            });

            //brand
            service.get('data-analysis-web/flowsurvey/action_rank', {
                type: 'brand',
                date: this.date,
                appEdition: this.appEdition,
                top:this.selNumModel_brand
            }).then(result => {
                result = result.data.content;
                let uvs=_.map(result,'uv');
                let maxUa=_.max(uvs);
                result=result.map((item,index)=>{
                    item.percent=100*uvs[index]/maxUa-1;
                    return item;
                });
                this.overviewData_brand=result;
            });
        }
    }
};
</script>

<style lang="scss">
.uv-top {
    .ivu-progress-inner {
        background-color: transparent !important;
    }
    .num-green {
        color: #00cc66;
    }
    .num-red {
        color: #ff3300;
    }
    .op {
        float: right;
    }
    .ivu-card-body {
        padding-top: 0px;
    }
}
</style>