<template>
    <Card>
        <div slot="title">
            推荐位前10位点击分析
        </div>
        <Row class="title-time code-row-bg" justify="center" align="middle">
            <Col span="6">
               推荐位(下拉列表选择,默认猜你喜欢)：
            </Col>
            <Col span="8">
                <Dropdown trigger="click" @on-click="handleMenu">
                    <a href="javascript:void(0)">
                        {{button1_focus}}
                        <Icon type="arrow-down-b"></Icon>
                    </a>
                    <Dropdown-menu slot="list">
                        <Dropdown-item v-for="item in button1" :key="item.text" :name="item.cid">{{item.text}}</Dropdown-item>
                    </Dropdown-menu>
                </Dropdown>
            </Col>
        </Row>
        <Table class="overview-table" :columns="overview" :data="overviewData"></Table>
    </Card>
</template>

<script>
import * as service from 'service.pc';
import * as _ from 'lodash';
let first_enter=true;
export default {
    name: 'product-detail',
    props: ['appEdition','type','date'],
    methods: {
        loadData: function() {
            service.get('data-analysis-web/resources_analysis/recommendedTop10', {
                appType:this.type,
                date:this.date,
                appEdition:this.appEdition,
                cid:this.button1_focus_index
            }).then(result => {
                result = result.data;
                this.overviewData=result.map((item,index)=>{
                    item.recommond=this.button1_focus;
                    return item;
                });
            });
        },
        handleMenu(val){
            this.button1_focus_index=val;
            this.button1_focus=_.find(this.button1,{cid:val}).text;
        },
        loadRecommendSelect(){
            service.get('data-analysis-web/resources_analysis/recommendedSelect', {}).then(result => {
                result = result.data;
                this.button1=result;
                this.button1_focus=result[0].text;
                this.button1_focus_index=result[0].cid;
                this.loadData();
            });
        }
    },
    created(){
        this.loadRecommendSelect();
    },
    watch:{
        date() {
            this.loadData();
        },
        appEdition() {
            this.loadData();
        },
        type() {
            this.loadData();
        },
        button1_focus(){
            if(!first_enter)this.loadData();
            if(first_enter)first_enter=false;
        }
    },
    data(){
        return {
            button1:[],
            button1_focus:'',
            button1_focus_index:'',
            overview: [
                {
                    title: '日期',
                    key: 'date',
                    render(row) {
                        return `<span>${row.date}</span>`;
                    }
                },
                {
                    title: '平台',
                    key: 'appType',
                    render(row) {
                        return `<span>${row.appType}</span>`;
                    }
                },
                {
                    title: '推荐位',
                    key: 'recommond',
                    render(row) {
                        return `<span>${row.recommond}</span>`;
                    }
                },
                {
                    title: 'index',
                    key: 'indexNum',
                    render(row) {
                        return `<span>${row.indexNum}</span>`;
                    }
                },
                {
                    title: '点击PV',
                    key: 'pvNum',
                    render(row) {
                        return `<span>${row.pvNum}</span>`;
                    }
                },
                {
                    title: '点击UV',
                    key: 'uvNum',
                    render(row) {
                        return `<span>${row.uvNum}</span>`;
                    }
                },
                {
                    title: '入篮数',
                    key: 'carNum',
                    render(row) {
                        return `<span>${row.carNum}</span>`;
                    }
                },
                {
                    title: '订单数',
                    key: 'orderNum',
                    render(row) {
                        return `<span>${row.orderNum}</span>`;
                    }
                }
            ],
            overviewData: []
        }
    }
};
</script>

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