<template>
  <view class="main">
    <view class="header">
      <image class="headerBg" src="https://eshangtech.com/ShopICO/ahyd-BID/index/indexBg.png"></image>
      <div class="headerTop" :style="{ height: menu.bottom + 5 + 'px'}">
        <view class="selectTime" :style="{ top: menu.top + (menu.height - 22) / 2 + 'px' }">
          <image class="dateIcon" src="/static/images/index/dateTime.svg"></image>
          <picker mode="date" :value="single" :start="startDate" :end="endData" @change="bindDateChange" >
            <view class="time">
              <text class="day">{{ thisDay }}</text>
              <view class="uni-input"  style="background: transparent;padding: 0;height:100%">{{ single }}</view>
              <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>
            </view>
          </picker>
        </view>
      </div>
      <view class="other">
        <view v-if="user.Membership_Id" >
          <view class="topTitle">
            <p class="title">对客营收</p>
            <span class="text">门店上传: <text style="margin-left: 4px" :style="{color:isBig?'red':''}">{{showTableData.Revenue_Upload?showTableData.Revenue_Upload:'-'}}/{{allShopCount?allShopCount:'-'}}</text></span>
          </view>
          <view class="box" @click="handlePage">
            <view class="priceBox">
              <p class="allPrice">{{showTableData.CashPay || '0.00'}}</p>
            </view>
            <image class="start" src="https://ahyd.eshangtech.com/UploadImageDir/ahyd_DIB/index/start.svg"></image>
          </view>
          <view class="addBox">
            <image class="arrowTop" :src="Number(showTableData.compared)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_top.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_reduce.svg'"></image>
            <text class="text">{{showTableData.compared?showTableData.compared + '%':'-' + '%'}}</text>
            <text class="compare">(相比昨日)</text>
          </view>
        </view>
        <view v-if="!user.Membership_Id" class="title" style="font-size: 16px"  @click="handleReg">去授权 </view>
        <view class="type">
          <view class="item">
            <view class="leftImg">
              <image src="/static/images/index/average.svg"></image>
            </view>
            <view class="right">
              <p class="typeName">客单交易<text class="unit">/笔</text></p>
              <p class="price">{{showTableData.TicketCount?showTableData.TicketCount:'-'}}</p>
            </view>
          </view>

          <view class="item">
            <view class="leftImg">
              <image src="/static/images/index/business.svg"></image>
            </view>
            <view class="right">
              <p class="typeName">客单均价<text class="unit">/元</text></p>
              <p class="price">{{showTableData.averagePrice?showTableData.averagePrice:'-'}}</p>
            </view>
          </view>
        </view>

        <view class="detail">
          <view class="detailItem">
            <p class="itemName">
              长款金额<text class="itemUnit">/元</text>
            </p>
            <p class="price">{{ showTableData.Different_Price_More?showTableData.Different_Price_More:'-' }}</p>
          </view>
          <view class="detailItem">
            <p class="itemName">
              短款金额<text class="itemUnit">/元</text>
            </p>
            <p class="price">{{ showTableData.Different_Price_Less?showTableData.Different_Price_Less:'-' }}</p>
          </view>
          <view class="detailItem">
            <p class="itemName">
              优惠金额<text class="itemUnit">/元</text>
            </p>
            <p class="price">{{showTableData.TotalOffAmount?showTableData.TotalOffAmount:'-' }}</p>
          </view>
          <view class="detailItem">
            <p class="itemName">
              移动支付<text class="itemUnit">/元</text>
            </p>
            <p class="price">{{showTableData.MobilePayment?showTableData.MobilePayment:'-' }}</p>
          </view>
          <view class="detailItem">
            <p class="itemName">
              商品出售<text class="itemUnit">/件</text>
            </p>
            <p class="price">{{ showTableData.TotalCount?showTableData.TotalCount:'-' }}</p>
          </view>
          <view class="detailItem">
            <p class="itemName">
              商品均价<text class="itemUnit">/元</text>
            </p>
            <p class="price">{{ showTableData.countave?showTableData.countave:'-' }}</p>
          </view>
          <view class="detailItem">
            <p class="itemName">
              入区车流<text class="itemUnit">/辆</text>
            </p>
            <p class="price">{{carInfo.Vehicle_Count?carInfo.Vehicle_Count:'-'}}</p>
          </view>
          <view class="detailItem">
            <p class="itemName">
              入区率<text class="itemUnit">/%</text>
            </p>
            <p class="price">{{carInfo.Entry_Rate?carInfo.Entry_Rate :'-' }}</p>
          </view>
          <view class="detailItem">
            <p class="itemName">
              停留时长<text class="itemUnit">/分钟</text>
            </p>
            <p class="price">{{carInfo.Stay_Times?carInfo.Stay_Times:'-' }}</p>
          </view>

        </view>
      </view>
    </view>


    <view class="menu">
      <image class="topBg" src="https://eshangtech.com/ShopICO/ahyd-BID/index/menuBg.png"></image>
      <view class="content">
        <div class="tabType">
          <view v-for="(item, index) in tabTypeList" :key="index" class="item" @click="handleGoTab(item)">
            <view class="big">
              <image class="img" :src="item.imgUrl"></image>
            </view>
            <text class="name">{{ item.name }}</text>
          </view>
        </div>

        <div class="detailType">
          <view v-for="(item, index) in detailTypeList" :key="index" class="item">
            <view class="box">
              <p class="title">
                {{ item.name }}<text class="unit">{{ item.unit }}</text>
              </p>
              <p class="money" v-if="index===0 || index===2">{{ item.value }}</p>
              <p class="money" v-else>{{ item.yesterValue }}</p>
              <view v-if="index === 0 || index === 2" class="active">
                <image v-if="Number(item.add)!==0" class="addIcon" :src="Number(item.add)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                <text v-if="Number(item.add)!==0" class="add" :style="{color:Number(item.add)<0?'#07C160':'#FA5151'}">{{ item.add>0?'+' + item.add:item.add }}</text>
                <text v-if="Number(item.add)!==0" class="yesterday">(相比昨日)</text>
              </view>
              <view class="otherBox" v-else>
                <view class="other">本月累计</view>
                <text class="month">{{ item.value }}</text>
              </view>
              <image :src="item.imgIcon" class="imgIcon"></image>
            </view>
          </view>
        </div>

        <div class="propOfReven">
          <p class="title">营收占比</p>
          <view class="tabs">
            <view
                v-for="(item, index) in propOfRevenList"
                :key="index"
                :class="selectTab === item.value ? 'active tabItem' : 'tabItem'"
                @click="handleSelectTab(item.value)"
            >
              {{ item.name }}
            </view>
          </view>

          <view class="chart">
            <div v-show="selectTab===1" v-if="modelProgress.length>0&& theRequest.ProvinceCode==340000">
              <div>
                <div class="operation-c-list" v-for="(item,o) in modelProgress" :key="o">
                  <div class="top">
                    <div class="left">
                      <div class="icon">
                        <image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
                        <text>{{o+1}}</text>
                      </div>
                      <p class="name">{{item.name}}</p>
                    </div>
                    <p class="price">{{item.value}}</p>
                  </div>
                  <div class="bottom">
                    <div class="bar">
                      <div class="progress" :style="{width:item.percentage+'%'}"></div>
                    </div>
                    <p class="number">{{item.percentage+'%'}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="selectTab===2" v-if="regionProgress.length>0">
              <div>
                <div class="operation-c-list" v-for="(item,o) in regionProgress" :key="o">
                  <div class="top">
                    <div class="left">
                      <div class="icon">
                        <image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
                        <text>{{o+1}}</text>
                      </div>
                      <p class="name">{{item.name}}</p>
                    </div>
                    <p class="price">{{item.value}}</p>
                  </div>
                  <div class="bottom">
                    <div class="bar">
                      <div class="progress" :style="{width:item.percentage+'%'}"></div>
                    </div>
                    <p class="number">{{item.percentage+'%'}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="selectTab===3" v-if="areaProgress.length>0">
              <div>
                <div class="operation-c-list" v-for="(item,o) in areaProgress" :key="o">
                  <div class="top">
                    <div class="left">
                      <div class="icon">
                        <image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
                        <text>{{o+1}}</text>
                      </div>
                      <p class="name">{{item.name}}</p>
                    </div>
                    <p class="price">{{item.value}}</p>
                  </div>
                  <div class="bottom">
                    <div class="bar">
                      <div class="progress" :style="{width:item.percentage+'%'}"></div>
                    </div>
                    <p class="number">{{item.percentage+'%'}}</p>
                  </div>
                </div>
              </div>
            </div>
          </view>
        </div>

        <div class="thisMonth" @click="handlePlanPageGo('month')">
          <div class="titleTop">
            <p class="title">本月自营计划</p>
            <div class="question" @click.stop="handleShowNotice">
                <image src="/static/images/index/noticeQuestion.svg"></image>
            </div>
            <div v-if="showNotice" class="titleTopNotice"></div>
            <div v-if="showNotice" class="meng" @click.stop="handleNoShowNotice"></div>
          </div>
          <view class="box">
            <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="/static/images/index/successMonth.svg"></image></p>
                  </view>
                  <view class="right">
                    <text class="comparePlan">比计划： </text>
                    <view class="box2">
                      <image class="addIcon" :src="Number(monthAdd)>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 + '%'}"></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="thisYear" style="margin-top: 0px" @click="handlePlanPageGo('year')">
            <div class="titleTop">
                <p class="title">年度自营计划</p>
                <div class="question" @click.stop="handleShowNoticeYear">
                    <image src="/static/images/index/noticeQuestion.svg"></image>
                </div>
                <div v-if="showNoticeYear" class="titleTopNotice"></div>
                <div v-if="showNoticeYear" class="meng" @click.stop="handleNoShowNoticeYear"></div>
            </div>
          <view class="box">
            <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="/static/images/index/yearSuccess.svg"></image></p>
                  </view>
                  <view class="right">
                    <text class="comparePlan">比计划： </text>
                    <div class="box2">
                      <image class="addIcon" :src="Number(yearAdd)>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 + '%'}"></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>
      </view>
    </view>
    <div class="notice" v-if="isShow">
        <view class="left">
          <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/warning.svg"></image>
          <view class="text">
            <p class="name">{{isShowTitle}}个投诉建议</p>
<!--            <p class="desc"></p>-->
          </view>
        </view>
        <view class="right" @click="handleSearch">去查看</view>
    </div>
    <Tabbar ref="tabbar" :page="page"></Tabbar>
  </view>
</template>

<script>
import {getThisDay, handleYesterday, timestampToTime} from "../../util/dateTime";
import {
  mapActions,
  mapGetters,
  mapState
} from 'vuex';
import request from '@/util/index.js'
import uCharts from '@/components/u-charts.js';
import anhuiYestodayRevenueData from '../everdayRenven/components/anhuiYestodayRevenueData'
import Tabbar from "../../components/tabbar/tabbar.vue";
var rincanvas = {};
export default {
  components: {Tabbar},
  data() {
    const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)

    const nowDay = this.$util.cutDate(new Date(), 'MM月DD日')
    return {
      statusBarHeight:'',// 每个手机的状态栏高度
      page:'/pages/index/index',
      menu:'', // 胶囊按钮高度
      startDate:'',// 开始时间
      endData:'', // 结束时间
      detailList:[  { name: '长款金额', unit: '/元', price:0 },
        { name: '短款金额', unit: '/元', price: 0 },
        { name: '优惠金额', unit: '/元', price: 0 },
        { name: '移动支付', unit: '', price: 0 },
        { name: '商品出售', unit: '', price: 0 },
        { name: '商品均价', unit: '/元', price: 0 },
        { name: '入区车流', unit: '/辆', price: 0 },
        { name: '入区率', unit: '', price: 0 },
        { name: '停留时长', unit: '', price: 0 },],
      tabTypeList:[ { imgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg', path: '/pages/commercialBI/carPortrait', name: '车流画像' },
        { imgUrl: '/static/images/index/guest.svg', path: '/pages/commercialBI/guestPortrait', name: '客群画像' },
        { imgUrl: '/static/images/index/business_icon.svg', path: '/pages/commercialBI/managePortrait', name: '经营画像' },
        { imgUrl: '/static/images/index/trade.svg', path: '/pages/commercialBI/businessPortrait', name: '交易画像' },
        { imgUrl: '/static/images/index/brand.svg', path: '/pages/commercialBI/formatPortrait', name: '业态品牌' },],
      detailTypeList:[{ name: '分润门店', unit: '/个', value: '-',yesterValue:'-', add: '-', imgIcon: '/static/images/index/store.svg' },
        { name: '驿达分润', unit: '/元', value: '-',yesterValue:'-', imgIcon: '/static/images/index/yidaFenrun.svg' },
        { name: '订单配送', unit: '/单', value: '-',yesterValue:'-', add: '-', imgIcon: '/static/images/index/orderDelivery.svg' },
        { name: '采购金额', unit: '/元', value: '-',yesterValue:'-', imgIcon: '/static/images/index/purchaseAmount.svg' },],
      propOfRevenList:[ { name: '经营模式', value: 1 },
        { name: '经营业态', value: 2 },
        { name: '区域经营', value: 3 }],
      selectTab:1, // 选项卡的指针
      mobileData :{}, // 移动支付分账接口返回的数据
      single:'', // 时间选择器选择的时间
      monthAdd:'',//月每天的相对增加
      yearAdd:'', // 年度计划增加的百分比
      thisDay:'', // 显示的星期几
      isBig:false,//判断门店上传的前一个数字是否比后一个数字大
      allShopCount:0,//门店总数
      theRequest: null,
      lastDay: lastDay, // 该页面的最近有效日期
      nowDay: nowDay, // 当天时间
      buyPriceYes:'',//昨日采购金额
      regionList: null,
      nowTab: 1,
      showNotice:false,
      showNoticeYear:false,
      priceMove:false,//价格出现的动画效果
      carInfo:{},//车流信息
      regionProgress: null,
      areaProgress: null,
      modelProgress: null,
      showTableData:{},
      monthPrice:0,//月度累计分润
      yesterdayBillCount:0,//昨日累计配送
      lastDayBillCount:0,//当前日的配送
      buyPriceMonth:0,//月度的采购金额
      totalData:null,
      option:{},//onLoad里面的option
      isShow:false, //投诉建议是否显示
      isShowTitle:0,//投诉建议条数
      plan:{},//月度和年度接口的返回参数 一起的
      ShareShopCountYes:0,//昨日的店铺数
      yesterdayAllPay:0,//前一天的营收总额
      wechatPushSalesList: null, // 甘肃单品排行数据
      seat:{},//用户经纬度信息
      nearServiceInfo:{
          SERVERPART_NAME:"广德服务区",
          SPREGIONTYPE_NAME:"芜湖片区",
          Serverpart_ID:524
      },//最近服务区的有用信息
    }
  },
  watch:{
    user:{
      handler:function (value){
        this.getData(this.option)
      },
      deep:true
    }
  },
  computed: {
    ...mapState({
      'PushAuthority': (state) => state.userData.PushAuthority,
      'ProvinceCode': (state) => state.userData.ProvinceCode,
      toDoMsg:(state)=>{return state.toDoMsg},
    }),
    hasSeverpartIndexAuthority() {
      let theRequest = this.theRequest
      if (this.theRequest && theRequest.ProvinceCode && this.PushAuthority) {
        return this.PushAuthority.some(n =>
            n.ProvinceCode == theRequest.ProvinceCode && n.ShopAnalysisType == 1
        )
      }
      return false
    },
    ...mapGetters({'user':'getUser'})
  },
   onLoad(option){
    // 处理页面显示的时间
     this.single = timestampToTime((new Date(this.lastDay).getTime()))
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()
     // 获取最近有效日期的时间，以昨天为主
    const date = new Date(this.lastDay)
    this.thisDay = getThisDay(date.getDay())
       // 把时间存起来给全部页面都能拿到
    uni.setStorageSync('lastDay',this.lastDay)
     // 判断是否有投诉建议的悬浮框弹出
    for(let key in this.toDoMsg){
      if (key === 'd405ae13-3388-41c0-a5f6-d11194d0a943' && this.toDoMsg['d405ae13-3388-41c0-a5f6-d11194d0a943']){
        this.isShow = true
        this.isShowTitle = this.toDoMsg['d405ae13-3388-41c0-a5f6-d11194d0a943']
      }
    }
    //拿到option的值
    this.option = option
    // 获取数据的方法
     if (this.user.Membership_Id){
       this.getData(option)
     }
     // 判断缓存中是否有位置信息 没有的话 向用户请求 拿到用户当前位置
     this.seat = uni.getStorageSync('seatInfo')
       if (!this.seat){
           let _this=this
           //获取用户的经纬度位置存在stroge里面
           uni.getFuzzyLocation({
               type:'gcj02',
               altitude:true,
               success:function (res){
                   let seatInfo = {
                       latitude:res.latitude,
                       longitude:res.longitude
                   }
                   uni.setStorageSync('seatInfo', seatInfo);
                   this.seat = seatInfo
               }
           })
       }else{
           //拿到最近服务区的数据
           this.nearestService()
       }

       // 获取标签数据
       this.getLabelDetail()
   //设置日期选择器的开始时间和结束时间
       let y = date.getFullYear()
       let m = date.getMonth() + 1
       let d = date.getDate()
       let howDay
       if (d - 8 <0){
           let k = 8 - d
           m = m - 1
           const time = `${y}-${m}`
           howDay = this.$util.getThisMonthDay(time)
           this.startDate = `${y}-${m}-${howDay - k}`
       }else{
           this.startDate = `${y}-${m}-${d - 8}`
       }
       this.endData = this.lastDay
  },
  onShow(){
    // 隐藏掉小程序本身自带的 tabbar 让自定义的tabbar出现
    uni.hideTabBar()
  },
  onHide(){
    // 离开页面投诉建议的悬浮框隐藏掉
    this.isShow = false
    this.selectTab = 1
      if (!this.seat){
          this.nearestService()
      }
  },
  methods:{
    ...mapActions(['memberLogin','getLoginCode']),
    async getLabelDetail(){
        let req = {
            SearchParameter:{
                STATISTICS_DATE:this.lastDay,
                ANALYSISINS_TYPE:'',
                ANALYSISINS_FORMAT:'1000'
            },
            PageIndex:1,
            PageSize:10
        }
        const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
        console.log('getLabelDetail',data)
    },
    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)
        this.nearServiceInfo = res
    },
    handleShowNotice(){
      this.showNotice = true
    },
    handleNoShowNotice(){
      this.showNotice = false
    },
    handleShowNoticeYear(){
      this.showNoticeYear = true
    },
    handleNoShowNoticeYear(){
      this.showNoticeYear = false
    },
    handlePlanPageGo(type){
        this.$util.toNextRoute('navigateTo', `/pages/commercialBI/planMonth?lastDay=${this.lastDay}&type=${type}`)
    },
    handlePage(){
      this.$util.toNextRoute('navigateTo', `/pages/everdayRenven/index?time=${this.lastDay}`)
    },
    handleGoTab(item){
      this.$util.toNextRoute('navigateTo', `${item.path}?time=${this.lastDay}&serviceInfo=${JSON.stringify(this.nearServiceInfo)}`)
    },
    getData(option){
      //老代码
      if (this.user.Membership_Id){
        uni.showLoading({
          title: '正在加载...'
        })
      }
      //判断是否从推送进来
      if (option.ProvinceCode) { // 从推送进入
        this.theRequest = option
        option.time = this.$util.cutDate(option.time, 'YYYY-MM-DD')
        option.month = this.$util.cutDate(option.time, 'YYYYMM')
        this.lastDay = this.$util.cutDate(option.time, 'YYYY-MM-DD')
        //修改时间选择器里面的时间
        this.single = timestampToTime((new Date(this.lastDay).getTime()))
        //显示当前选择的时间是星期几
        const date = new Date(this.lastDay)
        this.thisDay = getThisDay(date.getDay())
        // 老项目的请求数据的那部分
        this.initData()
        //根据新页面请求数据的方法
        this.initYesterdayData()
        //车流分析
        this.getCarInfo()
        //月度计划、年度计划
        this.monthYearPlan()
      } else if (this.user.Membership_Id){ // 默认
        // 不是从推送进来 走正常的请求方法
        // if (!this.PushAuthority){return}
        // if (this.PushAuthority.length > 0) {

        // 定义initData中的入参
        this.theRequest = this.defaultMsg() || {}
        this.theRequest.time = this.lastDay
        this.theRequest.month = this.$util.cutDate(this.lastDay, 'YYYYMM')
        // 请求数据的方法 initData是老项目中的接口，形参true传入 可以让两个没用到的接口不调用
        this.initData()
        // 请求用的到的 昨日的数据
        this.initYesterdayData()
        //车流分析
        this.getCarInfo()
        //月度计划、年度计划
        this.monthYearPlan()
      }

      // 老项目代码
      this.nowTab = this.theRequest.ProvinceCode == 340000 ? 1 : 2
      if (this.theRequest.GroupType == 1010) {
        this.getDetail(this.theRequest)
      }
      // 若省份为甘肃，则加载甘肃单品排行
      if (this.theRequest.ProvinceCode == 620000) {

        this.getRankContent()
      }
    },
    handleReg(){
      this.$util.toNextRoute('redirectTo', '/pages/register/register')
    },
    handleSearch(){
      this.$util.toNextRoute('navigateTo', '/pages/suggestion/suggestion')
    },
    // 改变时间触发的方法 ，改变页面的内容数据
    onRefresh(){
      this.getData(this.option)
    },
    monthYearPlan(){
      const monthDate= {
        Province_Code:'340000',
        Statistics_Date:this.lastDay
      }
      request.$webGet('CommercialApi/Revenue/GetRevenueBudget',monthDate).then(res=>{
        // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
        this.plan = res.Result_Data
        this.plan.percentageMonth = res.Result_Data.MonthBudget_Degree
        this.plan.percentageYear =  res.Result_Data.YearBudget_Degree

        this.monthAdd = this.plan.MonthGrowth_Rate
        this.yearAdd = res.Result_Data.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)
      })
    },
    getCarInfo(){
      const data = {
        Statistics_Date:this.lastDay,
        Province_Code:'340000'
      }
      request.$webGet('CommercialApi/Revenue/GetAvgBayonetAnalysis',data).then(res=>{
        // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
        this.carInfo = res.Result_Data
        this.carInfo.Vehicle_Count = res.Result_Data.Vehicle_Count
      })
    },
     initYesterdayData(){
      let _this = this
       // 传入最近的有效日期就可以拿到当前有效日期的前一天的日期
      let yesterday = handleYesterday(this.lastDay)
       if ((yesterday.substr(yesterday.length-1,1)) === '0'){
         let date = new Date(this.lastDay)
         let y = date.getFullYear()
         let m = date.getMonth() //不加1 反正要减1
         let day = this.$util.getThisMonthDay(this.lastDay)
         yesterday = `${y}-${m}-${day}`
       }
       // 定义入参 除了改变时间 别的和老项目一致
      const data  = {
        Statistics_Date:yesterday,
        Statistics_Month:this.theRequest.month,
        Province_Code:this.theRequest.ProvinceCode,
        pushProvinceCode:this.theRequest.ProvinceCode,
        Serverpart_ID:this.theRequest.ServerpartIds?this.theRequest.ServerpartIds:'',
        SPRegionType_ID:this.theRequest.GroupType==1020?this.theRequest.ServerpartIds:''
      }
      request.$webGet('CommercialApi/Revenue/GetRevenuePushList',data).then(res=>{
        // 计算月总额 拿到昨日的全部对客营收 并拿到相对于昨日的增长比
        let cashPay = 0
        res.Result_Data.List.forEach(item=>{
          cashPay= Number(item.CashPay) + cashPay
        })
        // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
        _this.yesterdayAllPay = cashPay
      })
      //昨日的分润门店
      request.$webGet('CommercialApi/Revenue/GetMobileShare',data).then(res=>{
        // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
        this.ShareShopCountYes = res.Result_Data.ShareShop_Count
      })

       const date = new Date(this.lastDay)
       const y = date.getFullYear()
       let  m = date.getMonth() + 1
       if (m<10){
         m = '0' + m
       }
       //一个月分润门店
       // 如果前一天是上个月 那么拿到的月份还是上一个月的月份 然后结束时间就是前一天 开始时间是月份开始的第一天
       const monthDate={
         Province_Code:'340000',
         StatisticsStartDate:`${y}-${m}-01`,
         StatisticsEndDate:this.lastDay,
       }
       request.$webGet('CommercialApi/Revenue/GetMobileShare',monthDate).then(res=>{
         // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
         this.monthPrice = res.Result_Data.Royalty_Price
       })

       //这一日的订单配送
       const todayData = {
         Province_Code:'340000',
         Statistics_Date: this.lastDay,//2023-04-02
         ShowCompareRate:true
       }
       request.$webGet('CommercialApi/Revenue/GetMallDeliver',todayData).then(res=>{
         // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
         this.lastDayBillCount = res.Result_Data
           this.detailTypeList[2].value = this.lastDayBillCount.DeliverBill_Count
           this.detailTypeList[2].add = this.lastDayBillCount.DeliverBillGrowth_Count
           this.detailTypeList[3].value = this.$util.fmoney(this.lastDayBillCount.MonthDeliver_Price )
           this.detailTypeList[3].yesterValue = this.$util.fmoney(this.lastDayBillCount.Deliver_Price)
       })

       //昨日的订单配送
       const deliveData = {
         Province_Code:'340000',
         Statistics_Date: yesterday
       }
       request.$webGet('CommercialApi/Revenue/GetMallDeliver',deliveData).then(res=>{
         // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
         this.yesterdayBillCount = res.Result_Data.DeliverBill_Count
       })
       //昨日采购金额
       const buyPriceYes = {
         Province_Code:'340000',
         Statistics_Date: yesterday
       }
       request.$webGet('CommercialApi/Revenue/GetMallDeliver',buyPriceYes).then(res=>{
         // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
         this.buyPriceYes = res.Result_Data.Deliver_Price
       })

       //一个月的采购金额
       const buyPrice = {
         Province_Code:'340000',
         StatisticsStartDate:`${y}-${m}-01`,
         StatisticsEndDate:this.lastDay
       }
       request.$webGet('CommercialApi/Revenue/GetMallDeliver',buyPrice).then(res=>{
         // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
         this.buyPriceMonth = res.Result_Data.Deliver_Price
       })
       // 获取营收推送汇总数据
       const allPriceData = {
         pushProvinceCode:'340000',
         Statistics_Date:this.lastDay,
         ShowCompareRate: true
       }
       request.$webGet('CommercialApi/Revenue/GetSummaryRevenue',allPriceData).then(res=>{
         // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
         let result = res.Result_Data
         for(let key in result){
           if (key!=='RevenuePushModel' && key!=='GrowthRate'){
             let all = 0
             // 先算出全部的总额数量 用来计算百分比
             result[key].forEach(item=>{
              all += Number(item.value)
             })
             // 把百分比计算出来加到每一项中
             result[key].map(item=>{
               item.percentage = ((Number(item.value)/all)*100).toFixed(2)
             })
             // 格式化掉处理的数据
             result[key].forEach(item=>{
               item.value = _this.$util.fmoney(item.value)
             })
           }
         }
         this.modelProgress = result.BusinessTypeList
         this.regionProgress = result.BusinessTradeList
         this.areaProgress = result.SPRegionList
         this.showTableData = result.RevenuePushModel
         this.showTableData.compared = result.GrowthRate
         this.todayAmount()
       })
    },
    defaultMsg() {
      let option = null
      let _this = this
      if (this.PushAuthority && this.PushAuthority.length > 1) {
        option = this.PushAuthority.find(n => n.ProvinceCode === _this.ProvinceCode)
      }else if(this.user.Membership_Id){
        option = {GroupType: 1000,
          ProvinceCode: 340000,
          ServerpartIds: "",
          ShopAnalysisType: 1}
      }
      else {

      }
      return {
        ...option
      }
    },
    handleSelectTab(value){
      this.selectTab = value
    },
    // 顶部的时间组件切换时间触发的方法
    bindDateChange(e){
      const date = new Date(e.detail.value).getTime()
      this.single = timestampToTime(date)
      this.lastDay = e.detail.value
      uni.setStorageSync('lastDay',this.lastDay)
      this.thisDay = getThisDay(new Date(e.detail.value).getDay())
      this.onRefresh()
    },
    showPie(obj) {
      let data = {
        series: []
      }
      const ctx = uni.createCanvasContext(obj.id, this);
      data.series = data.series.concat(obj.data)
      rincanvas[obj.id] = new uCharts({
        // 小程序图表工具
        // $this: this,
        // canvasId: obj.id,
        context: ctx,
        color: obj.colors,
        type: 'ring',
        fontSize: 12,
        padding: [15, 15, 25, 15],
        legend: {
          show: false,
          padding: 5,
          lineHeight: 11,
          margin: 0,
        },
        background: '#FFFFFF',
        pixelRatio: 1,
        series: data.series,
        animation: false,
        width: uni.upx2px(686),
        height: uni.upx2px(510),
        dataLabel: true,
        extra: {
          ring: {
            ringWidth: 40,
            labelWidth: 16,
            border: true,
            borderWidth: 1,

            borderColor: '#fff'
          }
        },
      });
    },
    getBayonetData(data) {
      var _data1 = [];
      let _this = this

      data.forEach((n, i) => {
        var childData = [];
        n.spList.forEach((m, i) => {
          // 获取服务区各个方位的入区信息
          var _list = [];
          m.regionList.forEach((o, i) => {
            _list.push({
              name: o.name,
              data: o.Vehicle_Count,
              flow: o.SectionFlow_Count,
              bili: o.SectionFlow_Count == 0 ? 100 : _this.$util.fmoney(
                  (o.Vehicle_Count / o.SectionFlow_Count) * 100, 2),
              MinVehicle_Count: o.MinVehicle_Count,
              MediumVehicle_Count: o.MediumVehicle_Count,
              LargeVehicle_Count: o.LargeVehicle_Count
            });
          });
          _list.sort(function(a, b) {
            return b.bili - a.bili
          })

          childData.push({
            name: m.name,
            data: m.Vehicle_Count, //+Number(data2[n[0]])
            flow: m.SectionFlow_Count,
            bili: m.SectionFlow_Count == 0 ? 0 : _this.$util.fmoney(
                (m.Vehicle_Count / m.SectionFlow_Count) * 100, 2),
            list: _list
          });
        });
        childData.sort(function(a, b) {
          return b.bili - a.bili
        })

        _data1.push({
          name: n.name,
          index: n.index,
          list: childData
        });
      });
      _data1.sort(function(a, b) {
        return a.index - b.index
      })

      return [_data1];
    },
    getProgressData(data, total) {
      var _data1 = [];
      var _data2 = [];
      let _this = this
      data.forEach((n, i) => {

        _data1.push({
          ...n,
          textColor: '#999',
          formatter: function(arg) {

            if (typeof arg === 'number') {
              return [n.name, (arg * 100).toFixed(2) + '%']
            } else {
              return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
            }

          }
        });

        _data2.push({
          name: n.name,
          num: n.data,
          data: _this.$util.fmoney(n.data, 2), //+Number(data2[n[0]])
          bili: _this.$util.fmoney((n.data / total) * 100, 2)
        });

      });
      _data1.sort(function(a, b) {
        return b.data - a.data
      })
      _data2.sort(function(a, b) {
        return b.num - a.num
      })
      return [_data2, _data1];
    },
    async initData() { // 初始化营收数据
      const data = {
        pushProvinceCode:'340000',
        Statistics_Date:this.lastDay
      }

      //获取服务区门店商家数量列表（根据省份、服务区、区域、统计日期查询）
      const totalData = await request.$webGet('CommercialApi/BaseInfo/GetShopCountList',data)
      let all = 0
      totalData.Result_Data.List.forEach(item=>{
        all+=item.SHOP_REVENUECOUNT
      })
      this.allShopCount = all

      //获取移动支付分账数据
      const shareData = {
        Province_Code: '340000',
        Statistics_Date: this.lastDay,
        ShowCompareRate: true
      }
      const mobileShareData = await request.$webGet('CommercialApi/Revenue/GetMobileShare',shareData)
      this.mobileData = mobileShareData.Result_Data


        //mobileData 是移动支付分账接口返回来的全部数据
        this.detailTypeList[0].value = this.mobileData.ShareShop_Count
        this.detailTypeList[0].add = this.mobileData.ShareShopGrowth_Count
        this.detailTypeList[1].value = this.$util.fmoney(this.mobileData.MonthRoyalty_Price)
        this.detailTypeList[1].yesterValue = this.$util.fmoney(this.mobileData.Royalty_Price)  //返回数据可能有问题
      // 让金额的动画效果出来
      this.priceMove = true
      //处理数据的方法
    },
     todayAmount() {
       let _this = this
       // 由于处理数据的时间 必须在全部接口请求完毕 所以加个延时器
      setTimeout(()=>{
        // 由于页面大部分的内容采用渲染的格式 这样的方法是最快的对原数据进行赋值  对照data里面的几个主要的数组看就能看明白
        // 门店上传的前后数字计算来决定样式
        if(this.showTableData.Revenue_Upload >= this.allShopCount){
          this.isBig = false
        }else{
          this.isBig = true
        }
        // 计算相对于昨日的增长率
        // this.showTableData.compared = (((Number(this.showTableData.CashPay) - this.yesterdayAllPay) / this.yesterdayAllPay) * 100).toFixed(2)
        // 客单均价
        this.showTableData.averagePrice = (Number(this.showTableData.CashPay) / Number(this.showTableData.TicketCount)).toFixed(2)
        // 商品均价
        this.showTableData.countave = (Number(this.showTableData.CashPay) / Number(this.showTableData.TotalCount)).toFixed(2)
        // 处理所有数据 变成有千分号和小数点的数据
        for (let key in this.showTableData){
          if (key==='uploadState' || key==='Revenue_Upload'){
            this.showTableData[key] = this.showTableData[key]
          }else if(key ==='TicketCount'){
            this.showTableData[key] = this.$util.noDecimal(this.showTableData[key],0)
          }else{
            this.showTableData[key] = this.$util.fmoney(this.showTableData[key], 2)
          }
        }
        uni.hideLoading()
        _this.$forceUpdate()
      })
    },
    getDetail(obj) {
      let _this = this
      this.$request.$webGet('CommercialApi/Revenue/GetServerpartEndAccountList', {
        Serverpart_ID: obj.ServerpartIds,
        pushProvinceCode: obj.ProvinceCode,
        Statistics_Date: obj.time,

      }).then(res => {
        if (res.Result_Code != 100) return
        res.Result_Data.ShopEndaccountList.map(n => {
          n.show = false
          n.detail = this.getListDetail(n)
        })

        _this.regionList = res.Result_Data.ShopEndaccountList
      })
    },
    async getRankContent() { // 甘肃需要单品排行显示
      const {
        ProvinceCode,
        time
      } = this.theRequest

      const data = await this.$request.$webGet('CommercialApi/Revenue/GetWechatPushSalesList', {
        pushProvinceCode: ProvinceCode,
        Statistics_Date: time
      })

      if (data.Result_Code === 100 && data.Result_Data.TotalCount > 0) {
        this.wechatPushSalesList = {}
        data.Result_Data.List.forEach(n => {
          this.wechatPushSalesList[n.Data_Type]= n.GoodsList
        })

      } else {
        this.wechatPushSalesList = {}
      }
      this.$forceUpdate()
    },
  }
}
</script>

