<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="fillDegreeList.result.series[0].data.length>0">
                    <filling-degree  :data="fillDegreeList" />
                    <analyse :analyseInfo="{analysisins_type: 1502,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="bandLevelList.length>0">
                    <band-level :data="bandLevelList"/>
                    <analyse :analyseInfo="{analysisins_type: 1503,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="consumLevelList.series.length>0">
                    <consumption-level :data="consumLevelList" />
                    <analyse :analyseInfo="{analysisins_type: 1504,analysisins_format: 2000}" />
                </div>
                <no-data v-else/>
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">品牌指数</p>
                <div v-if="brandInfoList.length>0">
                    <div class="labelList">
                        <div class="labelItem" v-for="(item,index) in brandLabelList" :key="index">
                            <p class="name">{{item[0]}}<text class="number">({{item[1]}})</text></p>
                        </div>
                    </div>
                    <band-number :data="brandInfoList"/>
                </div>
                <no-data v-else/>
            </div>
        </div>
    </div>
</template>

<script>
import request from '@/util/index.js'
import headerTop from "./components/headerTop.vue";
import analyse from "./components/analyse.vue";
import FillingDegree from "./components/format/fillingDegree.vue";
import BandLevel from "./components/format/bandLevel.vue";
import ConsumptionLevel from "./components/format/consumLevel.vue";
import BandNumber from "./components/format/bandNumber.vue";
import NoData from "./components/noData.vue";

export default {
    name: "businessPortrait",
    components: {NoData, BandNumber, ConsumptionLevel, BandLevel, FillingDegree, analyse, headerTop},
    data() {
        return {
            topBg:'linear-gradient(180deg, #C6C1F0 0%, #CECBF3 100%);',//顶部组件的悬浮背景色
            labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
            title:'业态品牌',//页面标题
            bgColor: '180deg, #459FFF 0%, #473AFF 100%',
            bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/formatPortraitBg.svg',//背景图片路径
            page:'/pages/commercialBI/formatPortrait',
            time: '',//跳转携带的时间
            menu: {},//手机配置信息
            fillDegreeList:[],//业态充盈度
            bandLevelList:[],//品牌消费水平
            consumLevelList:[],//业态消费水平
            brandLabelList:[{name:'中式快餐',value:5},
                {name:'省内品牌',value:3},
                {name:'地方特色',value:15},
                {name:'这是品类名称',value:5},
                {name:'省内品牌',value:3},
                {name:'地方特色',value:8}],//品牌指数标签列表
            brandInfoList:[],//品牌指数列表
            serviceInfo:{}, //当前服务区信息
            backType:'',//返回的页面类型
            analyseInfo:{
                analysisins_type: 1501
            },
        }
    },
    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.getFillDegreeList()
        //品牌消费水平
        this.getBandLevelList()
        //业态消费水平
        this.getConsumLevelList()
        //品牌指数列表
        this.getBrandInfoList()
    },
    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 getFillDegreeList(){
            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))})
                }
            })
            console.log('res21312312',res)
            let result= {
                series: [
                    {
                        data:res
                    }
                ]
            };
            let obj = {
                result:result,
                Abundant:data.Result_Data.Abundant//是否盈足
            }
            // 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.fillDegreeList = obj
        },
        async getBandLevelList(){

            let req = {
                ProvinceCode:'340000',
                StatisticsDate:this.time,
                ServerpartId:this.serviceInfo.Serverpart_ID,
                ShowWholeBrand:false
            }
            let res =[]
            let totalData = await request.$webGet('CommercialApi/Revenue/GetBusinessBrandLevel',req)
            totalData.Result_Data.legend.forEach(item=>{
                res.push({name:item,small:0,normal:0,big:0})
            })
            res.forEach((item,index)=>{
                totalData.Result_Data.ColumnList.forEach((subItem,subIndex)=>{
                    if (subItem.name==='低消费'){
                        item.small = subItem.data[index]
                    }else if(subItem.name==='普通消费'){
                        item.normal = subItem.data[index]
                    }else if(subItem.name==='高消费'){
                        item.big = subItem.data[index]
                    }
                })
            })
            // let res=[{name:'五芳斋',big:'14.8',normal:'41.7',small:'43.5'},
            //     {name:'驿佰购',big:'44.1',normal:'31.7',small:'24.2'},
            //     {name:'老娘舅',big:'15.2',normal:'70.1',small:'14.5'},
            //     {name:'吉祥馄饨',big:'25.2',normal:'39.9',small:'34.7'}]
            this.bandLevelList = res
        },
        async getConsumLevelList(){

            let req = {
                ProvinceCode:'340000',
                StatisticsDate:this.time,
                ServerpartId:this.serviceInfo.Serverpart_ID,
                ShowWholeTrade:false
            }
            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: [18,27,21,24,6]
            //         },
            //       {
            //         name: "普通消费",
            //         textColor: "#FFFFFF",
            //         data: [18,27,21,24,6]
            //       },
            //       {
            //         name: "高消费",
            //         textColor: "#FFFFFF",
            //         data: [64,46,58,52,88]
            //       },
            //     ]
            // }
            this.consumLevelList = res
            console.log('this.consumLevelList',this.consumLevelList)
        },
        async getBrandInfoList(){
            let req = {
                ProvinceCode:'340000',
                Serverpart_ID:this.serviceInfo.Serverpart_ID,
                Statistics_Date:this.time
            }
            let totalData = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis',req)
            console.log('totalData',totalData)
            this.brandLabelList = totalData.Result_Data.BrandTag

            // let res = [{icon:'',name:'老娘舅',company:'老娘舅餐饮股份有限公司',type:0,time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,8,8]},
            //     {icon:'',name:'老乡鸡',company:'老乡鸡餐饮股份有限公司',type:1,time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,9,9]},
            //     {icon:'',name:'永和大王',company:'永和大王餐饮股份有限公司',type:2,time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[8,8,8]}]
            this.brandInfoList =totalData.Result_Data.ShopBrandList

        }
    }
}
</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;
                }
            }
            .labelList{
                display: flex;
                align-items: center;
                flex-flow: wrap;
                margin-top: 12px;
                .labelItem{
                    background: #EDF0F4;
                    border-radius: 4px;
                    padding:2px 6px;
                    margin-right: 6px;
                    margin-bottom: 6px;
                    .name{
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #160002;
                        line-height: 20px;
                        .number{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #A69E9F;
                            line-height: 20px;
                            margin-left: 4px;
                        }
                    }
                }
            }
        }
    }
}
</style>
