<template>
  <view class="earlyWarningBox">
    <view class="earlyTop">
      <view class="earlyTopBg"></view>
<!--      top:menu.top  + 'px',-->
      <view class="headerBox" :style="{paddingTop: menu.top + 'px',height:menu.bottom + 4 +'px'}">
        <view :style="{height:menu.height +'px',display: 'flex',alignItems: 'center',paddingLeft:'32rpx'}">
          <view class="backIconBox" @click="handleBack">
            <image class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"/>
          </view>
          <view class="timeBox">
            <view class="timeIconBox">
              <image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/selectIcon.svg"/>
            </view>
            <text class="timeText" @click="handleShowPopup">{{`${startDate}${endDate===startDate?'':`-${endDate}`}`}}</text>
            <!--          <uni-datetime-picker v-model="datetimerange" type="daterange"/>-->
            <!--          <picker class="timeSelect" mode="date" fields="month" :end="end" onChange="handleGetStartTime(e)">{{startDate}}</picker>-->
            <!--          <span class="timeSelect" style="margin: 0 4rpx">-</span>-->
            <!--          <picker class="timeSelect" mode="date" fields="month" :end="end">{{endDate}}</picker>-->
            <image class="downIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/downIcon.svg"/>
          </view>
        </view>
      </view>

      <view class="errorWarning" :style="{top: menu.bottom + 18 + 'px'}">
        <view class="errorTitle">
          <image class="warningIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/warningIcon.png"/>
          <text class="title">经营过程预警</text>
        </view>
        <view class="errorContent">
          <view :class="selectTab===1?'contentItem selectItem':'contentItem'" @click="handleChangeWarningTab(1)">
            <view style="display: flex;align-items: center">
              <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/accountIcon.svg"/>
              <text class="contentText">车流增加，服务区营收减少</text>
            </view>
            <text class="value">{{ sumObj['车流增加，服务区营收减少'] || 0 }}</text>
          </view>

          <view :class="selectTab===2?'contentItem selectItem':'contentItem'" @click="handleChangeWarningTab(2)">
            <view style="display: flex;align-items: center">
              <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/entryIcon.svg"/>
              <text class="contentText">车流增加，门店的营收减少</text>
            </view>
            <text class="value">{{ sumObj['车流增加，门店的营收减少'] || 0 }}</text>
          </view>

          <view :class="selectTab===3?'contentItem selectItem':'contentItem'" @click="handleChangeWarningTab(3)">
            <view style="display: flex;align-items: center">
              <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/payIcon.svg"/>
              <text class="contentText">车流增加，营收增长不匹配</text>
            </view>
            <text class="value">{{ sumObj['车流增加，营收增长不匹配'] || 0 }}</text>
          </view>

          <view :class="selectTab===4?'contentItem selectItem':'contentItem'" style="margin-bottom: 0" @click="handleChangeWarningTab(4)">
            <view style="display: flex;align-items: center">
              <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/dataIcon.png"/>
                <text class="contentText">车流减少，营收降低不匹配</text>
            </view>
            <text class="value">{{ sumObj['车流减少，营收降低不匹配'] || 0 }}</text>
          </view>

          <view class="descBox">
            <view class="descTitle">
              <text>预警说明：</text><view class="desc">
              {{'请重点关注带'}}
              <image class="notice" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/warningIcon.png"/>
              {{selectTab===1?'标识的服务区，入区车流增加自营商超营收同步增长，服务区整体营收呈现下降的情况！':
                selectTab===2?'标识的服务区，入区车流增加自营商超营收同步增长，服务区部分门店营收呈现下降的情况！':
                    selectTab===3?'标识的服务区，营收与车流增幅产生较大差异的服务区！增幅差额=车流增幅-营收增幅，越大越不好，倒序排列':
                        selectTab===4?'标识的服务区，营收与车流降幅产生较大差异的服务区！增幅差额=销售增幅-车流降幅，越大越不好，倒序排列':''}}
            </view></view>
          </view>
        </view>
      </view>
    </view>

    <view class="servicepartContent">
      <view class="contentTitle">
        <view class="contentTitleLeft">
          <image class="contentIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/foodIcon.png"/>
          <view class="titleBox">
            <text class="title">服务区数据</text>
            <text class="desc">/同比去年</text>
          </view>
        </view>
        <view class="contentTitleRight">
          <view class="fixedRight" @click="handleShowPopup">
            <view v-if="searchCount>0" class="searchCountBox">{{searchCount}}</view>
            <image v-else class="filterIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/filter.png"/>
            筛选
          </view>
        </view>
      </view>



      <view class="selectBox" v-if="false">
        <view class="scrollBox">
          <view :class="selectTab===1?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(1)">
            <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/accountIcon.svg"/>
            <text class="text">经营</text>
          </view>
          <view  :class="selectTab===2?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(2)">
            <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/entryIcon.svg"/>
            <text class="text">营收</text>
          </view>
          <view  :class="selectTab===3?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(3)">
            <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/payIcon.svg"/>
            <text class="text">增长</text>
          </view>
          <view :class="selectTab===4?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(4)">
            <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/dataIcon.png"/>
            <text class="text">减少</text>
          </view>
        </view>
