<template>
  <view class="main">
    <view class="header" :style="{height:menu.height + menu.top + 'px',top:0+'px'}">
      <image :style="{bottom: ((statusBarHeight-24)/4)+'px' }" class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click="handleBack"/>
    </view>
    <view class="mapView">
      <map id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers" class="map" show-location></map>
    </view>

    <view class="listBox" :style="{height:showMore?`calc(100vh - ${menu.bottom + 14}px)`:'calc(100vh - 680rpx)',transform:showMore?`translateY(-${340 - menu.bottom - 14}px)`:'translateY(-32rpx)'}">
      <view class="listTop"></view>
      <view class="contentList">
        <view class="expand" @click="handleChangeShowMore">
          <img class="showMore" :style="{transform: showMore?'rotate(90deg)':'rotate(-90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
        </view>
        <view class="contentTop">
          <span class="listTitle">商家营收</span>

<!--          <view class="typeChangeBox">-->
<!--            <view :class="pageType===1?'normal select':'normal'" @click="handleChangeType(1)">按天统计</view>-->
<!--            <view :class="pageType===2?'normal select':'normal'" @click="handleChangeType(2)">累计统计</view>-->
<!--          </view>-->
        </view>

<!--        <view class="navBigList" v-if="pageType===1">-->
<!--          &lt;!&ndash;            <div class="allBox">&ndash;&gt;-->
<!--          &lt;!&ndash;              <div :class="currentScroll==='all'?'scrollItem selectItem':'scrollItem'" @click="handleChangeTime('all')">累计</div>&ndash;&gt;-->
<!--          &lt;!&ndash;            </div>&ndash;&gt;-->
<!--          <scroll-view scroll-x="true" class="navList" :scrollIntoView="currentScroll" :scroll-with-animation="true">-->
<!--            <view :class="currentScroll==='item'+item.value?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in scrollList" :key="index" :id="'item'+item.value" @click="handleChangeTime(item.value)">{{item.label}}</view>-->
<!--          </scroll-view>-->
<!--        </view>-->

<!--        <view class="listTitle">-->
<!--          <view class="titleItem"></view>-->
<!--        </view>-->
        <scroll-view v-if="dataList && dataList.length>0" scroll-y="true"  class="list" :style="{height:showMore?'calc(100% - 40px)':'calc(100% - 40px)'}">
            <view class="listItem" v-for="(item,index) in dataList" :key="index">
              <view class="leftItem">
                <img class="img" :src="item.Brand_ICO?item.Brand_ICO:'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/defaultShopIcon.png'"/>
              </view>
              <view class="rightItem">
                <view class="itemTop">
                  <view class="itemTitle">{{ item.Brand_Name || '' }}</view>
                  <span class="type">{{item.BrandType_Name || ''}}</span>
                </view>
                <view class="itemBox" v-if="item.Bussiness_Name">
                  <img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/shop.svg"/>
                  <span class="name">{{item.Bussiness_Name || ''}}</span>
                </view>
                <view class="itemBox" v-if="item.Bussiness_Time">
                  <img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/time.svg"/>
                  <span class="name">{{item.Bussiness_Time || ''}}</span>
                </view>
                <view class="otherItem">
                  <span class="other">{{item.Bussiness_State==='1000'?'运营中':'已暂停'}}</span>
                  <span class="other">{{item.Business_Trade|| ''}}</span>
                </view>
                <view class="curRevenue">
                  <span class="label">实时营收：</span>
                  <span class="value">{{item.CurRevenue?$util.getMoney(item.CurRevenue):''}}</span>
                </view>
              </view>
            </view>
        </scroll-view>
        <view v-else class="noDataBox" :style="{height:showMore?'calc(100% - 40px)':'calc(100% - 40px)'}">
          <img class="noDataImg" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"/>
          <text class="noDataText">暂无数据</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import request from '@/util/index.js'
