<template>
    <div class="main">
<!--      <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">-->
<!--        <commercial-type :have="2"/>-->
<!--      </div>-->
        <header-top ref="headerTop" :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"
        :topLeftBg="topLeftBg" :topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"
                    :haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType" :pageIndex="3"/>
        <div class="charts">
            <div class="chartsItem">
                <p class="title">营收分析<span class="dateText">{{lastDay}}</span></p>
                <revenue-analysis :data="monthDetail"/>
            </div>

          <div class="chartsItem" style="margin-top: 32px">
            <div class="titleTop">
              <p class="title">本月自营计划</p>
              <div class="question" @click.stop="handleShowNotice">
                <image src="https://eshangtech.com/ShopICO/ahyd-BID/index/noticeQuestion.svg"></image>
              </div>
              <div v-if="showNotice" class="titleTopNotice">{{monthNoticeText}}</div>
              <div v-if="showNotice" class="meng" @click.stop="handleNoShowNotice"></div>
            </div>
            <view class="box" @click="handleGoServiceInfo('month')">
              <view class="top">
                <view class="big">
                  <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
                </view>
                <view class="text">
                  <view class="textTop">
                    <view class="left">
                      <p class="number">{{plan.percentageMonth?plan.percentageMonth + '%':'-'}}</p>
                      <p v-if="plan.percentageMonth>=100" class="desc"><image class="success" src="https://eshangtech.com/ShopICO/ahyd-BID/index/successMonth.svg"></image></p>
                    </view>
                    <view class="right">
                      <text class="comparePlan">比计划： </text>
                      <view class="box2">
                        <image class="addIcon" :src="plan.MonthGrowth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                        <p class="text">{{monthAdd?monthAdd + '%':'-'}}</p>
                      </view>
                    </view>
                  </view>
                  <div class="progressPlan">
                    <div class="trans" :style="{width:`${plan.percentageMonth>=100?100:plan.percentageMonth}%`}"></div>
                    <!--                  <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
                    <!--                  <view class="trans" :style="{width: plan.percentageMonth + '%'}"></view>-->
                    <!--                    <image class="img"  src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png"></image>-->
                    <!--                  <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
                  </div>
                </view>
              </view>
              <view class="bottom">
                <view class="success" style="margin-right: 39px">
                  <p class="text">本月已完成<text class="unit">/元</text></p>
                  <p class="money">{{plan.RevenueMonth_Amount?plan.RevenueMonth_Amount:'-'}}</p>
                </view>
                <view class="success">
                  <p class="text">本月计划<text class="unit">/元</text></p>
                  <p class="money">{{plan.BudgetMonth_Amount?plan.BudgetMonth_Amount:'-'}}</p>
                </view>
              </view>
            </view>
          </div>
          <div class="chartsItem" style="margin-top: 32px">
            <div class="titleTop">
              <p class="title">年度自营计划</p>
              <div class="question" @click.stop="handleShowNoticeYear">
                <image src="https://eshangtech.com/ShopICO/ahyd-BID/index/noticeQuestion.svg"></image>
              </div>
              <div v-if="showNoticeYear" class="titleTopNotice">{{yearNoticeText}}</div>
              <div v-if="showNoticeYear" class="meng" @click.stop="handleNoShowNoticeYear"></div>
            </div>
            <view class="box" @click="handleGoServiceInfo('year')">
              <view class="top">
                <view class="big">
                  <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>
                </view>
                <view class="text">
                  <view class="textTop">
                    <view class="left">
                      <p class="number">{{plan.percentageYear?plan.percentageYear + '%':'-'}}</p>
                      <p v-if="plan.percentageYear>=100" class="desc" style="color: #4E68FF"><image class="success" src="https://eshangtech.com/ShopICO/ahyd-BID/index/yearSuccess.svg"></image></p>
                    </view>
                    <view class="right">
                      <text class="comparePlan">比计划： </text>
                      <div class="box2">
                        <image class="addIcon" :src="plan.YearGrowth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                        <p class="text">{{yearAdd?yearAdd + '%':''}}</p>
                      </div>
                    </view>
                  </view>
                  <div class="progressPlan">
                    <div class="transYear" :style="{width:`${plan.percentageYear>=100?100:plan.percentageYear}%`}"></div>
                    <!--                  <image class="img" :style="{width: plan.percentageYear + '%'}"  src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png"></image>-->
                    <!--                  <div class=pro :style="{width:(100 - plan.percentageYear)+ '%'}"></div>-->
                  </div>
                </view>
              </view>
              <view class="bottom">
                <view class="success" style="margin-right: 39px">
                  <p class="text">年度已完成<text class="unit">/元</text></p>
                  <p class="money">{{plan.RevenueYear_Amount?plan.RevenueYear_Amount:'-'}}</p>
                </view>
                <view class="success">
                  <p class="text">年度计划<text class="unit">/元</text></p>
                  <p class="money">{{plan.BudgetYear_Amount?plan.BudgetYear_Amount:'-'}}</p>
                </view>
              </view>
            </view>
          </div>

