<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>
                <filling-degree :data="fillDegreeList" />
                <analyse />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">品牌消费水平<text class="unit">(Top 5)</text></p>
                <band-level :data="bandLevelList"/>
                <analyse />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">业态消费水平<text class="unit">(Top 5)</text></p>
                <consumption-level :data="consumLevelList" />
                <analyse />
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">品牌指数</p>
                <div class="labelList">
                    <div class="labelItem" v-for="(item,index) in brandLabelList" :key="index">
                        <p class="name">{{item.name}}<text class="number">({{item.value}})</text></p>
                    </div>
                </div>
                <band-number :data="brandInfoList"/>
                <analyse />
            </div>
        </div>
    </div>
</template>

<script>
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";

export default {
    name: "businessPortrait",
    components: {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',//背景图片路径
            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:[]//品牌指数列表
        }
    },
    onLoad(option) {
        //跳转的时候带上时间
        this.time = option.time
        //  获取手机参数对页面进行适配
        let systemInfo = uni.getSystemInfoSync()
        // 把获取到的手机参数保存
        uni.setStorageSync('phoneInfo', systemInfo)
        this.statusBarHeight = Number(systemInfo.statusBarHeight)
        this.menu = uni.getMenuButtonBoundingClientRect()
        //业态充盈度
        this.getFillDegreeList()
        //品牌消费水平
        this.getBandLevelList()
        //业态消费水平
        this.getConsumLevelList()
        //品牌指数列表
        this.getBrandInfoList()
    },
    methods:{
        getFillDegreeList(){
            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 = res
        },
        getBandLevelList(){
            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
        },
        getConsumLevelList(){
            let res = {
                categories:["商超","餐饮","水果饮品","小吃","连锁品牌"],
                series: [
                    {
                        name: "高消费",
                        textColor: "#FFFFFF",
                        data: [35,36,31,33,13]
                    },
                    {
                        name: "普通消费",
                        textColor: "#FFFFFF",
                        data: [18,27,21,24,6]
                    },
                    {
                        name: "低消费",
                        textColor: "#FFFFFF",
                        data: [18,27,21,24,6]
                    }
                ]
            }
            this.consumLevelList = res
        },
        getBrandInfoList(){
            let res = [{icon:'',name:'老娘舅',company:'老娘舅餐饮股份有限公司',time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,8,8]},
                {icon:'',name:'老乡鸡',company:'老乡鸡餐饮股份有限公司',time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,9,9]},
                {icon:'',name:'永和大王',company:'永和大王餐饮股份有限公司',time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[8,8,8]}]
            this.brandInfoList = 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;
                }
            }
            .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;
                        }
                    }
                }
            }
        }
    }
}
</style>