export default {
  name: "map",
  data(){
    return {
      longitude:'',
      latitude:'',
      markers:{},// 标点
      id:'',
      statusBarHeight:0,
      menu:{},
      pageType: 1,
      currentScroll:'',
      scrollList:[],
      nowDay:'',
      dataList:[],//
      showMore: false,// 是否展开
      curYear:'',
      compareYear:''
    }
  },
  onLoad(query){
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()

    console.log('query',query)
    if (!query.longitude || !query.latitude){
      let seat = uni.getStorageSync('seatInfo')
      this.longitude = seat.longitude
      this.latitude = seat.latitude
    }else{
      this.longitude = query.longitude
      this.latitude = query.latitude
    }

    this.id=query.id
    let markers = []
    markers.push({
      // iconPath: 'https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg',
      id: this.id,
      latitude: this.latitude,
      longitude: this.longitude
    })
    // }
    this.markers = markers

    const date = new Date()
    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
    }
    // this.nowDay = `${y}-${m}-${d}`
    // this.currentScroll = 'item'+ this.nowDay
    // 拿到是春运开始的第几天
    let dayNumber = 0
    this.curYear = y
    this.compareYear = y - 1
    // 24年春运开始时间为 1.26
    let mNumber = date.getMonth() + 1
    let dNumber = date.getDate()
    if (mNumber === 1){
      dayNumber = mNumber - 26 + 1
    }else{
      dayNumber = 6 + dNumber
    }
    this.howDayNumber = dayNumber
    console.log('dayNumber',dayNumber)
    // let dateList = []
    // for (let i = 1;i<=dayNumber;i++){
    //   if (i<7){
    //     dateList.push({label:`第${i}天`,value:`2024-01-${26+i-1}`})
    //   }else{
    //     dateList.push({label:`第${i}天`,value:`2024-02-${i - 7 + 1<10?`0${i - 7 + 1}`:i - 7 + 1}`})
    //   }
    // }
    // this.scrollList = dateList
    // 请求页面数据
    this.handleGetData()
  },
  methods:{
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    handleChangeType(value){
      this.pageType = value
    },
    handleChangeTime(date){
      this.currentScroll = 'item'+ date
      this.handleGetData()
    },
    async handleGetData(date){
      uni.showLoading({
        title:'加载中'
      })
      let time = date?
          date==='all'?this.nowDay:
              this.currentScroll.split('item')[1]:
          this.currentScroll.split('item')[1]

      let req = {
        ProvinceCode:'340000',
        Serverpart_ID:this.id,
        Statistics_Date:time,
      }
      let data = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis',req)
      if (data.Result_Code===100){
        let list = data.Result_Data.ShopBrandList
        let resList = []
        list.forEach(item=>{
          if (item.CurRevenue){
            resList.push(item)
          }
        })

        this.dataList = this.handleSortList(resList)
        console.log('dataList',this.dataList)
      }
      uni.hideLoading()
    },
    handleChangeShowMore(){
      this.showMore = !this.showMore
    },
    handleSortList(list){
      var len = list.length;
      for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
          if (list[j].CurRevenue < list[j + 1].CurRevenue){
            var temp = list[j];
            list[j] = list[j + 1];
            list[j + 1] = temp;
          }
        }
      }
      return list
    }
  }
}
</script>



