<template>
    <div class="main">
        <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :analyseInfo="analyseInfo" :topBg="topBg" :page="page" :backType="backType"
                    :serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"/>

        <div class="charts">
            <div class="chartsItem">
                <p class="title">交易分析</p>
                <div v-if="transactionList">
                    <transaction-analysis :data="transactionList" />
                </div>
                <no-data v-else />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">消费时段分析</p>
                <div v-if="timePeriodList.series.length>0">
                    <time-period-analysis :data="timePeriodList"/>
                    <analyse :analyseInfo="{analysisins_type: 1403,analysisins_format: 2000}" />
                </div>
                <no-data v-else />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">消费水平<text class="unit">(Top 5)</text></p>
                <div v-if="levelTopList.series.length>0">
                    <level-top :data="levelTopList"></level-top>
                    <analyse :analyseInfo="{analysisins_type: 1404,analysisins_format: 2000}" />
                </div>
                <no-data v-else />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">业态适配型</p>
                <div v-if="businessTypeList.series[0].data.length>0">
                    <business-format :data="businessTypeList"/>
                    <analyse :analyseInfo="{analysisins_type: 1405,analysisins_format: 2000}" />
                </div>
                <no-data v-else />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">消费转化对比图</p>
                <div v-if="compareList.series[0].data.length>0">
                    <consumption-compare :data="compareList"/>
                    <analyse :analyseInfo="{analysisins_type: 1406,analysisins_format: 2000}" />
                </div>
                <no-data v-else />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">商超畅销品</p>
                <bestseller-shop :data="bestsellerList"/>
                <analyse :analyseInfo="{analysisins_type: 1407,analysisins_format: 2000}" />
            </div>
        </div>
    </div>
</template>

<script>
import request from '@/util/index.js'
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";
import NoData from "./components/noData.vue";