<!--            <div class="chartsItem" style="margin-top: 32px">-->
<!--                <p class="title">客流客单交易</p>-->
<!--                <contract-guarantee :data="orderTransaction"/>-->
<!--            </div>-->
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">同比分析</p>
                <view class="tab" >
                    <view v-for="(item,index) in tabList" :key="index" :class="selectTab===item.value?'tabItem tabItemActive':'tabItem'" @click="handleChangeTab(item.value)">{{item.name}}</view>
                </view>
                <div class="subItem">
                    <p class="title">{{selectTab===0?'营收同比':selectTab===1?'客单同比':selectTab===2?'均价同比':''}}</p>
                    <div class="money">
                        <div class="top">
                            <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/blueMoney.svg"></image>
                            <p class="sumMoney">{{revenue.data?revenue.data:'-'}}</p>
                        </div>
                        <div class="bottom">
                            <image class="icon" :src="revenue.add>0?'https://eshangtech.com/ShopICO/ahyd-BID/commercial/addArrow.svg':revenue.add<0?'https://eshangtech.com/ShopICO/ahyd-BID/commercial/decline.svg':''"></image>
                            <p class="add">{{revenue.add?revenue.add+'%':'-'}}</p>
                            <p class="text">(相比去年同日)</p>
                        </div>
                    </div>
                </div>
                <div class="subItem">
                    <div style="display: flex;align-items: center;justify-content: space-between">
                        <p class="title" style="margin-top: 20px">{{selectTab===0?'营收特征分析':selectTab===1?'客单对比':selectTab===2?'均价对比':''}}</p>
                        <text v-if="selectTab===0" style="margin-top: 12px">单位: 万元</text>
                        <text v-if="selectTab===1" style="margin-top: 12px">单位: 笔</text>
                        <text v-if="selectTab===2" style="margin-top: 12px">单位: 元</text>
                    </div>
                    <div v-if="moneyCompareList.series && moneyCompareList.series.length>0">
                        <money-compare :data="moneyCompareList"/>
                    </div>
                    <no-data v-else/>
                </div>
                <div class="subItem ">
                    <div style="display: flex;align-items: center;justify-content: space-between">
                        <p class="title" style="margin-top: 20px">营收同比分析</p>
                        <text  style="margin-top: 12px">单位: 万元</text>
                    </div>
                    <div v-if="trendsList.series && trendsList.series.length>0">
                        <revenue-trends :data="trendsList"/>
                    </div>
                    <no-data v-else/>
                </div>
                <analyse :analyseInfo="{analysisins_type: selectTab===0?1305:selectTab===1?1306:selectTab===2?1307:'',analysisins_format: 2000}"/>
            </div>
            <div class="chartsItem" style="margin-top: 32px">
                <p class="title">{{month}}月营收类型比例</p>
                <div class="progress">
                    <div class="top">
                        <div class="left">
                            <text class="title">自营</text>
                            <text class="value" style="margin-left: 4px">{{revenueType.own?revenueType.own:''}}%</text>
                        </div>
                        <div class="right">
                            <text class="value">{{revenueType.ectocyst?revenueType.ectocyst:''}}%</text>
                            <text class="title" style="margin-left: 4px">外包</text>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="first" :style="{width:revenueType.own+'%'}"></div>
                        <div class="second" :style="{width:revenueType.ectocyst+'%'}"></div>
                    </div>
                </div>
            </div>

          <div class="chartsItem" style="margin-top: 32px">
            <p class="title">合同保底</p>
            <contract-guarantee :data="contractList"/>
          </div>

        </div>
    </div>
</template>

<script>
import headerTop from "./components/headerTop.vue";
import RevenueAnalysis from "./components/manager/revenueAnalysis.vue";
import ContractGuarantee from "./components/manager/contractGuarantee.vue";
import MoneyCompare from "./components/manager/moneyCompare.vue";
import analyse from "./components/analyse.vue";
import RevenueTrends from "./components/manager/revenueTrends.vue";
import request from '@/util/index.js'
import NoData from "./components/noData.vue";
import commercialType from "./commercialType.vue";
import {getFieldEnum} from "../../util/dateTime";
import SliderPage from "./components/sliderPage.vue";

