<template>
  <div class="main" >
    <div  class="img" :style="{left:allScreen?'100%':'0'}">
      <div class="imgContent">
        <div class="imgTop">
          <span class="unit">单位：万元<span style="color: red">(可左滑查看)</span></span>
          <div class="searchAllScreen">
            <img class="allScreenIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allScreenIcon.png"/>
            <span class="text" @click="handleShowAllScreen">全屏</span>
          </div>
        </div>
        <qiunDataCharts
            type="area"
            :opts="opts"
            :chartData="res"
            :animation="false"
            :canvas2d="true"
            :inScrollView="true"
            tooltipFormat="entryCarNumber"
            :ontouch="true"
        />
      </div>

      <scroll-view scroll-y="true" class="scrollView">
        <div class="noticeBox" v-if="selectFestival===0">
          <div :class="selectFestival===0?'boxBg springBox':selectFestival===1?'boxBg qmBox':''"></div>
          <div class="contentBox">
<!--            <img class="contentIcon" src=""/>-->
            <img class="contentIcon" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/imgDesc.png':selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/trendChart.png':selectFestival===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/larburTrendChart.png':''"/>
            <div class="contentText" v-if="selectFestival===0">
              根据历史大数据显示：<br/>
              <div style="text-indent: 2rem;font-size: 24rpx">
                服务区会在春运前至农历小年夜前（<span class="red">农历二十二</span>）到底回程小高峰，然后流量逐步回落至春运最低点（<span class="red">除夕夜</span>），大年初二开始随着出行自驾游的高峰来临，流量逐步放大，会在初六达到整个春运最高峰，随后流量逐步回落至次低点（<span class="red">元宵节</span>），在正月十六出现一波返程小高峰后，流量逐步回复正常。
              </div>
            </div>
          </div>
        </div>

        <div class="allPkBox">
          <div :class="selectFestival===0?'boxBg springBox':selectFestival===1?'boxBg qmBox':selectFestival===2?'boxBg labourBox':''"></div>
          <div class="pkContent">
            <div class="contentTop">
<!--              <img class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png" />-->
              <img class="titleImg" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png':selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmSumData.png':selectFestival===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourAllData.png':''" />
            </div>
            <div class="pkBox">
              <div class="leftBox">
                <text class="value">{{giveTrendObj.curYearRevenue?$util.getMoney(giveTrendObj.curYearRevenue / 10000):'0.00'}}</text>
                <text class="label">2024年/万元</text>
              </div>
              <div class="rightBox">
                <text class="value">{{giveTrendObj.lYearRevenue?$util.getMoney(giveTrendObj.lYearRevenue / 10000):'0.00'}}</text>
                <text class="label">2023年/万元</text>
              </div>
              <img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vs.png"/>
            </div>
            <div class="pkBox">
              <div class="leftBox revenueLeft">
                <text class="value">{{giveTrendObj.curYearAccount?$util.getMoney(giveTrendObj.curYearAccount / 10000):'0.00'}}</text>
                <text class="label">2024年/万元</text>
              </div>
              <div class="rightBox revenueRight">
                <text class="value">{{giveTrendObj.lYearAccount?$util.getMoney(giveTrendObj.lYearAccount / 10000):'0.00'}}</text>
                <text class="label">2023年/万元</text>
              </div>
              <img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueVS.png"/>
            </div>
            <div class="pkBox" style="margin-bottom: 20px">
              <div class="leftBox carLeft">
                <text class="value">{{giveTrendObj.curYearBayonet?$util.getMoney(giveTrendObj.curYearBayonet / 10000):'0.00'}}</text>
                <text class="label">2024年/万辆</text>
              </div>
              <div class="rightBox carRight">
                <text class="value">{{giveTrendObj.lYearBayonet?$util.getMoney(giveTrendObj.lYearBayonet / 10000):'0.00'}}</text>
                <text class="label">2023年/万辆</text>
              </div>
              <img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carVS.png"/>
            </div>
          </div>
        </div>
      </scroll-view>



    </div>

    <div class="allScreen" :style="{left:allScreen?'0':'100%'}" >
      <div class="bigBox">
        <div class="bigImg">
          <qiunDataCharts
              type="area"
              :opts="opts2"
              :chartData="res2"
              :animation="false"
              :canvas2d="true"
              :inScrollView="true"
              tooltipFormat="entryCarNumber2"
              :ontouch="true"
              :reshow="allScreen"
          />
        </div>
        <div class="closeBox">
          <img class="closeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/closeIcon.svg"  @click="handleShowAllScreen"/>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import qiunDataCharts from "./components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import request from '@/util/index.js'