<!--        <scroll-view 	scroll-x="true"  class="scrollBox">-->
<!--          <view style="display: inline-block">-->
<!--            <view :class="selectTab===1?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(1)">-->
<!--              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/accountIcon.svg"/>-->
<!--              <text class="text">经营</text>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view style="display: inline-block">-->
<!--            <view  :class="selectTab===2?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(2)">-->
<!--              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/entryIcon.svg"/>-->
<!--              <text class="text">营收</text>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view style="display: inline-block">-->
<!--            <view  :class="selectTab===3?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(3)">-->
<!--              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/payIcon.svg"/>-->
<!--              <text class="text">增长</text>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view style="display: inline-block">-->
<!--            <view :class="selectTab===4?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(4)">-->
<!--              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/dataIcon.png"/>-->
<!--              <text class="text">减少</text>-->
<!--            </view>-->
<!--          </view>-->
<!--        </scroll-view>-->
<!--        <view class="fixedRight" @click="handleShowPopup">-->
<!--          <view v-if="searchCount>0" class="searchCountBox">{{searchCount}}</view>-->
<!--          <image v-else class="filterIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/filter.png"/>-->
<!--          筛选-->
<!--        </view>-->
      </view>

      <view class="dataList">
        <view class="listTitle">
          <view class="sortItem" style="width: 50%">
            <text class="sortName">服务区名称</text>
          </view>

          <view class="sortItem" style="width: 25%;justify-content: flex-end"  @click="handleChangeSortName(1)">
            <text class="sortName">对客营收</text>
            <view class="sortIconBox">
              <image class="upIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
              <image class="bottomIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
            </view>
          </view>
          <view class="sortItem" style="width: 25%;justify-content: flex-end"  @click="handleChangeSortName(2)">
            <text class="sortName">入区车流</text>
            <view class="sortIconBox">
              <image class="upIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
              <image class="bottomIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
            </view>
          </view>
        </view>

        <view class="listContent">
          <view class="listItem" v-for="(item,index) in dataList" :key="index" @click="handleGoDetail(item)">
            <view class="itemTop">
              <view class="itemTopLeft">
                <image v-if="index<=2" class="topItemIcon" :src="index===0?'https://eshangtech.com/ShopICO/ahyd-BID/warning/sort1st.png':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/warning/sort2st.png':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/warning/sort3st.png':''"/>
                <view class="otherIcon" v-else>{{index + 1}}</view>
                <text class="name">{{ item.ServerpartName.split('服务区')[0] || '' }}</text>
                <text class="unit">/服务区</text>
                <image class="message"/>
              </view>

              <view class="itemTopRight" @click.stop="handleGoDetail(item)">
                <view class="warningNotice" v-if="item.showWarning">
                  <image class="notice" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/warningIcon.png"/>
<!--                  <text class="shopNumber">{{ `${item.ShopINCList.length}个门店` }}</text>-->
                </view>
                <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
              </view>
            </view>

            <view class="itemContent">
              <view class="secondItem">
                <view class="bgBox">
                  <image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/revenueBg.png"/>
                </view>
                <view class="secondItemTop">
                  <view>
                    <text class="itemTopName">对客营收</text>
                    <text class="itemTopUnit">/万元</text>
                  </view>
                  <image v-if="false" class="addReduce" :src="Number(item.RevenueINC.increaseRate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/examine/add.svg':Number(item.RevenueINC.increaseRate)<0?'https://eshangtech.com/ShopICO/ahyd-BID/examine/reduce.svg':''"/>

                </view>
