<template>
    <div class="main">
        <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList" :topBg="topBg"/>

        <div class="charts">
            <div class="chartsItem">
                <p class="title">交易分析</p>
                <transaction-analysis :data="transactionList" />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">消费时段分析</p>
                <time-period-analysis :data="timePeriodList"/>
                <analyse />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">消费水平<text class="unit">(Top 5)</text></p>
                <level-top :data="levelTopList"></level-top>
                <analyse />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">业态适配型</p>
                <business-format :data="businessTypeList"/>
                <analyse />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">消费转化对比图</p>
                <consumption-compare :data="compareList"/>
                <analyse />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">商超畅销品</p>
                <bestseller-shop :data="bestsellerList"/>
                <analyse />
            </div>
        </div>
    </div>
</template>

<script>
import headerTop from "./components/headerTop.vue";
import transactionAnalysis from "./components/bussiness/transactionAnalysis.vue";
import TimePeriodAnalysis from "./components/bussiness/timePeriodAnalysis.vue";
import analyse from "./components/analyse.vue";
import LevelTop from "./components/bussiness/levelTop.vue";
import BusinessFormat from "./components/bussiness/businessFormat.vue";
import ConsumptionCompare from "./components/bussiness/consumptionCompare.vue";
import BestsellerShop from "./components/bussiness/bestsellerShop.vue";

export default {
    name: "businessPortrait",
    components: {
        BestsellerShop,
        ConsumptionCompare,
        BusinessFormat, LevelTop, analyse, TimePeriodAnalysis, headerTop,transactionAnalysis},
    data() {
        return {
            topBg:'linear-gradient(180deg, #EDD1AF 0%, #EED7BB 100%);',//顶部组件的悬浮背景色
            labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
            title:'交易画像',//页面标题
            bgColor:'180deg, #FFBA07 0%, #F38309 100%',
            bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/businessPortraitBg.svg',//背景图片路径
            time: '',//跳转携带的时间
            menu: {},//手机配置信息
            transactionList:[],//交易分析数据
            timePeriodList:[],//消费时段分析
            levelTopList:[],//消费水平排行
            businessTypeList:[],//业态适配型
            compareList:[],//消费转化对比图
            bestsellerList:[]//商超畅销品
        }
    },
    onLoad(option) {
        //跳转的时候带上时间
        this.time = option.time
        //  获取手机参数对页面进行适配
        let systemInfo = uni.getSystemInfoSync()
        // 把获取到的手机参数保存
        uni.setStorageSync('phoneInfo', systemInfo)
        this.statusBarHeight = Number(systemInfo.statusBarHeight)
        this.menu = uni.getMenuButtonBoundingClientRect()
        //交易分析
        this.getTransactionList()
        //消费时段分析
        this.getTimePeriodList()
        //消费水平排行
        this.getLevelTopList()
        //业态适配型
        this.getBusinessTypeList()
        //消费转化对比图
        this.getCompareList()
        //商超畅销品
        this.getBestsellerList()
    },
    methods:{
        getTransactionList(){
            let res=[]
            this.transactionList = res
        },
        getTimePeriodList(){
            let res={
                series: [
                    {
                        name: "气泡一",
                        data: [[2,35,35],[6,18,18],[10,5,5],[14,8,8],[18,9,9],[22,18,18]]
                    }
                ]
            }
            this.timePeriodList = res
        },
        getLevelTopList(){
            let res = {
                categories:["商超","餐饮","水果饮品","小吃","连锁品牌","全业态"],
                series: [
                    {
                        name: "高消费",
                        textColor: "#FFFFFF",
                        data: [35,36,31,33,13,34]
                    },
                    {
                        name: "普通消费",
                        textColor: "#FFFFFF",
                        data: [18,27,21,24,6,28]
                    },
                    {
                        name: "低消费",
                        textColor: "#FFFFFF",
                        data: [18,27,21,24,6,28]
                    }
                ]
            }
            this.levelTopList = res
        },
        getBusinessTypeList(){
            let res= {
                series: [
                    {
                        data: [{"name":"商超","value":27.6},
                            {"name":"水果饮品","value":20.7},
                            {"name":"餐饮","value":15.5},
                            {"name":"小吃","value":11.9},
                            {"name":"地方特产","value":8.4},
                            {"name":"连锁品牌","value":7.2},
                            {"name":"粽子","value":5.6},
                            {"name":"箱包工艺","value":3.1}]
                    }
                ]
            };
            this.businessTypeList = res
        },
        getCompareList(){
            let res = {
                categories: ["0:00","4:00","8:00","12:00","16:00","20:00","24:00"],
                series: [
                    {
                        index:0,
                        name: "客单数",
                        data: [18,40,25,50,45,65,70]
                    },
                    {
                        index:1,
                        name: "车辆数",
                        data: [180,150,170,140,130,250,280]
                    }
                ]
            }
            this.compareList = res
        },
        getBestsellerList(){
            let res = [
                {
                    series: [
                        {
                            data: [{"name":"热销商品","value":39.8},
                                {"name":"","value":60.2}],
                            list:[{name:'红牛',value:29.3},
                                {name:'农夫山泉',value:25.6},
                                {name:'康师傅红烧牛肉面桶装牛肉面桶装',value:16.5},
                                {name:'方便面',value:15.2},
                                {name:'其他',value:13.4}]
                        }
                    ]
                },
                {
                    series: [
                        {
                            data: [{"name":"滞销商品","value":21.6},
                                {"name":"","value":78.4}],
                            list:[{name:'水杯',value:29.3},
                                {name:'吸油纸',value:25.6},
                                {name:'康师傅红烧牛肉面桶装牛肉面桶装',value:16.5},
                                {name:'纸巾',value:15.2},
                                {name:'其他',value:13.4}]
                        }
                    ]
                }
            ]
            this.bestsellerList = res
        }
    }
}
</script>

<style scoped lang="scss">
.main {
  width: 100vw;
  min-height: 100vh;
    .charts{
        width: 100%;
        box-sizing: border-box;
        padding: 28px 16px 24px;
        background: #fff;
        .chartsItem{
            .title{
                font-size: 17px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 24px;
                .unit{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 20px;
                    margin-left: 4px;
                }
            }
        }
    }
}
</style>