export default {
    name: "businessPortrait",
    components: {
        NoData,
        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',//背景图片路径
            page:'/pages/commercialBI/businessPortrait',
            time: '',//跳转携带的时间
            menu: {},//手机配置信息
            transactionList:[],//交易分析数据
            timePeriodList:[],//消费时段分析
            levelTopList:[],//消费水平排行
            businessTypeList:[],//业态适配型
            compareList:[],//消费转化对比图
            bestsellerList:[],//商超畅销品
            serviceInfo:{} ,//当前服务区信息
            backType:'',//返回的页面类型
            analyseInfo:{
                analysisins_type: 1401
            },
        }
    },
    onLoad(option) {
        let serviceInfo = JSON.parse(option.serviceInfo)
        this.backType = option.type
        this.serviceInfo = serviceInfo
        //跳转的时候带上时间
        this.time = option.time
    },
    onShow(){
        let storeTime = uni.getStorageSync('lastDay')
        if (storeTime){
            this.time = storeTime
        }
        let storeServiceInfo = uni.getStorageSync('currentService')
        if (storeServiceInfo){
            this.serviceInfo = storeServiceInfo
        }
        //  获取手机参数对页面进行适配
        let systemInfo = uni.getSystemInfoSync()
        // 把获取到的手机参数保存
        uni.setStorageSync('phoneInfo', systemInfo)
        this.statusBarHeight = Number(systemInfo.statusBarHeight)
        this.menu = uni.getMenuButtonBoundingClientRect()
        if (!storeServiceInfo){
            this.nearestService()
        }
        //交易分析
        this.getTransactionList()
        //消费时段分析
        this.getTimePeriodList()
        //消费水平排行
        this.getLevelTopList()
        //业态适配型
        this.getBusinessTypeList()
        //消费转化对比图
        this.getCompareList()
        //商超畅销品
        this.getBestsellerList()
    },
    methods:{
        async nearestService(){
            let seat = uni.getStorageSync('seatInfo');
            let req = {
                longitude:seat.longitude,
                Province_Code:'340000',
                latitude:seat.latitude,
            }
            console.log('req',req)
            const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
            console.log('nearestService',data)
            let res = {
                SERVERPART_NAME:data.Result_Data.List[0].SERVERPART_NAME,//服务区
                SPREGIONTYPE_NAME:data.Result_Data.List[0].SPREGIONTYPE_NAME,//片区
                Serverpart_ID:data.Result_Data.List[0].SERVERPART_ID,
                longitude:data.Result_Data.List[0].SERVERPART_X,
                latitude:data.Result_Data.List[0].SERVERPART_Y,
            }
            uni.setStorageSync('currentService',res)
        },
        async getTransactionList(){
            let req = {
                Province_Code:'340000',
                Statistics_Date:this.time,
                Serverpart_ID:this.serviceInfo.Serverpart_ID,
                ShowConsumptionLevel:true,
                ShowConvertRate:true
            }
            let totalData = await request.$webGet('CommercialApi/Revenue/GetTransactionAnalysis',req)

            this.transactionList = totalData.Result_Data
        },
        async getTimePeriodList(){
            let req = {
                Province_Code:'340000',
                Statistics_Date:this.time,
                Serverpart_ID:this.serviceInfo.Serverpart_ID
            }
            let totalData = await request.$webGet('CommercialApi/Revenue/GetTransactionTimeAnalysis',req)

            let res = {
                series: [
                    {
                        name: "",
                        data: totalData.Result_Data.data
                    }
                ]
            }
            // let res={
            //     series: [
            //         {
            //             name: "气泡一",
            //             data: [[2,35,17],[6,18,9],[10,5,5],[14,8,8],[18,9,9],[22,18,9]]
            //         }
            //     ]
            // }
            this.timePeriodList = res
        },
        async getLevelTopList(){
            let req = {
                ProvinceCode:'340000',
                StatisticsDate:this.time,
                ServerpartId:this.serviceInfo.Serverpart_ID,
                ShowWholeTrade:true
            }
            let res = {
                categories:[],
                series:[]
            }
            let totalData = await request.$webGet('CommercialApi/Revenue/GetBusinessTradeLevel',req)
            res.categories = totalData.Result_Data.legend
            totalData.Result_Data.ColumnList.forEach(item=>{
                res.series.push({name:item.name,data:item.data})
            })
            // let res = {
            //     categories:["商超","餐饮","水果饮品","小吃","连锁品牌","全业态"],
            //     series: [
            //       {
            //         name: "低消费",
            //         textColor: "#FFFFFF",
            //         data: [20,27,21,24,6,28]
            //       },
            //       {
            //         name: "普通消费",
            //         textColor: "#FFFFFF",
            //         data: [20,27,21,24,6,28]
            //       },
            //       {
            //         name: "高消费",
            //         textColor: "#FFFFFF",
            //         data: [60,46,58,52,88,44]
            //       }
            //     ]
            // }
            console.log('res',res)
            this.levelTopList = res
        },
        async getBusinessTypeList(){
            const req = {
                ProvinceCode:'340000',
                StatisticsDate:this.time,
                serverpartId:this.serviceInfo.Serverpart_ID
            }
            const data = await request.$webGet('CommercialApi//Revenue/GetBusinessTradeRevenue',req)
            let res = []
            let all = 0
            data.Result_Data.BusinessTradeRank.forEach((item,index)=>{
                if (index<=10){
                    res.push({name:`${item.name} ${item.value}%`,value:Number(item.value)})
                    all+=Number(item.value)
                }else if(index===11){
                    res.push({name:`其他${(100-all).toFixed(2)}%`,value:Number((100 - all).toFixed(2))})
                }
            })
            let result= {
                series: [
                    {
                        data:res
                    }
                ]
            };
            console.log('result',result)
            this.businessTypeList = result
        },
        async getCompareList(){
            const req = {
                Province_Code:'340000',
                Statistics_Date:this.time,
                Serverpart_ID:this.serviceInfo.Serverpart_ID
            }
            const data = await request.$webGet('CommercialApi/Revenue/GetTransactionConvert',req)

            let customerOrder = []
            let customerMax = 0
            let carLit = []
            let carLitMax = 0
            data.Result_Data.TransactionList.data.forEach(item=>{
                let index = item[0]
                if (index === 0 ||index === 4 ||index === 8 ||index === 12 ||index === 16||index === 20||index === 23){
                    if (customerMax<item[1]){
                        customerMax = item[1]
                    }
                   customerOrder.push(item[1])
                }
            })
            data.Result_Data.BayonetList.data.forEach(item=>{
                let index = item[0]
                if (index === 0 ||index === 4 ||index === 8 ||index === 12 ||index === 16||index === 20||index === 23){
                    if (carLitMax<item[1]){
                        carLitMax = item[1]
                    }
                    carLit.push(item[1])
                }
            })

            let res = {
                categories: ["0:00","4:00","8:00","12:00","16:00","20:00","24:00"],
                series:[
                    {
                        index:0,
                        name: "客单数",
                        data: customerOrder,
                        max:customerMax
                    },
                    {
                        index:1,
                        name: "车辆数",
                        data: carLit,
                        max:carLitMax
                    }
                ]
            }

            // 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>