<style scoped lang="scss">
$iphoneHeight: env(safe-area-inset-bottom);
.main {
  min-height: 100vh;
  width: 100%;
  padding-bottom: calc(44px + env(safe-area-inset-bottom));
  .header {
    width: 100%;
    height: 512px;
    box-sizing: border-box;
    padding: 0 16px;
    position: relative;
    .headerBg {
      width: 100%;
      height: 512px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .headerTop{
      width: 100%;
      background: linear-gradient(315deg, #FFAF95 0%, #FFD6A6  100%);
      position: fixed;
      top: 0;left:0;
      box-sizing: border-box;
      padding: 0 15px;
      z-index:9999999;
      .selectTime {
        position: absolute;
        display: flex;
        align-items: center;
        .dateIcon {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
        .time {
          display: flex;
          align-items: center;
          margin-right: 4px;
          .day {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #782717;
            line-height: 44rpx;
            margin-right: 4px;
          }
          .uni-input {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ae664e;
            line-height: 36rpx;
          }
          .icon {
            width: 24px;
            height: 16px;
          }
        }
      }
    }
    .other {
      width: calc(100% - 32px);
      position: absolute;
      top: 104px;
      .topTitle{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          font-size: 28rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #782717;
          line-height: 40rpx;
        }
        .text {
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #782717;
          line-height: 40rpx;
          margin-left: 8px;
        }
      }

      @keyframes allPriceAnimation {
        0%{
          transform: translateY(30px);
        }
        100%{
          transform: translateY(0px);
        }
      }

      .box {
        display: flex;
        align-items: center;
        .priceBox{
          overflow: hidden;
          .allPrice {
            font-size: 56rpx;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #782717;
            line-height: 64rpx;
            margin-top: 4px;
          }
          .allPriceMove{
            animation: allPriceAnimation 2s;
          }
        }
        .start {
          width: 14px;
          height: 14px;
          margin-left: 8px;
        }
      }

      .addBox {
        margin-top: 5px;
        display: flex;
        align-items: center;
        .arrowTop {
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
        .text {
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #782717;
          line-height: 40rpx;
          margin-right: 4px;
        }
        .compare {
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #c97e64;
          line-height: 40rpx;
        }
      }
      .type {
        width: 100%;
        height: 45px;
        margin-top: 24px;
        .item {
          width: 50%;
          display: flex;
          align-items: center;
          float: left;
          .leftImg {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 8px;
            background: #fff;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            .typeName {
              font-size: 28rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #782717;
              line-height: 40rpx;
              .unit {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #c97a63;
                line-height: 40rpx;
                margin-left: 4px;
              }
            }
            .price {
              font-size: 36rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #782717;
              line-height: 44rpx;
              margin-top: 2px;
            }
          }
        }
      }
      .detail {
        width: 100%;
        height: 190px;
        box-sizing: border-box;
        padding: 16px 0;
        background: linear-gradient(135deg, #fff2df 0%, #ffe3e5 100%);
        box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
        border-radius: 8rpx;
        margin-top: 24px;
        margin-bottom: 16px;
        .detailItem {
          width: 33%;
          box-sizing: border-box;
          padding-left: 16px;
          height: 42px;
          text-align: left;
          float: left;
          margin-bottom: 16px;
          .itemName {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #782717;
            opacity: 0.8;
            line-height: 40rpx;
            margin-bottom: 2px;
            .itemUnit {
              font-size: 28rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #c99f8f;
              line-height: 40rpx;
            }
          }
          .price {
            font-size: 16px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #782717;
            line-height: 40rpx;
          }
        }
      }
    }
  }
  .menu {
    width: 100vw;
    position: relative;
    box-sizing: border-box;
    padding-top: 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
    background: #fff;
    top: -16px;
    z-index: 1;
    .topBg {
      position: absolute;
      width: 100vw;
      height: 104px;
      top: 0;
      left: 0;
      z-index: 2;
    }
    .content {
      padding: 0 16px;
      margin: 0 auto;
      z-index: 3;
      .tabType{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .big {
            width: 48px;
            height: 48px;
            background: #ffffff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
            z-index: 10;
            .img {
              width: 30px;
              height: 30px;
            }
          }
          .name {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 32rpx;
          }
        }
      }
      .detailType{
        width: 100%;
        margin-top: 24px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        .item {
          width: calc((100% - 8px) / 2);
          padding: 12px;
          box-sizing: border-box;
          background: #f9f6f6;
          margin-bottom: 8px;
          border-radius: 8px;
          .box {
            width: 100%;
            height: 100%;
            position: relative;
            .imgIcon {
              width: 30px;
              height: 30px;
              position: absolute;
              top: 0;
              right: 0;
            }
            .otherBox{
              display: flex;
              justify-content: space-between;
              .other {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #a69e9f;
                line-height: 36rpx;
                margin-left: 2px;
              }
              .month{
                font-size: 24rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #160002;
                line-height: 40rpx;
              }
            }

            .title {
              font-size: 28rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786b6c;
              line-height: 40rpx;
              .unit {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #a69e9f;
                line-height: 40rpx;
                margin-left: 2px;
              }
            }
            .money {
              font-size: 32rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #160002;
              line-height: 40rpx;
              margin-top: 2px;
              margin-bottom: 12px;
            }
            .active {
              display: flex;
              align-items: center;
              .addIcon {
                width: 16px;
                height: 16px;
                margin-right: 2px;
              }
              .add {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #fa5151;
                line-height: 32rpx;
              }
              .yesterday {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #a69e9f;
                line-height: 36rpx;
                margin-left: 2px;
              }
            }
          }
        }
        .item:nth-of-type(1),
        .item:nth-of-type(3) {
          margin-right: 8px;
        }
        .item:nth-of-type(3),
        .item:nth-of-type(4) {
          margin-bottom: 0px;
        }
      }
      .propOfReven{
        width: 100%;
        margin-top: 28px;
        .title {
          font-size: 32rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #160002;
          line-height: 44rpx;
          text-align: left;
          margin-bottom: 12px;
        }
        .tabs {
          width: 100%;
          height: 38px;
          box-sizing: border-box;
          padding: 4px;
          background: #f2f1f1;
          border-radius: 4px;
          display: flex;
          justify-content: space-between;
          .tabItem {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786b6c;
            padding: 5px 26px;
            line-height: 40rpx;
          }
          .active {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 40rpx;
            background: #fff;
            border-radius: 4px;
          }
        }
        .chart {
          width: 100%;
          margin-top: 12px;
          .operation-c-list{
            width:100%;
            margin-bottom: 12px;
            .top{
              width: 100%;
              margin-bottom: 2px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .left{
                display: flex;
                justify-content: space-between;
                .icon{
                  width: 20px;
                  height: 20px;
                  position: relative;
                  margin-right: 8px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  image{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;left: 0;
                  }
                  text{
                    z-index:99;
                    font-size: 24rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #FFFFFF;
                  }
                }
                .name{
                  font-size: 32rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 40rpx;
                }
              }
              .price{
                font-size: 32rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: 600;
                color: #160002;
                line-height: 40rpx;
              }
            }
            .bottom{
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .bar{
                width: 70%;
                height: 8px;
                background: #F5F2F2;
                border-radius: 5px;
                position: relative;
                .progress{
                  height: 100%;
                  background: #1777FF;
                  border-radius: 5px;
                  opacity: 0.9;
                  position: absolute;
                  top: 0;left: 0;
                }
              }
              .number{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 40rpx;
              }
            }
          }
        }
      }
      .thisMonth,.thisYear{
        width: 100%;
        margin-top: 28px;
        padding-bottom: 24px;
        .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;
          }
        }
        .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;
              }
            }
          }
        }
      }
    }
  }
  .notice{
    position: fixed;
    bottom: 120px;
    left: 5%;
    width: 90%;
    padding: 10px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    z-index:999999;
    background: #2c71f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      .icon {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
      .text {
        margin-left: 8px;
        .name {
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 20px;
        }
        .desc {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #B5CDFC;
          line-height: 18px;
        }
      }
    }
    .right {
      border: 1px solid #fff;
      padding: 2px 6px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      border-radius: 11px;
      color: #ffffff;
    }
  }

}

</style>