<!--                <view :class="item.RevenueINC.curYearData<item.RevenueINC.lYearData?'itemGreenValue':'itemValue' ">{{ item.RevenueINC.curYearData?item.RevenueINC.curYearData>0?`+${$util.getMoney(item.RevenueINC.curYearData / 10000)}`:item.RevenueINC.curYearData<0?`${$util.getMoney(item.RevenueINC.curYearData / 10000)}`:'0':'-' }}</view>-->
                <view class="normalValue">{{ item.RevenueINC.curYearData?item.RevenueINC.curYearData>0?`+${$util.getMoney(item.RevenueINC.curYearData / 10000)}`:item.RevenueINC.curYearData<0?`${$util.getMoney(item.RevenueINC.curYearData / 10000)}`:'0':'-' }}</view>
                <view class="addRate" style="display: flex;align-items: center;justify-content: space-between">
                    <!--                  增长-->
<!--                    <text :class="item.RevenueINC.increaseData>0?'redValue':item.RevenueINC.increaseData<0?'greenValue':''" style="margin-right: 8rpx">{{item.RevenueINC.increaseData?item.RevenueINC.increaseData>0?`+${$util.getMoney(item.RevenueINC.increaseData / 10000)}`:item.RevenueINC.increaseData<0?`${$util.getMoney(item.RevenueINC.increaseData / 10000)}`:'0':'-'  }}</text>-->
                    <text class="normalValue" style="margin-right: 8rpx">{{item.RevenueINC.increaseData?item.RevenueINC.increaseData>0?`+${$util.getMoney(item.RevenueINC.increaseData / 10000)}`:item.RevenueINC.increaseData<0?`${$util.getMoney(item.RevenueINC.increaseData / 10000)}`:'0':'-'  }}</text>
                    <!--                  增幅-->
                    <text :class="item.RevenueINC.increaseRate>0?'redValue':item.RevenueINC.increaseRate<0?'greenValue':''">{{item.RevenueINC.increaseRate?item.RevenueINC.increaseRate>0?`+${item.RevenueINC.increaseRate}%`:item.RevenueINC.increaseRate<0?`${item.RevenueINC.increaseRate}%`:'0':'-'  }}</text>
                </view>
              </view>

              <view class="secondItem" @click="handleGoDetail(item)">
                <view class="bgBox">
                  <image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/carBg.png"/>
                </view>
                <view class="secondItemTop">
                  <view>
                    <text class="itemTopName">入区车流</text>
                    <text class="itemTopUnit">/万辆</text>
                  </view>
                  <image  v-if="false" class="addReduce" :src="Number(item.BayonetINC.increaseRate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/examine/add.svg':Number(item.BayonetINC.increaseRate)<0?'https://eshangtech.com/ShopICO/ahyd-BID/examine/reduce.svg':''"/>

                </view>
<!--                <view :class="item.BayonetINC.curYearData<item.BayonetINC.lYearData?'itemGreenValue':'itemValue' ">{{ item.BayonetINC.curYearData?item.BayonetINC.curYearData>0?`+${$util.getMoney(item.BayonetINC.curYearData / 10000)}`:item.BayonetINC.curYearData<0?`${$util.getMoney(item.BayonetINC.curYearData / 10000)}`:'0':'-' }}</view>-->
                <view class="normalValue">{{ item.BayonetINC.curYearData?item.BayonetINC.curYearData>0?`+${$util.getMoney(item.BayonetINC.curYearData / 10000)}`:item.BayonetINC.curYearData<0?`${$util.getMoney(item.BayonetINC.curYearData / 10000)}`:'0':'-' }}</view>
                <view class="addRate" style="display: flex;align-items: center;justify-content: space-between">
                    <!--                  增长-->
