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

      <div class="charts">
          <div class="chartsItem">
              <p class="title">客群分析</p>
              <customer-first :data="customer" />
<!--              <no-data />-->
          </div>
          <div class="chartsItem" style="margin-top: 32px">
              <p class="title">客群分析</p>
              <customer-second :data="genderBubbleList" />
              <analyse />
          </div>
          <div class="chartsItem" style="margin-top: 32px">
              <p class="title">客群消费偏好</p>
              <consum-prefer :data="consterPreferList" />
              <analyse />
          </div>
          <div class="chartsItem" style="margin-top: 32px">
              <p class="title">客群消费水平</p>
              <consumption-level :data="consumptionLevelList"/>
              <analyse />
          </div>
          <div class="chartsItem" style="margin-top: 32px">
              <p class="title">业态消费偏好</p>
              <business-type :data="businessTypeList"></business-type>
              <analyse />
          </div>
      </div>
  </div>
</template>

<script>
import request from '@/util/index.js'
import headerTop from "./components/headerTop.vue";
import customerFirst from "./components/guest/customerFirst.vue";
import customerSecond from "./components/guest/customerSecond.vue";
import analyse from "./components/analyse.vue";
import ConsumPrefer from "./components/guest/consumPrefer.vue";
import ConsumptionLevel from "./components/guest/consumptionLevel.vue";
import BusinessType from "./components/guest/businessType.vue";
import NoData from "./components/noData.vue";
export default {
    name: "guestPortrait",
    components:{NoData, BusinessType, ConsumptionLevel, ConsumPrefer, analyse, headerTop,customerFirst,customerSecond},
    data() {
        return {
            topBg:'linear-gradient(180deg, #A1D0C1 0%, #B1D9CD 100%);',//顶部组件的悬浮背景色
            labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
            title:'客群画像',//页面标题
            bgColor:'180deg, #30C8ED 0%, #0B9353 100%',//标签背景颜色
            bgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/commercial/guestPortraitBg.svg',//背景图片路径
            time:'',//跳转携带的时间
            menu:{},//手机配置信息
            customer:{}, // 客群分析第一个
            genderBubbleList:[],//男女的气泡图
            consterPreferList:[],//客群消费偏好
            consumptionLevelList:[],//客群消费水平
            businessTypeList:[]//业态偏好
        }
    },
    onLoad(option){
        //跳转的时候带上时间
        this.time = option.time
        //  获取手机参数对页面进行适配
        let systemInfo = uni.getSystemInfoSync()
        // 把获取到的手机参数保存
        uni.setStorageSync('phoneInfo',systemInfo)
        this.statusBarHeight = Number(systemInfo.statusBarHeight)
        this.menu = uni.getMenuButtonBoundingClientRect()
        // 把获取图表数据的方法统一放在一起 然后去请求接口拿到数据  再分批传到相对应的图标组件
        // 每个图表都是用组件的方式引入的 数据是通过prop传入的
        // 每个组件需要的数据格式都注释在方法的下面 方便修改，接口拿到数据之后 就是对数据进行处理 普通的遍历数组和遍历对象的方法
        //customer
        this.getCustomer()
        //客群分析男女的气泡图
        this.getGenderBubbleList()
        //客群消费偏好
        this.getConsterPreferList()
        //客群消费水平
        this.getConsumptionLevelList()
        //业态偏好
        this.getBusinessTypeList()
    },
    methods:{
        //customer
        // 用async await直接等待接口数据返回之后再对数据直接进行处理 节约时间
        async getCustomer(){
            const req = {
                Province_Code:'340000',
                Statistics_Date:this.time,
                Serverpart_ID:416,
                ShowConsumptionLevel:true,
                ShowConvertRate:true
            }
            let totalData = await request.$webGet('CommercialApi/Revenue/GetTransactionAnalysis',req)
            this.customer = totalData.Result_Data
        },
        //客群分析男女的气泡图
        async getGenderBubbleList(){
            let result = {
                man:'',
                woman:'',
                res:[]
            }
            const req = {
                statisticsType:2,
                provinceCode:'340000',
                serverpartId:416,
                statisticsMonth:'202303'
            }
            let totalData = await request.$webGet('CommercialApi/Customer/GetCustomerRatio',req)
            totalData.Result_Data.List.forEach(item=>{
                // 判断男性和女性 然后赋值
                if (item.name === '男性'){
                    result.man = item.data[0]
                }else if(item.name === '女性'){
                    result.woman = item.data[0]
                }
            })
            const bubbleReq = {
                provinceCode:'340000',
                serverpartId:416,
                statisticsMonth:'202303'
            }

            let bubbleData = await request.$webGet('CommercialApi/Customer/GetCustomerGroupRatio',bubbleReq)
            result.res = bubbleData.Result_Data.List
            // let res = [
            //     {
            //         name: "男",
            //         data: [[25,60,30],[40,35,17]]
            //     },
            //     {
            //         name: "女",
            //         data: [[25,35,17],[35,15,15]]
            //     }
            // ]
            this.genderBubbleList = result
        },
        //客群消费偏好
        async getConsterPreferList(){
            const date = new Date(this.time)
            let y = date.getFullYear()
            let m = date.getMonth() + 1
            if (m<10){
                m ='0' + m
            }

            const req = {
                statisticsType:1,
                startMonth:`202303`,
                endMonth:`202303`,
                provinceCode: '340000',
                serverpartId: 416
            }
            const data = await request.$webGet('CommercialApi/Customer/GetCustomerSaleRatio',req)
            console.log('data',data)
            let res = {
                categories:[],
                series:[
                    {name: "男", data: []},
                    {name: "女", data: []}
                ],
                max:''
            }
            data.Result_Data.CustomerSaleList.forEach(item=>{
                res.categories.push(item.BusinessTradeName)
                res.series[0].data.push(item.MaleRatio)
                res.series[1].data.push(item.FemaleRatio)
            })
            res.max = data.Result_Data.MaxSexRatio

            // let res = {
            //     categories: ['餐饮','商超','水果饮品','连锁品牌','粽子','小吃'],
            //     series: [
            //         {name: "男", data: [90,110,165,195,187,172]},
            //         {name: "女", data: [190,210,105,35,27,102]}
            //     ]
            // }
            this.consterPreferList = res
        },
        //客群消费水平
        async getConsumptionLevelList(){
            const req = {
                provinceCode:'340000',
                serverpartId:416,
                statisticsMonth:'202303'
            }
            const data = await request.$webGet('CommercialApi/Customer/GetCustomerConsumeRatio',req)
            console.log('data',data)
            let res = []
            data.Result_Data.List.forEach(item=>{
                res.push({name:item.name,big:item.data[3],normal:item.data[1]+item.data[2],small:item.data[0]})
            })

            // let res=[{name:'男',big:'14.8',normal:'41.7',small:'43.5'},
            //     {name:'女',big:'44.1',normal:'31.7',small:'24.2'}]
            this.consumptionLevelList = res
        },
        //业态偏好
        async getBusinessTypeList(){
            const req = {
                ProvinceCode:'340000',
                StatisticsDate:'2023-04-02',
                serverpartId:416
            }
            const data = await request.$webGet('CommercialApi//Revenue/GetBusinessTradeRevenue',req)
            let res = []
            let all = 0
            data.Result_Data.BusinessTradeRank.forEach((item,index)=>{
                if (index<=4){
                    res.push({name:`${item.name} ${item.value}%`,value:Number(item.value)})
                    all+=Number(item.value)
                }else if(index===5){
                    res.push({name:`其他${(100-all).toFixed(2)}%`,value:Number((100 - all).toFixed(2))})
                }
            })
            console.log('res21312312',res)
            let result = [
                {
                    data:res
                }
            ]

            // let res=[
            //     {
            //         data: [{name:"餐饮 35.6%",value:35.6},
            //             {name:"小吃 22.5%",value:22.5},
            //             {name:"水果饮品 17.3%",value:17.3},
            //             {name:"粽子 15.2%",value:15.2},
            //             {name:"商超 5.8%",value:5.8},
            //             {name:"其他 3.6%",value:3.6}]
            //     }
            // ]
            this.businessTypeList = result
        }
    }
}
</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;
      }
    }
  }
}
</style>