<style scoped lang="scss">
.main{
  width: 100%;
  height: 100vh;
  background: #fff;
  .header{
    position: fixed;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    z-index: 2;
    .backArrow{
      width: 24px;
      height: 24px;
      margin-right: 16px;
      position: absolute;
    }
  }
  .mapView{
    width: 100vw;
    height: 680rpx;
    .map{
      width: 100%;
      height: 100%;
    }
  }

  .listBox{
    width: 100%;
    background: #fff;
    border-radius: 32rpx 32rpx 0 0;
    transform: translateY(-32rpx);
    padding: 4rpx;
    box-sizing: border-box;
    position: relative;
    .listTop{
      position: absolute;
      top: 4rpx;left: 4rpx;
      width: calc(100% - 8rpx);
      height: 212rpx;
      border-radius: 32rpx 32rpx 0 0;
      overflow: hidden;
      background: linear-gradient(360deg, rgba(230,238,255,0) 0%, #E6EEFF 100%);;
    }
    .contentList{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 4rpx;left: 4rpx;
      box-sizing: border-box;
      padding: 28rpx 30rpx;
      .expand{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .showMore{
          width: 32rpx;
          height: 32rpx;
        }
      }
      .contentTop{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .listTitle{
          font-size: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          color: #1E2535;
          line-height: 44rpx;
        }
        .typeChangeBox{
          display: flex;
          align-items: center;
          background: #FFFFFF;
          border-radius: 6rpx;
          box-sizing: border-box;
          padding: 4rpx;
          .normal{
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 36rpx;
            padding: 6rpx 16rpx;
          }
          .select{
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 36rpx;
            background: #EFEFF5;
            border-radius: 6rpx;
          }
        }
      }
      .navBigList{
        width: 100%;
        height: 40rpx;
        display: flex;
        align-items: center;
        margin-top: 32rpx;
        .navList{
          width: 100%;
          height: 40rpx;
          display: flex;
          align-items: center;
          white-space: nowrap;
          padding-bottom: 24rpx;
          border-bottom: 1px solid #F5F4F4;
          .scrollItem{
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #A69E9F;
            line-height: 40rpx;
            margin-right: 32rpx;
            display: inline-block;
          }
          .selectItem{
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #2363FF;
            line-height: 40rpx;
          }
        }
      }
      //.listTitle{
      //  display: flex;
      //  align-items: center;
      //  .titleItem{
      //    font-size: 28rpx;
      //    font-family: PingFangSC, PingFang SC;
      //    font-weight: 400;
      //    color: #A69E9F;
      //    line-height: 40rpx;
      //  }
      //}
      .list{
        width: 100%;
        margin-top: 16rpx;
        .listItem{
          width: 100%;
          box-sizing: border-box;
          padding: 32rpx 24rpx;
          border-radius: 16rpx;
          background: #F8F9F9;
          display: flex;
          //align-items: center;
          margin-bottom: 24rpx;
          .leftItem{
            width: 120rpx;
            height: 120rpx;
            border-radius: 16rpx;
            overflow: hidden;
            margin-right: 24rpx;
            .img{
              width: 100%;
              height: 100%;
            }
          }
          .rightItem{
            width: calc(100% - 144rpx);
            .itemTop{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .itemTitle{
                font-size: 34rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 48rpx;
                margin-bottom: 4rpx;
              }
              .type{
                display: inline-block;
                padding: 2rpx 8rpx;
                background: #EDF0F4;
                border-radius: 4rpx;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 36rpx;
              }
            }
            .itemBox{
              display: flex;
              //align-items: center;
              margin-bottom: 4rpx;
              .icon{
                width: 32rpx;
                height: 32rpx;
                margin-right: 8rpx;
                margin-top: 4rpx;
              }
              .name{
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 36rpx;
              }
            }
            .otherItem{
              display: flex;
              align-items: center;
              .other{
                display: inline-block;
                padding: 2rpx 8rpx;
                background: #EDF0F4;
                border-radius: 4rpx;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 36rpx;
                margin-right: 16rpx;
              }
            }
            .curRevenue{
              display: flex;
              align-items: center;
              margin-top: 24rpx;
              justify-content: flex-end;
              //justify-content: space-between;
              .label{
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 36rpx;
              }
              .value{
                font-size: 40rpx;
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                color: #FACB7F;
                line-height: 40rpx;
              }
            }
          }
        }
      }
      .noDataBox{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .noDataImg{
          width: 120rpx;
          height: 120rpx;
        }
        .noDataText{

        }
      }
    }
  }
}

</style>