var uChartsInstance = {};
export default {
  components: {qiunDataCharts},
  data() {
    return {
      opts:{},
      opts2:{},
      res:{},
      res2:{},
      allScreen:false,
      ScrollTop:0,
      howDayNumber:0,
      giveTrendObj:{},
      selectFestival: 0,
    }
  },
  onLoad(query){
    if (query.detailObj){
      this.giveTrendObj = JSON.parse(query.detailObj)
    }
    if (query.festivalType){
      this.selectFestival = Number(query.festivalType)
    }

    this.lastDay = uni.getStorageSync('lastDay')
    const lastDate = new Date(this.lastDay)
    // 拿到是春运开始的第几天
    let dayNumber = 0
    let lastMonth =  lastDate.getMonth() + 1
    let lastDays = lastDate.getDate()
    // 24年春运开始时间为 1.26
    if (lastMonth === 1){
      dayNumber = lastDays - 26 + 1
    }else{
      dayNumber = 6 + lastDays
    }
    console.log('dayNumber',dayNumber)
    this.ScrollTop = (dayNumber-3)*30
    if (this.selectFestival===0){
      this.howDayNumber = dayNumber
    }else if (this.selectFestival===1){
      this.howDayNumber = 5
    }else if (this.selectFestival===2){
      this.howDayNumber = 7
    }
    this.handleGetData()
  },
  methods:{
    async handleGetData(){
      uni.showLoading({
        title: '正在加载...'
      })
      const req = {
        pushProvinceCode:'340000',
        StatisticsDate: this.lastDay,
        holidayType: this.selectFestival===0?2:this.selectFestival===1?3:this.selectFestival===2?4:'',
        curYear:2024,
        compareYear:2023,
      }
      const data = await request.$webGet('CommercialApi/Revenue/GetHolidayCompare',req)
      console.log('data',data)
      let dateList = []
      let dateList2 = []

      // 去年的具体日期
      let compareDateList = []
      // 今年的具体日期
      let curDateList = []

      let dataObj = data.Result_Data
      if (dataObj && dataObj.compareList && dataObj.compareList.length>0){
        dataObj.compareList.forEach(item=>{
          const date = new Date(item.name)
          let m = date.getMonth() + 1
          let d = date.getDate()
          let dateText = `${m}.${d}`
          item.easyDate = dateText
          compareDateList.push(item.name)
        })
      }
      if (dataObj && dataObj.curList && dataObj.curList.length>0){
        dataObj.curList.forEach(item=>{
          const date = new Date(item.name)
          let m = date.getMonth() + 1
          let d = date.getDate()
          let dateText = `${m}.${d}`
          item.easyDate = dateText
          curDateList.push(item.name)
        })
      }
      if (this.selectFestival===0){
        for(let i = 1;i<=40;i++){
          if (i===7){
            // dateList.push(`北小年`)
            dateList.push(`大年廿二`)
          }else if(i===9){
            dateList.push(`南小年`)
          }else if(i===15){
            dateList.push(`大年三十`)
          }else if(i===16){
            dateList.push(`春节`)
          }else if(i===21){
            dateList.push(`初六`)
          }else if(i===23){
            dateList.push(`初八`)
          }else if(i===25){
            dateList.push(`初十`)
          }else if(i===26){
            dateList.push(`正月十一`)
          }else if(i===30){
            dateList.push(`正月十五`)
          }else if(i===31){
            dateList.push(`正月十六`)
          }else{
            dateList.push(`第${i}天`)
          }
        }
        for(let i = 1;i<=40;i++){
          dateList2.push(i)
        }
      }else if (this.selectFestival===1){
        for(let i = 1;i<=5;i++){
          dateList.push(`第${i}天`)
        }
        for(let i = 1;i<=5;i++){
          dateList2.push(i)
        }
      }else if (this.selectFestival===2){
        for(let i = 1;i<=7;i++){
          dateList.push(`第${i}天`)
        }
        for(let i = 1;i<=7;i++){
          dateList2.push(i)
        }
      }

      let max = 0
      let compareList = []
      let realCompareList = []

      let curListList = []
      let realCurList = []

      // 农历日期
      let tradDateList = []
      if (dataObj){
        dateList.forEach((item,index)=>{
          // let beforeValue = dataObj.compareList.filter(filter=> filter.easyDate === item)[0]
          // beforeValue = beforeValue?beforeValue.value:null
          let beforeValue = dataObj.compareList[index].value
          if (beforeValue){
            if (Number(beforeValue) / 10000 > max){
              max = Number(beforeValue) / 10000
            }
            compareList.push(Number(beforeValue) / 10000)
            realCompareList.push(Number(beforeValue))
          }
          else{
            compareList.push(0)
            realCompareList.push(0)
          }

          // let compareValue = dataObj.curList.filter(filter=> filter.easyDate === item)[0]
          // compareValue = compareValue?compareValue.value:null
          let compareValue = dataObj.curList[index].value
          if (compareValue){
            if (Number(compareValue) / 10000 > max){
              max = Number(compareValue) / 10000
            }
            curListList.push(Number(compareValue) / 10000)
            realCurList.push(Number(compareValue))
          }else{
            curListList.push(0)
            realCurList.push(0)
          }
        })
      }
      max = this.getSplitNumber(max)

      let list = ['大年十六','大年十七','大年十八','大年十九','大年二十','大年廿一','大年廿二','北小年','南小年','大年廿五','大年廿六','大年廿七',
        '大年廿八','大年廿九','除夕','春节','正月初二','正月初三','正月初四','正月初五','正月初六','正月初七','正月初八','正月初九','正月初十','正月十一',
        '正月十二','正月十三','正月十四','元宵','正月十六','正月十七','正月十八','正月十九','正月二十','正月廿一','正月廿二','正月廿三','正月廿四','正月廿五']


      let res = {
        categories: dateList,
        series:[
          {
            name:`24年`,
            data:curListList,
            real:realCurList,
            tradDate:list,
            howDayNumber:this.howDayNumber,
            selectFestival: this.selectFestival,
            realDateList: ['2024-04-30','2024-05-01','2024-05-02','2024-05-03','2024-05-04','2024-05-05','2024-05-06']
          },
          {
            name:`23年`,
            data:compareList,
            real:realCompareList,
            tradDate:list,
            howDayNumber:this.howDayNumber,
            selectFestival: this.selectFestival,
            realDateList: ['2023-04-28','2023-04-29','2023-04-30','2023-05-01','2023-05-02','2023-05-03','2023-05-04']
          },
        ],
        max:Number(max.toFixed(2)),
        selectFestival:this.selectFestival
      }
      let res2 = {
        categories: dateList2,
        series:[
          {
            name:`24年`,
            data:curListList,
            real:realCurList,
            tradDate:list,
            howDayNumber:this.howDayNumber,
            selectFestival: this.selectFestival,
            realDateList: ['2024-04-30','2024-05-01','2024-05-02','2024-05-03','2024-05-04','2024-05-05','2024-05-06']
          },
          {
            name:`23年`,
            data:compareList,
            real:realCompareList,
            tradDate:list,
            howDayNumber:this.howDayNumber,
            selectFestival: this.selectFestival,
            realDateList: ['2023-04-28','2023-04-29','2023-04-30','2023-05-01','2023-05-02','2023-05-03','2023-05-04']
          },
        ],
        max:Number(max.toFixed(2)),
      }
      console.log('res',res)
      this.res = res
      this.res2 = res2
      this.opts = {
        categories: res.categories,
        series: res.series,
        animation: false,
        rotate: false,
        rotateLock: false,
        enableScroll: true,
        background: "#FFFFFF",
        color: ["#1E80FF", "#00B6FF","#ACB9CD"],
        padding: [15, 15, 5, 5],
        dataLabel: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25,
          float: 'center'

        },
        xAxis: {
          disableGrid: true,
          itemCount: 6,
          scrollAlign: 'left',
          // fontColor:'red',
          // format:"entryCarNumberXFormat"
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          splitNumber:6,
          data: [
            {
              min: 0,
              max: this.selectFestival===0?3000:1500
            }
          ]
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow"
          }
        }
      }


      let phoneInfo = uni.getStorageSync('phoneInfo')
      console.log('phoneInfo',phoneInfo)
      let _this = this
      this.opts2 = {
        // width:phoneInfo.screenHeight+'px',
        // height:(2*phoneInfo.screenWidth)+'px',
        categories: res.categories,
        series: res.series,
        animation: false,
        rotate: true,
        rotateLock: false,
        enableScroll: true,
        background: "#FFFFFF",
        color: ["#1E80FF", "#00B6FF","#ACB9CD"],
        padding: [15, 15, 5, 5],
        dataLabel: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25,
          float: 'center'

        },
        xAxis: {
          disableGrid: true,
          itemCount: 40
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          splitNumber:5,
          data: [
            {
              min: 0,
              // max:_this.selectFestival===2?2000:3000
              max: 2000
            }
          ]
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow"
          }
        }
      }
      uni.hideLoading()
    },
    handleShowAllScreen(){
      this.allScreen = !this.allScreen
    },
    getSplitNumber(value){
      if (value === 0 || value<5){
        let num = Math.ceil(Number(value))
        return num
      }else{
        let sum = Number(value) + Number(value) *0.2
        return  Number((Math.ceil(sum / 1000)).toFixed(0)) * 1000
      }
    },
    // 写死赋值农历日期
    handleGetTraditionalDate(){
      let list = ['大年十六','大年十七','大年十八','大年十九','大年二十','大年廿十一','大年廿十二','大年廿十三','大年廿十四','大年廿十五','大年廿十六','大年廿十七',
        '大年廿十八','大年廿十九','除夕','春节','正月初二','正月初三','正月初四','正月初五','正月初六','正月初七','正月初八','正月初九','正月初十','正月十一',
        '正月十二','正月十三','正月十四','元宵','正月十六','正月十七','正月十八','正月十九','正月二十','正月廿十一','正月廿十二','正月廿十三','正月廿十四','正月廿十五']
    }
  }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  height: 100vh;
  background: #F3F4F9;
  box-sizing: border-box;
  .img{
    width: 100%;
    height: calc(100vh - 64rpx);
    position: fixed;
    box-sizing: border-box;
    padding: 0 32rpx;
    top: 32rpx;
    .imgContent{
      width: 100%;
      background: #fff;
      padding: 24rpx;
      border-radius: 16rpx;
      box-sizing: border-box;
      .imgTop{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .unit{
          margin-left: 24rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #A69E9F;
          line-height: 40rpx;
        }
        .searchAllScreen{
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8rpx;
          padding: 8rpx 10rpx;
          border: 2rpx solid #DFDFDF;
          background: #fff;
          .allScreenIcon{
            width: 32rpx;
            height: 32rpx;
          }
          .text{
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #6B6C78;
            line-height: 36rpx;
          }
        }
      }
    }

    .scrollView{
      height: calc(100% - 312px);
      margin-top: 24rpx;
      .noticeBox{
        width: 100%;
        height: 400rpx;
        background: #fff;
        box-sizing: border-box;
        border-radius: 16rpx;
        padding: 4rpx;
        position: relative;
        .springBox{
          background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
        }
        .qmBox{
          background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
        }
        .labourBox{
          background: linear-gradient( 360deg, rgba(255,236,208,0) 0%, #FFECD0 100%);
        }
        .boxBg{
          z-index: 1;
          position: absolute;
          top: 4rpx;left: 4rpx;
          width: calc(100% - 8rpx);
          height: 192rpx;
          //background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
          //background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
          border-radius: 16rpx;
        }
        .contentBox{
          position: absolute;
          z-index: 2;
          width: calc(100% - 8rpx);
          height: 100%;
          box-sizing: border-box;
          padding: 22rpx;
          .contentIcon{
            width: 180rpx;
            height: 44rpx;
          }
          .contentText{
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 40rpx;
            //margin-top: 16rpx;
            .red{
              color: red;
              //color: #226C61;
            }
          }
        }
      }
      .allPkBox{
        width: 100%;
        height: 625rpx;
        margin-top: 32rpx;
        background: #fff;
        box-sizing: border-box;
        border-radius: 16rpx;
        padding: 4rpx;
        position: relative;
        .springBox{
          background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
        }
        .qmBox{
          background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
        }
        .labourBox{
           background: linear-gradient( 360deg, rgba(255,236,208,0) 0%, #FFECD0 100%);
         }
        .boxBg{
          z-index: 1;
          position: absolute;
          top: 4rpx;left: 4rpx;
          width: calc(100% - 8rpx);
          height: 192rpx;
          //background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
          //background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
          border-radius: 16rpx;
        }
        .pkContent{
          width: 100%;
          box-sizing: border-box;
          position: absolute;
          z-index: 2;
          padding: 22rpx;
          .contentTop{
            width: 100%;
            .titleImg{
              width: 144rpx;
              height: 74rpx;
            }
          }
          .pkBox{
            width: 100%;
            height: 140rpx;
            position: relative;
            box-sizing: border-box;
            margin-bottom: 32rpx;
            .pkLogo{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              width: 88rpx;
              height: 88rpx;
            }
            .leftBox,.rightBox{
              width: 50%;
              height: 100%;
              box-sizing: border-box;
              padding: 24rpx 32rpx;
              display: flex;
              flex-direction: column;
              position: absolute;
            }
            .leftBox{
              left: 0;top: 0;
              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/leftRed.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              .value{
                font-size: 44rpx;
                //font-family: DINAlternate, DINAlternate;
                color: #FFFFFF;
                font-weight: bold;
                line-height: 52rpx;
              }
              .label{
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                color: #FFFFFF;
                font-weight: 400;
                line-height: 40rpx;
              }
            }
            .rightBox{
              right: 0;top: 0;
              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rightPink.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              align-items: flex-end;
              .value{
                font-size: 44rpx;
                //font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                color: #FF5A3C;
                line-height: 52rpx;
              }
              .label{
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #FF5A3C;
                line-height: 40rpx;
              }
            }
            .revenueLeft{
              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueLeft.png");
            }
            .revenueRight{
              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueRight.png");
              .value{
                color: #D48F00;
              }
              .label{
                color: #D48F00;
              }
            }
            .carLeft{
              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carLeft.png");
            }
            .carRight{
              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carRight.png");
              .value{
                color: #3873DD;
              }
              .label{
                color: #3873DD;
              }
            }
          }
        }
      }
    }

  }
  .allScreen{
    position: fixed;
    top: 0;
    width: 100vh;
    height: 100vh;
    background: black;
    //padding: 5vh 0;
    .bigBox{
      width: 100vw;
      height: 100vh;
      background: #fff;
      .bigImg{
        width: 100vw;
        height: calc(100vh - 50rpx);
        background: #fff;
      }
      .closeBox{
        width: 100vw;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .closeIcon{
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }


}
</style>