export default {
    name: "businessPortrait",
    components: {
      SliderPage,
      NoData, RevenueTrends, MoneyCompare, ContractGuarantee, RevenueAnalysis, headerTop,analyse,commercialType},
    data() {
        return {
            topBg:'linear-gradient(180deg, #D9CCEF 0%, #DED3F2 100%);',
            labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
            tabList:[{name:'营收金额',value:0},{name:'客单量',value:1},{name:'客单均价',value:2}],//选项卡列表
            selectTab:0,//当前选中
            title:'经营画像',//页面标题
            bgColor: '180deg, #996CFF 0%, #5D43F8 100%',
            bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/managePortraitBg.svg',//背景图片路径
            page:'/pages/commercialBI/managePortrait',

            pageType:2000,
            detailBoxBg:'linear-gradient(136deg, #F3EFFE 0%, #FFFFFF 100%);',
            topLeftBg:'linear-gradient(180deg, rgba(153, 108, 255, 0.2) 0%, rgba(93, 67, 248, 0.2) 100%)',// 类别背景
            topLeftColor:'#6347F9',// 类别文字颜色
            iconObj:{
              car:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carPortrait.svg',
              charge:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/chargePortraitBg.svg',
              bady:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/babyPortrait.svg',
              guestRoom:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/guestRoomPortrait.svg'
            },
            haveIconObj:{
              have:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/havePortrait.svg',
              noHave:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/noHavePortrait.svg'
            },
            time: '',//跳转携带的时间
            menu: {},//手机配置信息
            revenueList:[],//营收分析
            contractList:{},//合同保底
            orderTransaction:{},//客流客单交易
            revenueAll:[],//三组的营收信息
            revenue:{},//营收信息
            moneyCompareList:{},//营收对比
            trendsList:[],//营收趋势
            revenueType:{},//营收占比
            plan:{},//月度和年度接口的返回参数 一起的
            monthAdd:'',//月每天的相对增加
            yearAdd:'', // 年度计划增加的百分比
            showNotice:false,
            showNoticeYear:false,
            serviceInfo:{}, //当前服务区信息
            backType:'',//返回的页面类型
            analyseInfo:{
                analysisins_type: 1301
            },
            monthNoticeText:'',
            yearNoticeText:'',
            lastDay:'',
            month:'',
          haveFun:{},
          monthDetail:{},// 月度汇总信息 头部的内容
          serviceTypeObj:{},// 服务区类型对象
          serviceInfoObj:{}
        }
    },
    onLoad(option) {
      if (option.serviceInfo){
        this.serviceInfo = JSON.parse(option.serviceInfo)
      }
        this.backType = option.type
        //跳转的时候带上时间
        this.time = option.time
      // 服务区类型枚举
      this.handleServiceType()
    },
    onShow(){
      this.monthDetail = undefined
        let storeTime = uni.getStorageSync('lastDay')
      this.lastDay = uni.getStorageSync('lastDay')
        if (storeTime){
            this.time = storeTime
        }
        let date = new Date(this.time)
        let m = date.getMonth() + 1
        if (m<10){
            m = '0' + m
        }
        this.month = m
        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.getRevenueList()
        //客流客单交易
        // this.getOrderTransaction()
        //营收对比
        this.getMoneyCompareList()
        //营收趋势
        this.getTrendsList()
        //营收占比
        this.getRevenueType()
        //月度计划、年度计划
        this.monthYearPlan()
      //问号显示的内容
      this.handleNoticeMonth()
      this.handleNoticeYear()
      //   服务区基本信息
      this.getServiceInfo()
      //   月度汇总信息
      this.getSummaryMonth()
      this.handleChangeCurrent()
    },
    onUnload() {
        this.$util.addUserBehavior()
    },
    methods:{
      handleChangeCurrent(){
        this.$refs.headerTop.handleChangeCurrent()
      },
      // 枚举服务区类型 SERVERPART_TYPE
      async handleServiceType(){
        const data = await getFieldEnum({ FieldExplainField: 'SERVERPART_TYPE' });
        console.log('data',data)
        let obj = {}
        data.forEach(item=>{
          obj[Number(item.value)] = item.label
        })
        console.log('obj',obj)
        this.serviceTypeObj = obj
      },
      //获取服务区基本信息
      async getServiceInfo(){
        let req = {
          ServerpartId:this.serviceInfo.Serverpart_ID
        }
        const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
        this.serviceInfoObj = total.Result_Data
        this.haveFun = {
          car:total.Result_Data.HASPILOTLOUNGE,
          charge:total.Result_Data.HASCHARGE ,
          bady:total.Result_Data.HASMOTHER ,
          gusetHome:total.Result_Data.HASGUESTROOM
        }
      },
        // 拿到服务区详情页需要的数据 然后带着跳转过去
      handleGoServiceInfo(type){
          let serviceInfo = this.serviceInfo

          let num = serviceInfo.SERVERPART_NAME.indexOf('服务区')
          if (num!==-1){
              serviceInfo.name = serviceInfo.SERVERPART_NAME.slice(0,num)
              serviceInfo.unit = serviceInfo.SERVERPART_NAME.slice(num,100)
          }else{
              serviceInfo.name = serviceInfo.SERVERPART_NAME
          }
          if (type==='month'){
              let service = {
                  Budget_Amount:this.plan.BudgetMonth_Amount,
                  Budget_Degree:this.plan.MonthBudget_Degree,
                  Growth_Rate:this.plan.MonthGrowth_Rate,
                  Revenue_Amount:this.plan.RevenueMonth_Amount,
                  Serverpart_ID:serviceInfo.Serverpart_ID,
                  Serverpart_Name:serviceInfo.SERVERPART_NAME,
                  name:serviceInfo.name,
                  unit:serviceInfo.unit
              }
              const date = new Date(this.time)
              let month = date.getMonth() + 1
            if (this.serviceInfo.Serverpart_ID){
              uni.navigateTo({
                url:`/pages/commercialBI/serviceDetail?serviceInfo=${JSON.stringify(service)}&month=${month}&type=month`
              })
            }else{
              this.$util.toNextRoute('navigateTo', `/pages/commercialBI/planMonth?lastDay=${this.lastDay}&type=${type}`)
            }
          }else{
              let service = {
                  Budget_Amount:this.plan.BudgetYear_Amount,
                  Budget_Degree:this.plan.YearBudget_Degree,
                  Growth_Rate:this.yearAdd,
                  Revenue_Amount:this.plan.RevenueYear_Amount,
                  Serverpart_ID:serviceInfo.Serverpart_ID,
                  Serverpart_Name:serviceInfo.SERVERPART_NAME,
                  name:serviceInfo.name,
                  unit:serviceInfo.unit
              }
            if (this.serviceInfo.Serverpart_ID){
              uni.navigateTo({
                url:`/pages/commercialBI/serviceDetail?serviceInfo=${JSON.stringify(service)}&type=year`
              })
            }else{
              this.$util.toNextRoute('navigateTo', `/pages/commercialBI/planMonth?lastDay=${this.lastDay}&type=${type}`)
            }
          }
      },
      async handleNoticeMonth(){
        let date = new Date(this.lastDay)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        if(m<10){
          m = '0'+m
        }
        //本月的
        let req = {
          SearchParameter:{
            STATISTICS_DATE:`${y}-${m}`,
            ANALYSISINS_TYPE:'1011',
            ANALYSISINS_FORMAT:'3000'
          },
          PageIndex:1,
          PageSize:10
        }
        const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
        if (data.Result_Data.List && data.Result_Data.List.length>0){
          this.monthNoticeText = data.Result_Data.List[0].ANALYSIS_CONTENT
        }


      },
      async handleNoticeYear(){
        let date = new Date(this.lastDay)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        if(m<10){
          m = '0'+m
        }
        //本年
        let reqYear = {
          SearchParameter:{
            STATISTICS_DATE:`${y}`,
            ANALYSISINS_TYPE:'1012',
            ANALYSISINS_FORMAT:'3000'
          },
          PageIndex:1,
          PageSize:10
        }
        const totalData = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',reqYear)
        if (totalData.Result_Data.List && totalData.Result_Data.List.length>0){
          this.yearNoticeText =  totalData.Result_Data.List[0].ANALYSIS_CONTENT
        }
      },
        async nearestService(){
            let seat = uni.getStorageSync('seatInfo');
            let req = {
                longitude:seat.longitude,
                Province_Code:'340000',
                latitude:seat.latitude,
            }
            const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
            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)
        },
        handleShowNotice(){
            this.showNotice = true
        },
        handleNoShowNotice(){
            this.showNotice = false
        },
        handleShowNoticeYear(){
            this.showNoticeYear = true
        },
        handleNoShowNoticeYear(){
            this.showNoticeYear = false
        },
        async getSummaryMonth(){
          // let currentService = uni.getStorageSync('currentService')
          console.log('this.time',this.time)
          const date = new Date(this.time)
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          let d = date.getDate()
          if (m<10){
            m = '0'+m
          }
          if (d<10){
            d = '0'+d
          }
          const req= {
            pushProvinceCode:'340000',
            Statistics_StartDate:`${y}-${m}-01`,
            Statistics_Date:`${y}-${m}-${d}`,
            Serverpart_ID:this.serviceInfo.SERVERPART_NAME==='安徽驿达'?null:this.serviceInfo.Serverpart_ID
          }
          const data = await request.$webGet('CommercialApi/Revenue/GetSummaryRevenue',req)
          console.log('data22222',data)
          this.monthDetail = data.Result_Data.RevenuePushModel
          if (this.serviceInfo.SERVERPART_NAME!=='安徽驿达' && this.monthDetail.BudgetRevenue){
            this.monthDetail.comparePlan = Number(this.$util.getMoney(((this.monthDetail.CashPay/this.monthDetail.BudgetRevenue)-1)*100))
            console.log('monthDetail',this.monthDetail)
          }
        },

        async getRevenueList(){
            let req = {
                statisticsDate:this.time,
                provinceCode:'340000',
                Serverpart_ID:this.serviceInfo.Serverpart_ID ||'',
                SPRegionType_ID:this.serviceInfo.SPRegionType_ID || ''
            }
            let totalData = await request.$webGet('CommercialApi/Contract/GetContractAnalysis',req)
            this.revenueList = {
                ContractProfitLoss:totalData.Result_Data.ContractProfitLoss,
                ShopCount:totalData.Result_Data.ShopCount,
                SalesPerSquareMeter:totalData.Result_Data.SalesPerSquareMeter,
                ExpiredShopCount:totalData.Result_Data.ExpiredShopCount,
                ContractList:totalData.Result_Data.ContractList
            }
            this.contractList = {
                title:'完成率',
                value:totalData.Result_Data.ContractCompletionDegree
            }
            this.orderTransaction = {
                title:'转化率',
                value:totalData.Result_Data.ConvertRate
            }
        },
        //拿到合同列表
        // async getContractList(){
        // let req = {
        //   statisticsDate:this.time,
        //   provinceCode:'340000',
        //   Serverpart_ID:this.serviceInfo.Serverpart_ID,
        //   SPRegionType_ID:this.serviceInfo.SPRegionType_ID
        // }
        // let totalData = await request.$webGet('CommercialApi/Contract/GetContractAnalysis',req)
        //
        //
        // },
        // getOrderTransaction(){
        //     let res = {
        //         title: '转化率',
        //         value: 50.5
        //     }
        //     this.orderTransaction = res
        // },
        //选项卡改变
        handleChangeTab(value){
            this.selectTab = value
            this.revenue = this.revenueAll[this.selectTab]
            this.moneyCompareList = this.revenue.list
        },
        async getMoneyCompareList(){
          let req
          if (this.serviceInfo.SERVERPART_NAME==='安徽驿达'){
            req = {
              StatisticsDate:this.time,
            }
          }else{
            req = {
              StatisticsDate:this.time,
              ServerpartId:this.serviceInfo.Serverpart_ID ||''
            }
          }

            const data = await request.$webGet('CommercialApi/Revenue/GetRevenueCompare',req)
            let RevenueAmount = [] //营收金额 除以10000的金额
            let normalAmount = [] //不除以10000的金额
            let compareWordDay = [] //对比工作日
            let RevenueMax = 0
            let TicketCountList = [] // 客单量
            let TicketMax = 0
            let AvgTicketAmountList = [] // 客单均价
            let AvgTicketMax = 0
            if (data.Result_Data.RevenueAmountList && data.Result_Data.RevenueAmountList.length>0){
              data.Result_Data.RevenueAmountList.forEach(item=>{
                let list = []
                let listNormal = []
                let qoqAddList = [] //环比增加
                item.data.forEach(subItem=>{
                  let number = (subItem[1] / 10000 ).toFixed(2)
                  if (number>RevenueMax){
                    RevenueMax = number
                  }
                  list.push(number)
                  qoqAddList.push(subItem[2])
                  listNormal.push(subItem[1])
                })
                normalAmount.push({name:item.name,data:listNormal})
                RevenueAmount.push({name:item.name,data:list,qoqAdd:qoqAddList,holiday: item.value})
              })
            }
            if (data.Result_Data.TicketCountList && data.Result_Data.TicketCountList.length>0){
              data.Result_Data.TicketCountList.forEach(item=>{
                let list = []
                let qoqAddList = [] //环比增加
                item.data.forEach(subItem=>{
                  let number = (subItem[1]).toFixed(0)
                  if (number > TicketMax){
                    TicketMax = Number(number)
                  }
                  qoqAddList.push(subItem[2])
                  list.push(number)
                })
                TicketCountList.push({name:item.name,data:list,qoqAdd:qoqAddList,holiday: item.value})
              })
            }
            if (data.Result_Data.AvgTicketAmountList && data.Result_Data.AvgTicketAmountList.length>0){
              data.Result_Data.AvgTicketAmountList .forEach(item=>{
                let list = []
                let qoqAddList = [] //环比增加
                item.data.forEach(subItem=>{
                  let number = (subItem[1]).toFixed(2)
                  if (number>AvgTicketMax){
                    AvgTicketMax = number
                  }
                  list.push(number)
                  qoqAddList.push(subItem[2])
                })
                AvgTicketAmountList.push({name:item.name,data:list,qoqAdd:qoqAddList,holiday: item.value})
              })
            }
            // 因为有三个选项卡 把三种情况要展示的内容 放在一个对象里面 三个对象放一个数组里面 点击选项卡切换显示的对象就可以了
             this.revenueAll = [
                {
                    data:this.$util.fmoney(data.Result_Data.RevenueAmount),
                    add:data.Result_Data.RevenueAmountYOYRate,
                    list:{
                        categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                        series: RevenueAmount,
                        normal:normalAmount,
                        max:RevenueMax,
                        type:0
                    },
                },
                {
                    data:this.$util.noDecimal(data.Result_Data.TicketCount),
                    add:data.Result_Data.TicketCountYOYRate ,
                    list:{
                        categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                        series: TicketCountList,
                        max:TicketMax,
                        type:1
                    },
                },
                {
                    data:this.$util.fmoney(data.Result_Data.AvgTicketAmount),
                    add:data.Result_Data.AvgTicketAmountRate ,
                    list:{
                        categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                        series: AvgTicketAmountList,
                        max:AvgTicketMax,
                        type:2
                    },
                }
            ]
            this.revenue = this.revenueAll[this.selectTab]
            // let res = {
            //     categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            //     series: [
            //         {
            //             name: "平日平均",
            //             data: [7,10,8,5,8,8,9,8,5,6,7,7]
            //         },
            //         {
            //             name: "周末平均",
            //             data: [5,8,8,7,6,6,6,8,7,7,6,7]
            //         },
            //         {
            //             name: "节假日平均",
            //             data: [5,10,4,4,7,8,6,5,5,6,10,7]
            //         }
            //     ]
            // }
            this.moneyCompareList = this.revenue.list
        },
        async getTrendsList(){
            let date = new Date(this.time)
            let y = date.getFullYear()
            // 查今年去年两年的数据
            let req
            let yesReq
            if (this.serviceInfo.SERVERPART_NAME==='安徽驿达'){
              req={
                ProvinceCode:'340000',
                StatisticsDate:y,
                StatisticsType:1,
              }
            }else{
              req ={
                ProvinceCode:'340000',
                StatisticsDate:y,
                StatisticsType:1,
                ServerpartId:this.serviceInfo.Serverpart_ID ||''
              }
            }
          if (this.serviceInfo.SERVERPART_NAME==='安徽驿达'){
            yesReq={
              ProvinceCode:'340000',
              StatisticsDate:y - 1,
              StatisticsType:1,
            }
          }else{
            yesReq = {
              ProvinceCode:'340000',
              StatisticsDate:y - 1,
              StatisticsType:1,
              ServerpartId:this.serviceInfo.Serverpart_ID ||''
            }
          }

            const data = await request.$webGet('CommercialApi/Revenue/GetRevenueTrend',req)
            const yesData = await request.$webGet('CommercialApi/Revenue/GetRevenueTrend',yesReq)
            let list = []
            let max = 0
            data.Result_Data.List.forEach(item=>{
                item.value = Number((item.value/10000).toFixed(1))
                if (Number(item.value) > max){
                    max = Number(item.value)
                }
                list.push(item.value)
            })
            let yesList = []
            yesData.Result_Data.List.forEach(item=>{
                item.value = Number((item.value/10000).toFixed(1))
                yesList.push(item.value)
            })
            let res={
                categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                series:[{
                    name: "今年",
                    data: list
                },{
                    name: "去年",
                    data: yesList
                }],
                max:max
            }
            // let res={
            //     categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            //     series:[{
            //         name: "",
            //         data: [3,4,5,4.8,5,4.2,4.5,5,5.5,5.7,8,9]
            //     }]
            // }
            this.trendsList = res
        },
        async getRevenueType(){
          const date = new Date(this.time)
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          if (m<10){
             m = '0'+ m
          }
            const req = {
                pushProvinceCode:'340000',
                Statistics_StartDate:`${y}-${m}-01`,
                Statistics_Date:this.time,
                Serverpart_ID:this.serviceInfo.SERVERPART_NAME==='安徽驿达'?null:this.serviceInfo.Serverpart_ID
            }
            const data = await request.$webGet('CommercialApi/Revenue/GetSummaryRevenue',req)
            let all = 0
            if (data.Result_Data && data.Result_Data.BusinessTypeList && data.Result_Data.BusinessTypeList.length>0){
              data.Result_Data.BusinessTypeList.forEach(item=>{
                all +=Number(item.value)
              })
              data.Result_Data.BusinessTypeList.forEach(item=>{
                item.rate = ((Number(item.value) / all)*100).toFixed(2)
              })
              let res={
                own:data.Result_Data.BusinessTypeList[1].rate,
                ectocyst:data.Result_Data.BusinessTypeList[0].rate
              }
              this.revenueType = res
            }else{
              this.revenueType = null
            }
        },
        monthYearPlan(){
            const monthDate= {
                Province_Code:'340000',
                Serverpart_ID:this.serviceInfo.SERVERPART_NAME==='安徽驿达'?null:this.serviceInfo.Serverpart_ID,
                Statistics_Date:this.time
            }
            request.$webGet('CommercialApi/Revenue/GetRevenueBudget',monthDate).then(res=>{
                // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
                this.plan = res.Result_Data
              if (this.plan){
                if (this.plan && this.plan.RevenueMonth_Amount){
                  this.plan.percentageMonth = (res.Result_Data.RevenueMonth_Amount / res.Result_Data.BudgetMonth_Amount*100).toFixed(2)
                }
                if (this.plan && this.plan.RevenueYear_Amount){
                  this.plan.percentageYear = (res.Result_Data.RevenueYear_Amount / res.Result_Data.BudgetYear_Amount*100).toFixed(2)
                }
                // this.plan.percentageMonth = 80
                // let date = new Date(this.time)
                // let nowDay = date.getDate()
                // let day = this.$util.getThisMonthDay(this.time)
                // //一天应该的增长率
                // let oneDay = 100/day
                // // 到了当天的应该有的百分比
                // let thisDayShould= oneDay*nowDay
                // 由于显示的时候 正负号由图片表示 所以要区绝对值展现在页面上
                this.monthAdd = Math.abs(this.plan.MonthGrowth_Rate)
                this.yearAdd = Math.abs(this.plan.YearGrowth_Rate)
                //处理数据 保留小数
                this.plan.RevenueMonth_Amount = this.$util.fmoney(res.Result_Data.RevenueMonth_Amount)
                this.plan.BudgetMonth_Amount = this.$util.fmoney(res.Result_Data.BudgetMonth_Amount)
                this.plan.RevenueYear_Amount = this.$util.fmoney(res.Result_Data.RevenueYear_Amount)
                this.plan.BudgetYear_Amount = this.$util.fmoney(res.Result_Data.BudgetYear_Amount)
              }
            })
        }
    }
}
</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{
            .titleTop{
                display: flex;
                align-items: center;
                position: relative;
                .title {
                    font-size: 32rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 44rpx;

                }
                .question{
                    width: 16px;
                    height: 16px;
                    margin-left: 4px;
                    display: flex;
                    align-items: center;
                    image{
                        width: 100%;
                        height: 100%;
                    }
                }
                .titleTopNotice{
                    position: absolute;
                    padding: 12px;
                    left:35%;
                    width: 50vw;
                    background: #FFFFFF;
                    box-shadow: 0 10px 10px 0 rgba(22,0,2,0.1);
                }
                .meng{
                    width: 100vw;
                    height: 100vh;
                    position: fixed;
                    top: 0;left: 0;
                }
            }
            .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;
                }
                .dateText{
                  display: inline-block;
                  margin-left: 16rpx;
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #A69E9F;
                }
            }
            .progress{
                width:calc(100vw - 32px);
                margin-top: 12px;
                .top{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .left,.right{
                        display: flex;
                        align-items: center;
                        .title{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #160002;
                        }
                        .value{
                            font-size: 18px;
                            font-family: DINAlternate-Bold, DINAlternate;
                            font-weight: bold;
                            color: #160002;
                        }
                    }
                }
                .bottom{
                    width: 100%;
                    height: 14px;
                    position: relative;
                    .first{
                        height: 100%;
                        position: absolute;
                        left: 0;top: 0;
                        background: #1E80FF;
                        border-radius: 2px 0  0  2px;
                    }
                    .first:after{
                        position: absolute;
                        content:'';
                        right: 0;top: 0;
                        background: #fff;
                        width: 1px;
                        height: 100%;
                        z-index:111;
                    }
                    .second{
                        height: 100%;
                        position: absolute;
                        right: 0;top: 0;
                        background: #00C2FF;
                        border-radius: 0 2px 2px 0  ;
                    }
                    .second:before{
                        position: absolute;
                        content:'';
                        left: 0;top: 0;
                        background: #fff;
                        width: 1px;
                        height: 100%;
                        z-index:111;
                    }
                }
            }
            .box {
                width: 100%;
                padding: 12px 16px;
                box-sizing: border-box;
                border-radius: 8px;
                background: #f5f2f2;
                margin-top: 12px;
                .top {
                    width: 100%;
                    display: flex;
                    .big {
                        width: 40px;
                        height: 40px;
                        background: #ffffff;
                        border-radius: 8px;
                        border: 1px solid #ebebeb;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-right: 8px;
                        .icon {
                            width: 20px;
                            height: 20px;
                        }
                    }
                    .text {
                        width: calc(100% - 60px);
                        padding: 2px 0;
                        .textTop{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .left{
                                display: flex;
                                align-items: center;
                                .number {
                                    font-size: 36rpx;
                                    font-family: DINAlternate-Bold, DINAlternate;
                                    font-weight: bold;
                                    color: #150002;
                                    line-height: 40rpx;
                                }
                                .desc{
                                    display: flex;
                                    align-items: center;
                                    margin-left: 8px;
                                    font-size: 14px;
                                    color: #FF7043;
                                    .success{
                                        width: 20px;
                                        height: 20px;
                                        margin-right: 4px;
                                    }
                                }
                            }
                            .right{
                                flex: 1;
                                display: flex;
                                justify-content: flex-end;
                                align-items: center;
                                .comparePlan{
                                    font-size: 24rpx;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #a69e9f;
                                    line-height: 36rpx;
                                    white-space: nowrap;
                                }
                                .box2{
                                    display: flex;
                                    align-items: center;
                                    .text{
                                        font-size: 14px;
                                        font-family: DINAlternate-Bold, DINAlternate;
                                        color: #150002;
                                        font-weight: bold;

                                        line-height: 40rpx;
                                    }
                                    .addIcon {
                                        width: 16px;
                                        height: 16px;
                                        margin-right: 2px;
                                    }
                                }
                            }
                        }

                        .progressPlan{
                            width: 100%;
                            height: 8px;
                            border-radius: 5px;
                            background: #fff;
                            margin-top: 8px;
                            position: relative;
                            overflow: hidden;
                            .trans{
                                height: 8px;
                                position: absolute;
                                left: 0;top: 0;
                                border-top-right-radius: 4px;
                                border-bottom-right-radius: 4px;
                                background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
                            }
                            .transYear{
                                height: 8px;
                                position: absolute;
                                left: 0;top: 0;
                                border-top-right-radius: 4px;
                                border-bottom-right-radius: 4px;
                                background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
                            }
                            //.img{
                            //  width: 100%;
                            //  height: 100%;
                            //  position: absolute;
                            //  top: 0;
                            //  left: 0;
                            //  z-index:1;
                            //}
                            //.pro{
                            //  height: 100%;
                            //  position: absolute;
                            //  top: 0;right: 0;
                            //  background: #fff;
                            //  z-index:2;
                            //}

                        }
                    }
                }
                .bottom {
                    display: flex;
                    margin-top: 16px;
                    padding-left: 48px;
                    .success {
                        .text {
                            font-size: 28rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #786b6c;
                            line-height: 40rpx;
                            margin-bottom: 2px;
                            .unit {
                                font-size: 28rpx;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #a69e9f;
                                line-height: 40rpx;
                                margin-left: 2px;
                            }
                        }
                        .money {
                            font-size: 28rpx;
                            font-family: DINAlternate-Bold, DINAlternate;
                            font-weight: 600;
                            color: #160002;
                            line-height: 40rpx;
                        }
                    }
                }
            }
            .tab{
                width: 100%;
                height: 38px;
                background: #F2F1F1;
                border-radius: 4px;
                box-sizing: border-box;
                padding:4px;
                display: flex;
                align-items: center;
                margin-bottom: 12px;
                margin-top: 12px;
                .tabItem{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: calc(100% / 3);
                    height: 30px;
                    border-radius: 4px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                }
                .tabItemActive{
                  color: #160002;
                    background: #FFFFFF;
                }
            }
            .subItem{
                width:100%;
                .title{
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 20px;
                    margin-bottom: 8px;
                }
                .money{
                    width:calc(100% - 32px);
                    padding: 18px 16px;
                    background: #F7F7F7;
                    border-radius: 4px;
                    .top{
                        display: flex;
                        align-items: center;
                        margin-bottom: 4px;
                        .icon{
                            width: 20px;
                            height: 20px;
                            margin-right: 8px;
                        }
                        .sumMoney{
                            font-size: 20px;
                            font-family: DINAlternate-Bold, DINAlternate;
                            font-weight: bold;
                            color: #341D00;
                            line-height: 24px;
                        }
                    }
                    .bottom{
                        display: flex;
                        align-items: center;
                        margin-left: 24px;
                        .icon{
                            width: 14px;
                            height: 14px;
                            margin-right: 4px;
                        }
                        .add{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #FA5151;
                            line-height: 20px;
                            margin-right: 4px;
                        }
                        .text{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #A69E9F;
                            line-height: 20px;
                        }
                    }
                }
            }
        }
    }
}
</style>