<!--                    <text :class="item.BayonetINC.increaseData>0?'redValue':item.BayonetINC.increaseData<0?'greenValue':''" style="margin-right: 8rpx">{{item.BayonetINC.increaseData?item.BayonetINC.increaseData>0?`+${$util.getMoney(item.BayonetINC.increaseData / 10000)}`:item.BayonetINC.increaseData<0?`${$util.getMoney(item.BayonetINC.increaseData / 10000)}`:'0':'-'  }}</text>-->
                    <text class="normalValue" style="margin-right: 8rpx">{{item.BayonetINC.increaseData?item.BayonetINC.increaseData>0?`+${$util.getMoney(item.BayonetINC.increaseData / 10000)}`:item.BayonetINC.increaseData<0?`${$util.getMoney(item.BayonetINC.increaseData / 10000)}`:'0':'-'  }}</text>
                    <!--                  增幅-->
                    <text :class="item.BayonetINC.increaseRate>0?'redValue':item.BayonetINC.increaseRate<0?'greenValue':''">{{item.BayonetINC.increaseRate?item.BayonetINC.increaseRate>0?`+${item.BayonetINC.increaseRate}%`:item.BayonetINC.increaseRate<0?`${item.BayonetINC.increaseRate}%`:'':'-'  }}</text>
                  </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <uniPopup type="bottom" :round="true" :show="showPop" @hidePopup="hidePopup">
      <view class="uniPopup">
        <view class="uniPopupTop">
          <text class="uniPopupTitle">筛选</text>
          <image @click="hidePopup" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
        </view>

        <view class="filterBox">
          <view class="filterTitle">统计时间</view>
          <view class="filterTimeBox">
            <picker class="timeSelect" mode="date" fields="month" :start="'2024-01-01'" :end="end" @change="handleGetStartTime">{{startDate}}</picker>
            <span class="timeSelect" style="margin: 0 4rpx">-</span>
            <picker class="timeSelect" mode="date" fields="month" :start="start" :end="end" @change="handleGetEndTime">{{endDate}}</picker>
          </view>
        </view>

        <view class="filterBox" style="margin-top: 48rpx">
          <view class="filterTitle">经营模式</view>
          <view class="filterItemList">
            <view :class="statisticsType===1?'filterItem selectFilterItem':'filterItem'" @click="handleChangeStaticType(1)">便利店</view>
            <view :class="statisticsType===2?'filterItem selectFilterItem':'filterItem'" @click="handleChangeStaticType(2)">餐饮客房</view>
            <view :class="statisticsType===3?'filterItem selectFilterItem':'filterItem'" @click="handleChangeStaticType(3)">商铺租赁</view>
          </view>
        </view>

        <view class="filterBox" style="margin-top: 48rpx">
          <view class="filterTitle">经营业态</view>
          <view class="filterItemList">
            <view :class="shopTrade===item.value?'filterItem selectFilterItem':'filterItem'" v-for="(item,index) in shopTradeList" :key="index" @click="handleChangeShopTrade(item.value)">{{item.label}}</view>
          </view>
        </view>

        <view class="filterBox" style="margin-top: 48rpx">
          <view class="filterTitle">排行类型</view>
          <view class="filterItemList">
            <view :class="sorterType===1?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSorterType(1)">全局排行</view>
            <view :class="sorterType===2?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSorterType(2)">管理排行</view>
          </view>
        </view>

        <view class="button" @click="handleSubmit">确定</view>
      </view>
    </uniPopup>
  </view>
</template>
<script>
  import moment from "moment";
  import request from '@/util/index.js'
  import UniPopup from "../../components/uni-popup.vue";
  import {wrapTreeNode} from "../../util/dateTime";
  export default {
    name: "index",
    components: {UniPopup},
    data(){
      return {
        menu:{},
        showPop:false,// 弹出框
        // datetimerange:[moment().format('YYYY/MM'),moment().format('YYYY/MM')]
        startDate: moment().subtract(1,'months').format('YYYY/MM'),//开始时间
        endDate: moment().subtract(1,'months').format('YYYY/MM'),// 结束时间
        start:  moment().subtract(1,'months').format('YYYY-MM'),// 结束时间开始范围
        end: moment().format('YYYY-MM-DD'),// 结束的时间范围
        useInfo:{},// 用户信息
        statisticsType: 0,// 经营模式
        shopTrade: 0,// 经营业态
        shopTradeList:[],// 经营业态数组
        sorterType:2,// 排行类型
        selectTab: 1,// 选择的tab
        dataList: [],// 遍历的展示数组
        sumObj:{},// 合计对象
        searchCount: 0,// 搜索条件的数量
        sortName: 1,// 1是对客销售  2是入区车流
        sortType: 1,// 1是降序 2是升序
        allServerPartId:'',// 所有服务区
      }
    },
    onLoad(query){
      let systemInfo = uni.getSystemInfoSync()
      this.menu = uni.getMenuButtonBoundingClientRect()

      let userInfo = uni.getStorageSync('vuex')
      userInfo = JSON.parse(userInfo)
      this.useInfo = JSON.parse(JSON.stringify(userInfo))

      let serverList = this.useInfo.userData.serverPartList
      let serverPartId = ''
      if (serverList && serverList.length>0){
        serverList.forEach(item=>{
          if (serverPartId){
            serverPartId +=`,${item.value}`
          }else{
            serverPartId = item.value
          }
        })
      }
      this.allServerPartId = serverPartId

      this.handleBrandType()

      this.handleGetWarningNumber()
      this.handleGetPageData()

      this.handleGetSearchCount()
    },
    methods:{
      // 修改排序
      handleChangeSortName(value){
        if (value===this.sortName){
          if (this.sortType===1){
            this.sortType=0
          }else{
            this.sortType=1
          }
        }else{
          this.sortName = value
          this.sortType=1
        }
        this.dataList = this.handleSortList(this.dataList)
      },
      // 显示弹出框
      handleShowPopup(){
        this.showPop = true
      },
      // 隐藏弹出框
      hidePopup(){
        this.showPop = false
      },
      // 修改开始时间
      handleGetStartTime(e){
        console.log('e',e)
        this.start = e.detail.value
        this.startDate = moment(e.detail.value).format('YYYY/MM')
      },
      // 修改结束时间
      handleGetEndTime(e){
        console.log('e',e)
        this.endDate = moment(e.detail.value).format('YYYY/MM')
        console.log('this.endDate',this.endDate)
      },
      // 经营业态数据
      async handleBrandType(){
        const req ={
          FieldExplainField: 'BusinessTradeIds',
          sessionName: 'BusinessTradeIds'
        }
        const data = await request.$webGet('EShangApiMain/FrameWork/GetFieldEnumTree',req)
        const list = wrapTreeNode(data.Result_Data.List)
        this.shopTradeList = list
      },
      // 修改经营模式
      handleChangeStaticType(e){
        if (this.statisticsType===e){
          this.statisticsType = 0
        }else{
          this.statisticsType = e
        }
      },
      // 修改经营业态
      handleChangeShopTrade(e){
        if (this.shopTrade===e){
          this.shopTrade = 0
        }else{
          this.shopTrade = e
        }
      },
      // 修改预警类型的tab
      handleChangeWarningTab(e){
        this.selectTab = e
        this.dataList = []
        this.handleGetPageData()
      },
      // 修改排行类型
      handleChangeSorterType(e){
        if (this.sorterType===e){
          this.sorterType = 0
        }else{
          this.sorterType = e
        }
      },
      // 查询条件有多少个
      handleGetSearchCount(){
        // 多少个查询条件
        let num = 0
        if (this.startDate || this.endDate){
          num+=1
        }
        if (this.statisticsType>0){
          num+=1
        }
        if (this.shopTrade>0){
          num+=1
        }
        if (this.sorterType>0){
          num+=1
        }
        this.searchCount = num
        console.log('searchCount',this.searchCount)
      },
      // 确定按钮
      handleSubmit(){
        this.handleGetSearchCount()
        this.showPop = false
        this.handleGetWarningNumber()
        this.handleGetPageData()
      },
      // 跳转详情
      handleGoDetail(obj){
        let date = ''
        if (this.startDate === this.endDate){
          console.log('this.startDate',this.startDate)
          let month = new Date(this.startDate.replace('/','-')).getMonth() + 1
          console.log('month',month)
          date = `${month<10?'0'+month:month}月`
        }else{
          date = `${moment(this.startDate.replace('/','-')).format('YYYYMM')}-${moment(this.endDate.replace('/','-')).format('YYYYMM')}`
        }

        this.$util.toNextRoute('navigateTo', `/pages/earlyWarning/detail?obj=${JSON.stringify(obj)}&date=${date}&type=${this.selectTab}`)
      },
      // 返回上一级
      handleBack(){
        uni.navigateBack({
          delta: 1
        })
      },
      // 异常合计数量
      async handleGetWarningNumber(){
        const req = {
          StatisticsStartMonth: this.startDate.replace('/',''),
          StatisticsEndMonth: this.endDate.replace('/',''),
          BusinessTradeType: this.statisticsType || '',
          shopTrade: this.shopTrade || ''
        }
        const data = await request.$webGet('/CommercialApi/Revenue/GetMonthINCAnalysisSummary',req)
        console.log('data2312312',data)
        let list = data.Result_Data.List
        let obj = {}
        if (list && list.length>0){
          list.forEach(item=>{
            obj[item.name] = item.value
          })
        }
        this.sumObj = obj
      },
      // 请求页面数据
      async handleGetPageData(){
        uni.showLoading({
          title: '正在加载...'
        })
        const params = {
          pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
          StatisticsStartMonth:  this.startDate.replace('/',''),
          StatisticsEndMonth: this.endDate.replace('/',''),
          // businessRegion:1,
          calcQOQ: false,
          calcYOY: true,
          calcBayonet: true,
          sorterType: this.sorterType || '',
          BusinessTradeType: this.statisticsType || '',
          // shopTrade: this.shopTrade || '',
          // showLevel: this.sorterType || '',
          waringType: this.selectTab,
          ServerpartId: this.allServerPartId || ''
        }
        let req = {}
        if (this.selectTab===1){
          req = {
            ...params,
            showBayonet: 1,
            showRevenue: 2,
            showLevel: 1
          }
        }else if(this.selectTab===2){
          req = {
            ...params,
            showBayonet: 1,
            showRevenue: 2,
            showLevel: 2
          }
        }else if(this.selectTab===3){
          req = {
            ...params,
            showBayonet: 1,
            showRevenue: 1,
          }
        }else if(this.selectTab===4){
          req = {
            ...params,
            showBayonet: 2,
            showRevenue: 2,
          }
        }
        console.log('req2312312',req)
        const data = await request.$webGet('CommercialApi/Revenue/GetMonthINCAnalysis',req)
        if (data.Result_Data.List && data.Result_Data.List.length>0){
          let list = wrapTreeNode(data.Result_Data.List)
          console.log('list',list)

          let res = []
          list.forEach(item=>{
            if (item.children && item.children.length>0){
              item.children.forEach((subItem)=>{
                if (subItem.children && subItem.children.length>0){
                  subItem.children.forEach((thirdItem)=>{
                    if (thirdItem.ShopINCList && thirdItem.ShopINCList.length>0){
                      thirdItem.ShopINCList.forEach(fourth=>{
                        if (fourth.ServerpartShopName==='自营超市' && fourth.RevenueINC.increaseRate>0){
                          thirdItem.showWarning = true
                        }
                      })
                    }
                    res.push(thirdItem)
                  })
                }
              })
            }
          })
          console.log('res',res)
          this.dataList = this.handleSortList(res)
        }
        uni.hideLoading()
      },
      // 排序方法
      handleSortList(list){
        var len = list.length;
        for (var i = 0; i < len - 1; i++) {
          for (var j = 0; j < len - 1 - i; j++) {
            if (this.sortType === 1){
              if (this.sortName ===1){
                if (list[j].RevenueINC.curYearData < list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }else if(this.sortName===2){
                if (list[j].BayonetINC.curYearData < list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }else{
              if (this.sortName ===1){
                if (list[j].RevenueINC.curYearData > list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }else if(this.sortName===2){
                if (list[j].BayonetINC.curYearData > list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
          }
        }
        return list
      }
    }
  }
</script>
<style scoped lang="scss">
.earlyWarningBox{
  width: 100%;
  background: #F3F3F3;
  .earlyTop{
    width: 100%;
    height: 780rpx;
    background: #F3F3F3;
    position: relative;
    .earlyTopBg{
      width: 100%;
      height: 430rpx;
      background: linear-gradient( 180deg, #D8E3FF 0%, #F3F3F3 100%);
    }
    .headerBox{
      width: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 20;
      box-sizing: border-box;
      background: linear-gradient( 180deg, #D8E3FF 0%, #E5EBF9 100%);
      //padding: 32rpx;
      display: flex;
      align-items: center;
      .backIconBox{
        width: 48rpx;
        height: 48rpx;
        margin-right: 18rpx;
        .backIcon{
          width: 100%;
          height: 100%;
        }
      }
      .timeBox{
        display: flex;
        align-items: center;
        .timeIconBox{
          width: 40rpx;
          height: 40rpx;
          margin-right: 12rpx;
          .timeIcon{
            width: 100%;
            height: 100%;
          }
        }
        .timeText{
          font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
        .timeSelect{
          font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
        .downIcon{
          width: 30rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
      }
    }
    .errorWarning{
      width: 100%;
      box-sizing: border-box;
      padding: 0 32rpx;
      position: absolute;
      left: 0;
      .errorTitle{
        width: 100%;
        height: 88rpx;
        background: linear-gradient( 180deg, #F2F3FF 0%, #F7F8FF 100%);
        border-top-right-radius: 16rpx;
        border-top-left-radius: 16rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 24rpx;
        .warningIcon{
          width: 40rpx;
          height: 40rpx;
          margin-right: 8rpx;
        }
        .title{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #212226;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .errorContent{
        width: 100%;
        //height: 328rpx;
        background: #FFFFFF;
        border-bottom-right-radius: 16rpx;
        border-bottom-left-radius: 16rpx;
        box-sizing: border-box;
        padding: 12rpx 12rpx 24rpx;

        .contentItem{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12rpx 12rpx;
          border-radius: 12rpx;
          //margin-bottom: 24rpx;
          .itemIcon{
            width: 48rpx;
            height: 48rpx;
            margin-right: 8rpx;
          }
          .contentText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #160002;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
          .value{
            font-family: DINAlternate, DINAlternate;
            font-size: 28rpx;
            color: #160002;
            line-height: 42rpx;
            text-align: center;
            font-style: normal;
          }
        }
        .selectItem{
          background: #D9E9FF;
        }
        .descBox{
          width: 100%;
          background: #F8F8F8;
          border-radius: 16rpx;
          box-sizing: border-box;
          padding: 16rpx;
          margin-top: 24rpx;
          .descTitle{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: gray;
            .desc{
              color: red;
              display: inline;
              font-size: 24rpx;
              .notice{
                width: 30rpx;
                height: 30rpx;
                margin: 0 8rpx;
              }
            }
          }
        }
      }
    }
  }

  .servicepartContent{
    width: 100%;
    //height: calc(100vh - 616rpx);
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 32rpx;
    .contentTitle{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .contentTitleLeft{
        display: flex;
        align-items: center;
        .contentIcon{
          width: 48rpx;
          height: 48rpx;
        }
        .titleBox{
          margin-left: 12rpx;
          .title{
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #160002;
            line-height: 44rpx;
          }
          .desc{
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #9A9A9A;
            line-height: 36rpx;
            margin-left: 8rpx;
          }
        }
      }
      .contentTitleRight{
        .fixedRight{
          width: 138rpx;
          height: 72rpx;
          background: #fff;
          box-sizing: border-box;
          padding: 22rpx 0 22rpx 22rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #160002;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          .filterIcon{
            width: 24rpx;
            height: 28rpx;
            margin-right: 4rpx;
          }
          .searchCountBox{
            width: 28rpx;
            height: 28rpx;
            background: #2363FF;
            border-radius: 15rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #FFFFFF;
            line-height: 24rpx;
            text-align: left;
            font-style: normal;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 6rpx;
          }
        }
      }

    }
    .selectBox{
      width: 100%;
      height: 72rpx;
      display: flex;
      align-items: center;
      margin-top: 28rpx;
      .scrollBox{
        //width: calc(100% - 140rpx);
        width: 100%;
        height: 72rpx;
        display: flex;
        justify-content: space-between;
        //white-space: nowrap;
        .scrollItem{
          background: #F5F5F5;
          border-radius: 8rpx;
          margin-right: 16rpx;
          padding: 16rpx;
          display: flex;
          align-items: center;
          .itemImg{
            width: 48rpx;
            height: 48rpx;
            margin-right: 8rpx;
          }
          .text{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #786B6C;
            line-height: 40rpx;
            text-align: right;
            font-style: normal;
          }
        }
        .selectScroll{
          background: #ECF2FF!important;
          .text{
            color: #2363FF!important;
          }
        }
      }
      .fixedRight{
        width: 138rpx;
        height: 72rpx;
        background: #fff;
        box-sizing: border-box;
        padding: 22rpx;
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #160002;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        .filterIcon{
          width: 24rpx;
          height: 28rpx;
          margin-right: 4rpx;
        }
        .searchCountBox{
          width: 28rpx;
          height: 28rpx;
          background: #2363FF;
          border-radius: 15rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 24rpx;
          text-align: left;
          font-style: normal;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 6rpx;
        }
      }
    }
    .dataList{
      width: 100%;
      background: #fff;
      //height: calc(100% - 200rpx);
      margin-top: 24rpx;
      .listTitle{
        display: flex;
        align-items: center;
        border-bottom: 1px solid #F1F1F1;
        padding-bottom: 16rpx;
        .titleName{
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #9A9A9A;
          line-height: 36rpx;
        }
        .sortItem{
          display: flex;
          align-items: center;
          .sortName{
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #9A9A9A;
            line-height: 36rpx;
          }
          .sortIconBox{
            display: flex;
            flex-direction: column;
            margin-left: 16rpx;
            .upIcon{
              width: 16rpx;
              height: 12rpx;
              margin-bottom: 4rpx;
            }
            .bottomIcon{
              width: 16rpx;
              height: 12rpx;
            }
          }
        }
      }
      .listContent{
        width: 100%;
        height: calc(100% - 60rpx);
        margin-top: 24rpx;
        .listItem{
          width: 100%;
          margin-bottom: 40rpx;
          .itemTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .itemTopLeft{
              display: flex;
              align-items: center;
              .topItemIcon{
                width: 40rpx;
                height: 40rpx;
              }
              .otherIcon{
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/warning/sortOther.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 24rpx;
                text-align: left;
                font-style: normal;
              }
              .name{
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 40rpx;
              }
              .unit{
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #9A9A9A;
                line-height: 36rpx;
                margin-left: 4rpx;
                white-space: nowrap;
              }
              .message{
                width: 32rpx;
                height: 32rpx;
              }
            }

            .itemTopRight{
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              .warningNotice{
                display: flex;
                align-items: center;
                margin-right: 16rpx;
                .notice{
                  width: 40rpx;
                  height: 40rpx;
                  margin-right: 8rpx;
                }
                .shopNumber{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 600;
                  font-size: 28rpx;
                  color: #FF4C0A;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                }
              }
              .moreIcon{
                width: 32rpx;
                height: 32rpx;
              }
            }
          }

          .itemContent{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 16rpx;
            .secondItem{
              width: calc((100% - 18rpx) / 2);
              background: #F7F8FA;
              border-radius: 8rpx;
              padding: 16rpx 24rpx;
              box-sizing: border-box;
              position: relative;
              .bg{
                position: absolute;
                bottom: 0;
                right: 0;
                width: 120rpx;
                height: 120rpx;
                overflow: hidden;
                .bg{
                  width: 144rpx;
                  height: 144rpx
                }
              }
              .secondItemTop{
                margin-bottom: 4rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .itemTopName{
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 40rpx;
                }
                .itemTopUnit{
                  font-size: 24rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #9A9A9A;
                  line-height: 36rpx;
                  margin-left: 4rpx;
                }
                .addReduce{
                  width: 28rpx;
                  height: 28rpx;
                  margin-right: 4px;
                  border-radius: 50%;
                }
              }
              .normalValue{
                font-family: DINAlternate, DINAlternate;
                font-size: 24rpx;
                color: #9A9A9A;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
              .itemValue{
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 28rpx;
                color: #E83944;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
              .itemGreenValue{
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 28rpx;
                color: #127E5B;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
              .addRate{
                margin-top: 4rpx;
                .normalValue{
                  font-family: DINAlternate, DINAlternate;
                  font-size: 24rpx;
                  color: #9A9A9A;
                  line-height: 32rpx;
                  text-align: left;
                  font-style: normal;
                }
                .redValue{
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 28rpx;
                  color: #E83944;
                  line-height: 32rpx;
                  text-align: left;
                  font-style: normal;
                }
                .greenValue{
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 28rpx;
                  color: #127E5B;
                  line-height: 32rpx;
                  text-align: left;
                  font-style: normal;
                }
                .unit{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #9A9A9A;
                  line-height: 32rpx;
                  text-align: left;
                  font-style: normal;
                  margin-left: 8rpx;
                  white-space: nowrap;
                }
              }
            }
          }
        }
      }
    }
  }

  .uniPopup{
    width: 100%;
    height: 1050rpx;
    box-sizing: border-box;
    padding: 32rpx;
    .uniPopupTop{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .uniPopupTitle{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #160002;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }
      .close{
        width: 40rpx;
        height: 40rpx;
      }

    }

    .filterBox{
      margin-top: 40rpx;
      .filterTitle{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #212226;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }
      .filterItemList{
        margin: 24rpx;
        display: flex;
        flex-wrap: wrap;
        .filterItem{
          width: calc((100% - 32rpx)/3);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16rpx;
          margin-bottom: 16rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #160002;
          line-height: 40rpx;
          text-align: right;
          font-style: normal;
          background: #F5F5F5;
          border-radius: 8rpx;
          padding: 12rpx 0;
        }
        .selectFilterItem{
          color: #2363FF;
          background: #ECF2FF;
        }
        .filterItem:nth-child(3){
          margin-right: 0;
        }
      }
      .filterTimeBox{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24rpx;
        .timeSelect{
          width: calc((100% - 20px)/2);
        }
      }
    }

    .button{
      background: #2363FF;
      border-radius: 8rpx;
      width: calc(100% - 64rpx);
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #FFFFFF;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
      position: fixed;
      bottom: 32rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
