<template>
  <view class="projectWarningBox">
    <view class="earlyTop" :style="{ height: `calc(${menu.bottom}px + 850rpx)` }">
      <view class="earlyTopBg"></view>
      <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 v-for="(item, index) in topTabList" :key="index"
            :class="selectTab === index + 1 ? 'errorItem selectErrorItem' : 'errorItem'"
            @click="handleChangeTab(index + 1)">
            <view class="itemLeft">
              <image class="itemLogo"
                :src="'https://eshangtech.com/ShopICO/ahyd-BID/warning/error' + (index + 1) + 'st.png'" />
            </view>
            <view class="itemRight">
              <text class="itemValue">{{ item.value || '-' }}</text>
              <text class="itemLabel">{{ item.label || '' }}</text>
            </view>
          </view>


          <view class="messageBox">
            <view style="display: flex;align-items: center">
              <image class="messageIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error6st.png" />
              <text class="messageType">{{ warningNameObj[selectTab] }}</text>
            </view>
            <view style="margin-top: 16rpx">
              <text class="messageDesc">{{ warningDescObj[selectTab] }}</text>
            </view>
          </view>

          <!--          <view :class="selectTab===1?'errorItem selectErrorItem':'errorItem'" @click="handleChangeTab(1)">-->
          <!--            <view class="itemLeft">-->
          <!--              <image class="itemLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error1st.png"/>-->
          <!--            </view>-->
          <!--            <view class="itemRight">-->
          <!--              <text class="itemValue">{{sumObj[1] || '-'}}</text>-->
          <!--              <text class="itemLabel">项目未有营业</text>-->
          <!--            </view>-->
          <!--          </view>-->

          <!--          <view :class="selectTab===2?'errorItem selectErrorItem':'errorItem'" @click="handleChangeTab(2)">-->
          <!--            <view class="itemLeft">-->
          <!--              <image class="itemLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error2st.png"/>-->
          <!--            </view>-->
          <!--            <view class="itemRight">-->
          <!--              <text class="itemValue">{{sumObj[2] || '-'}}</text>-->
          <!--              <text class="itemLabel">项目利润过低</text>-->
          <!--            </view>-->
          <!--          </view>-->

          <!--          <view  :class="selectTab===3?'errorItem selectErrorItem':'errorItem'" @click="handleChangeTab(3)">-->
          <!--            <view class="itemLeft">-->
          <!--              <image class="itemLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error4st.png"/>-->
          <!--            </view>-->
          <!--            <view class="itemRight">-->
          <!--              <text class="itemValue">{{sumObj[3] || '-'}}</text>-->
          <!--              <text class="itemLabel">商家退场告警</text>-->
          <!--            </view>-->
          <!--          </view>-->

          <!--          <view  :class="selectTab===4?'errorItem selectErrorItem':'errorItem'" @click="handleChangeTab(4)">-->
          <!--            <view class="itemLeft">-->
          <!--              <image class="itemLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error3st.png"/>-->
          <!--            </view>-->
          <!--            <view class="itemRight">-->
          <!--              <text class="itemValue">{{sumObj[4] || '-'}}</text>-->
          <!--              <text class="itemLabel">项目预亏预警</text>-->
          <!--            </view>-->
          <!--          </view>-->



          <!--          <view  :class="selectTab===5?'errorItem selectErrorItem':'errorItem'" @click="handleChangeTab(5)">-->
          <!--            <view class="itemLeft">-->
          <!--              <image class="itemLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error5st.png"/>-->
          <!--            </view>-->
          <!--            <view class="itemRight">-->
          <!--              <text class="itemValue">{{sumObj[5] || '-'}}</text>-->
          <!--              <text class="itemLabel">商家退场预警</text>-->
          <!--            </view>-->
          <!--          </view>-->

          <!--          <view  :class="selectTab===6?'errorItem selectErrorItem':'errorItem'" @click="handleChangeTab(6)">-->
          <!--            <view class="itemLeft">-->
          <!--              <image class="itemLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error6st.png"/>-->
          <!--            </view>-->
          <!--            <view class="itemRight">-->
          <!--              <text class="itemValue">{{sumObj[6] || '-'}}</text>-->
          <!--              <text class="itemLabel">租金提成偏低</text>-->
          <!--            </view>-->
          <!--          </view>-->

          <!--          <view  :class="selectTab===7?'errorItem selectErrorItem':'errorItem'" style="margin-bottom: 0" @click="handleChangeTab(7)">-->
          <!--            <view class="itemLeft">-->
          <!--              <image class="itemLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error7st.png"/>-->
          <!--            </view>-->
          <!--            <view class="itemRight">-->
          <!--              <text class="itemValue">{{sumObj[7] || '-'}}</text>-->
          <!--              <text class="itemLabel">保底租金过高</text>-->
          <!--            </view>-->
          <!--          </view>-->

          <!--          <view  :class="selectTab===8?'errorItem selectErrorItem':'errorItem'" style="margin-bottom: 0" @click="handleChangeTab(8)">-->
          <!--            <view class="itemLeft">-->
          <!--              <image class="itemLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error8st.png"/>-->
          <!--            </view>-->
          <!--            <view class="itemRight">-->
          <!--              <text class="itemValue">{{sumObj[8] || '-'}}</text>-->
          <!--              <text class="itemLabel">业态缺失告警</text>-->
          <!--            </view>-->
          <!--          </view>-->
        </view>
      </view>
    </view>

    <view class="servicepartContent">
      <view class="contentTitle">
        <view style="display: flex;align-items: center">
          <image class="contentIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/foodIcon.png" />
          <view class="titleBox">
            <text class="title">商家数据</text>
          </view>
        </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="selectBox" v-if="false">
        <scroll-view scroll-x="true" class="scrollBox">
          <!--          topTabList-->
          <view style="display: inline-block">
            <view :class="selectTab === 1 ? 'scrollItem selectScroll' : 'scrollItem'" @click="handleChangeTab(1)">
              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error1st.png" />
              <text class="text">未营业</text>
            </view>
          </view>
          <view style="display: inline-block">
            <view :class="selectTab === 2 ? 'scrollItem selectScroll' : 'scrollItem'" @click="handleChangeTab(2)">
              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error2st.png" />
              <text class="text">利润低</text>
            </view>
          </view>
          <view style="display: inline-block">
            <view :class="selectTab === 3 ? 'scrollItem selectScroll' : 'scrollItem'" @click="handleChangeTab(3)">
              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error3st.png" />
              <text class="text">退场告警</text>
            </view>
          </view>
          <view style="display: inline-block">
            <view :class="selectTab === 4 ? 'scrollItem selectScroll' : 'scrollItem'" @click="handleChangeTab(4)">
              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error4st.png" />
              <text class="text">预亏</text>
            </view>
          </view>
          <view style="display: inline-block">
            <view :class="selectTab === 5 ? 'scrollItem selectScroll' : 'scrollItem'" @click="handleChangeTab(5)">
              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error5st.png" />
              <text class="text">退场预警</text>
            </view>
          </view>
          <view style="display: inline-block">
            <view :class="selectTab === 6 ? 'scrollItem selectScroll' : 'scrollItem'" @click="handleChangeTab(6)">
              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error6st.png" />
              <text class="text">提成低</text>
            </view>
          </view>
          <view style="display: inline-block">
            <view :class="selectTab === 7 ? 'scrollItem selectScroll' : 'scrollItem'" @click="handleChangeTab(7)">
              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error7st.png" />
              <text class="text">租金高</text>
            </view>
          </view>
          <view style="display: inline-block">
            <view :class="selectTab === 8 ? 'scrollItem selectScroll' : 'scrollItem'" @click="handleChangeTab(8)">
              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error8st.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)">
            <image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/shopItemBg.png" />
            <view class="listItemLeft">
              <view class="picBox">
                <image class="shopLogo" :src="item.Brand_ICO" />
              </view>

              <view class="stateBox" v-if="item.BUSINESS_STATE === 3000">
                <view class="stateIcon"></view>
                <text class="stateText">关闭</text>
              </view>
            </view>
            <view class="listItemRight">
              <view class="rightTop">
                <view class="rightTopLeft">
                  <image v-if="index <= 2" class="sortIcon"
                    :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="shopName">{{ item.SERVERPARTSHOP_NAME || '' }}</text>
                </view>
                <view class="rightTopRight">
                  <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg" />
                </view>
              </view>
              <view class="MERCHANTS_NAMEBox">
                <text class="MERCHANTS_NAME">{{ item.MERCHANTS_NAME || '' }}</text>
                <!--                style="margin-right: 12rpx"-->
                <text class="type">{{ businessTypeObj[item.BUSINESS_TYPE] }}</text>
              </view>
              <view class="rightBottom">
                <text class="endTime">{{ `项目期数：${item.PERIOD_INDEX}， ${item.STARTDATE}-${item.ENDDATE}` }}</text>
              </view>
              <view class="rightBottomMoney">
                <view style="width: 50%">
                  <view class="moneyItem">
                    <text class="value">{{ item.REVENUE_AMOUNT ? $util.getMoney(item.REVENUE_AMOUNT / 10000) : '-'
                    }}</text>
                    <text class="unit">营收 /万元</text>
                  </view>
                </view>
                <view style="width: 50%;position: relative" @click.stop="handleShowDetail(item)">
                  <view class="moneyItem">
                    <text class="value">{{ item.PROFIT_AMOUNT ? $util.getMoney(item.PROFIT_AMOUNT / 10000) : '-'
                    }}</text>
                    <text class="unit">盈利 /万元</text>
                  </view>
                  <view class="moneyDetailFixed" v-if="item.showDetail" @click.stop="handleCloseDetail(item)">
                    {{ `营业金额（${item.REVENUE_AMOUNT ? $util.getMoney(item.REVENUE_AMOUNT / 10000) :
                      0}万元）-甲方利润（${item.ROYALTY_THEORY ? $util.getMoney(item.ROYALTY_THEORY / 10000) : 0}万元）-
                    商家成本预估(20%营业额；${item.LABOURS_COUNT ? `员工${item.LABOURS_COUNT ||
                        0}人；` : ''}${item.LABOURS_WAGE ? `月均${item.LABOURS_WAGE ||
                          0}元/人；` : ''}${item.DEPRECIATION_EXPENSE ? `折旧费${item.DEPRECIATION_EXPENSE ||
                            0}万元/3年；` : ''}${item.OTHER_EXPENSE ? `其他运营成本${item.OTHER_EXPENSE ||
                              0}万元` : ''})（${$util.getMoney(item.COST_AMOUNT / 10000) || 0}万元）` }}
                  </view>
                </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" :value="$moment(startDate).format('YYYY-MM')"
              :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" :value="$moment(endDate).format('YYYY-MM')"
              :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="businessStatus === 1000 ? 'filterItem selectFilterItem' : 'filterItem'"
              @click="handleChangeBusinessStatus(1000)">运营中</view>
            <view :class="businessStatus === 1010 ? 'filterItem selectFilterItem' : 'filterItem'"
              @click="handleChangeBusinessStatus(1010)">待运营</view>
            <view :class="businessStatus === 2000 ? 'filterItem selectFilterItem' : 'filterItem'"
              @click="handleChangeBusinessStatus(2000)">暂停</view>
            <view :class="businessStatus === 3000 ? 'filterItem selectFilterItem' : 'filterItem'"
              @click="handleChangeBusinessStatus(3000)">关闭</view>
          </view>
        </view>

        <view class="filterBox" style="margin-top: 48rpx">
          <view class="filterTitle">经营模式</view>
          <view class="filterItemList">
            <view :class="businessType === 1000 ? 'filterItem selectFilterItem' : 'filterItem'"
              @click="handleChangeBusinessType(1000)">合作经营</view>
            <view :class="businessType === 2000 ? 'filterItem selectFilterItem' : 'filterItem'"
              @click="handleChangeBusinessType(2000)">固定租金</view>
            <view :class="businessType === 3000 ? 'filterItem selectFilterItem' : 'filterItem'"
              @click="handleChangeBusinessType(3000)">保底采购</view>
            <view :class="businessType === 4000 ? 'filterItem selectFilterItem' : 'filterItem'"
              @click="handleChangeBusinessType(4000)">业主自营</view>
          </view>
        </view>

        <view class="button" @click="handleSubmit">确定</view>
      </view>
    </uniPopup>
  </view>
</template>
<script>
import UniPopup from "../../components/uni-popup.vue";
import moment from "moment/moment";
import request from '@/util/index.js'

export default {
  name: "projectWarning",
  components: { UniPopup },
  data() {
    return {
      menu: {},
      showPop: false,// 弹出框
      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'),// 结束的时间范围
      businessStatus: 0,// 经营状态
      businessType: 0,// 经营模式
      allServerPartId: '',// 所有服务区的id
      selectTab: 1,
      dataList: [],
      businessTypeObj: {
        1000: "合作经营",
        2000: "固定租金",
        3000: "保底采购",
        4000: "业主自营",
      },
      searchCount: 0,// 搜索条件数量
      sortName: 1,// 1是营收金额 2是盈利金额
      sortType: 1,// 1是降序 2是升序
      sumObj: {},
      warningNameObj: {},// 预警类型名称对象
      warningDescObj: {},// 预警类型备注对象
      topTabList: [],// 顶部的tab选择列表
    }
  },
  onLoad() {
    let systemInfo = uni.getSystemInfoSync()
    this.menu = uni.getMenuButtonBoundingClientRect()
    let userInfo = uni.getStorageSync('vuex')
    userInfo = JSON.parse(userInfo)
    let useInfoObj = JSON.parse(JSON.stringify(userInfo))
    let serverList = useInfoObj.userData.serverPartList
    let serverPartId = ''
    console.log('useInfoObj', useInfoObj)
    if (serverList && serverList.length > 0) {
      serverList.forEach(item => {
        if (serverPartId) {
          serverPartId += `,${item.value}`
        } else {
          serverPartId = item.value
        }
      })
    }
    this.allServerPartId = serverPartId
    console.log('this.allServerPartId', this.allServerPartId)
    this.handleGetWarningType()
    this.handleGetWarningSum()

    this.handleGetPageData()
    this.handleGetSearchCount()
  },
  methods: {
    // 展示盈利具体是怎么算的
    handleShowDetail(obj) {
      console.log('obj', obj)
      let list = JSON.parse(JSON.stringify(this.dataList))
      console.log('list', list)
      list.forEach(item => {
        if (item.BUSINESSPROJECT_ID === obj.BUSINESSPROJECT_ID) {
          item.showDetail = true
        }
      })
      this.dataList = list
    },
    // 关闭盈利
    handleCloseDetail(obj) {
      console.log('obj', obj)
      let list = JSON.parse(JSON.stringify(this.dataList))
      console.log('list', list)
      list.forEach(item => {
        if (item.BUSINESSPROJECT_ID === obj.BUSINESSPROJECT_ID) {
          item.showDetail = false
        }
      })
      this.dataList = list
    },
    // 修改排序
    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)
    },
    async handleGetWarningType() {
      const req = {
        FieldexPlain_Field: 'WARNING_TYPE'
      }
      const data = await request.$webGet('/EShangApiMain/Dictionary/GetFieEnumList', req)
      let list = data.Result_Data.List

      console.log('list', list)
      let nameObj = {}
      let descObj = {}
      if (list && list.length > 0) {
        list.forEach(item => {
          nameObj[Number(item.FieldEnum_Value)] = item.FieldEnum_Name
          descObj[Number(item.FieldEnum_Value)] = item.FieldEnum_Desc
        })
      }
      this.warningNameObj = nameObj
      this.warningDescObj = descObj
    },
    // 查询条件有多少个
    handleGetSearchCount() {
      // 多少个查询条件
      let num = 0
      if (this.startDate || this.endDate) {
        num += 1
      }
      if (this.businessStatus > 0) {
        num += 1
      }
      if (this.businessType > 0) {
        num += 1
      }

      this.searchCount = num
    },
    handleSubmit() {
      this.handleGetSearchCount()
      this.showPop = false
      this.handleGetWarningSum()
      this.handleGetPageData()
    },
    // 切换tab
    handleChangeTab(e) {
      this.selectTab = e
      this.dataList = []
      this.handleGetPageData()
    },
    // 显示弹出框
    handleShowPopup() {
      this.showPop = true
    },
    // 隐藏弹出框
    hidePopup() {
      this.showPop = false
    },
    // 返回上一级
    handleBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    handleChangeBusinessStatus(e) {
      if (this.businessStatus === e) {
        this.businessStatus = 0
      } else {
        this.businessStatus = e
      }
    },
    handleChangeBusinessType(e) {
      if (this.businessType === e) {
        this.businessType = 0
      } else {
        this.businessType = e
      }
    },
    // 修改开始时间
    handleGetStartTime(e) {
      console.log('e', e)
      this.start = e.detail.value
      this.startDate = moment(e.detail.value).format('YYYY/MM')
    },
    // 修改结束时间
    handleGetEndTime(e) {
      this.endDate = moment(e.detail.value).format('YYYY/MM')
    },
    // 跳转详情
    handleGoDetail(obj) {
      this.$util.toNextRoute('navigateTo', `/pages/earlyWarning/projectWarningDetail?obj=${JSON.stringify(obj)}`)
    },
    // 请求页面数据
    async handleGetPageData() {
      uni.showLoading({
        title: '正在加载...'
      })
      const req = {
        ServerpartId: this.allServerPartId,
        Business_Type: this.businessType || '',
        // SettlementMode:'',
        BusinessState: this.businessStatus || '',
        WarningType: this.selectTab,
        solidType: true
      }
      const data = await request.$webGet('EShangApiMain/BusinessProject/GetAccountWarningList', req)
      this.dataList = this.handleSortList(data.Result_Data.List)
      console.log('this.dataList', this.dataList)
      uni.hideLoading()
    },
    // 拿到合计的方法
    async handleGetWarningSum() {
      const req = {
        ServerpartId: this.allServerPartId,
        Business_Type: this.businessType || '',
        // SettlementMode:'',
        BusinessState: this.businessStatus || '',
        WarningType: this.selectTab
      }
      const data = await request.$webGet('EShangApiMain/BusinessProject/GetAccountWarningListSummary', req)
      console.log('data2312312', data)
      let list = data.Result_Data.List
      this.topTabList = list
      let obj = {}
      if (list && list.length > 0) {
        list.forEach(item => {
          obj[item.pid] = item.value
        })
      }
      this.sumObj = obj
    },
    // 排序方法
    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].REVENUE_AMOUNT < list[j + 1].REVENUE_AMOUNT) { // 比较相邻元素大小并交换位置
                var temp = list[j];
                list[j] = list[j + 1];
                list[j + 1] = temp;
              }
            } else if (this.sortName === 2) {
              if (list[j].PROFIT_AMOUNT < list[j + 1].PROFIT_AMOUNT) { // 比较相邻元素大小并交换位置
                var temp = list[j];
                list[j] = list[j + 1];
                list[j + 1] = temp;
              }
            }
          } else {
            if (this.sortName === 1) {
              if (list[j].REVENUE_AMOUNT > list[j + 1].REVENUE_AMOUNT) { // 比较相邻元素大小并交换位置
                var temp = list[j];
                list[j] = list[j + 1];
                list[j + 1] = temp;
              }
            } else if (this.sortName === 2) {
              if (list[j].PROFIT_AMOUNT > list[j + 1].PROFIT_AMOUNT) { // 比较相邻元素大小并交换位置
                var temp = list[j];
                list[j] = list[j + 1];
                list[j + 1] = temp;
              }
            }
          }
        }
      }
      return list
    }
  }
}
</script>

<style scoped lang="scss">
.projectWarningBox {
  background: #F3F3F3;

  .earlyTop {
    width: 100%;
    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%;
        background: #FFFFFF;
        border-bottom-right-radius: 16rpx;
        border-bottom-left-radius: 16rpx;
        box-sizing: border-box;
        padding: 32rpx 32rpx 16rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .errorItem {
          width: 50%;
          display: flex;
          align-items: center;
          margin-bottom: 8rpx;
          box-sizing: border-box;
          padding: 12rpx;
          border-radius: 16rpx;

          .itemLeft {
            width: 88rpx;
            height: 88rpx;
            background: #ECF3FE;
            border-radius: 16rpx;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

            .itemLogo {
              width: 56rpx;
              height: 56rpx;
            }
          }

          .itemRight {
            margin-left: 16rpx;
            display: flex;
            flex-direction: column;

            .itemValue {
              font-family: DINAlternate, DINAlternate;
              font-weight: bold;
              font-size: 28rpx;
              color: #160002;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;
            }

            .itemLabel {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #160002;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }

        .selectErrorItem {
          background: #D9E9FF;
        }

        .messageBox {
          margin-top: 16rpx;
          background: #F8F8F8;
          border-radius: 16rpx;
          box-sizing: border-box;
          padding: 16rpx;
          width: 100%;

          .messageIcon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 8rpx;
          }

          .messageType {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #1979FE;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            padding: 4rpx 12rpx;
            background: #E3EFFF;
            border-radius: 4rpx;
            margin-right: 16rpx;
            white-space: nowrap;
          }

          .messageDesc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #F07604;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .servicepartContent {
    width: 100%;
    //height: calc(100vh - 616rpx);
    //margin-top: 24rpx;
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 24rpx 32rpx;

    .contentTitle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .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;
        }
      }

      .fixedRight {
        width: 138rpx;
        //height: 72rpx;
        background: #fff;
        box-sizing: border-box;
        //padding: 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;
        }
      }
    }

    .messageBox {
      margin-top: 16rpx;

      .messageIcon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 8rpx;
      }

      .messageType {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #1979FE;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        padding: 4rpx 12rpx;
        background: #E3EFFF;
        border-radius: 4rpx;
        margin-right: 16rpx;
        white-space: nowrap;
      }

      .messageDesc {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #F07604;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        white-space: nowrap;
      }
    }

    .selectBox {
      width: 100%;
      height: 72rpx;
      display: flex;
      align-items: center;
      margin-top: 28rpx;

      .scrollBox {
        //width: calc(100% - 140rpx);
        width: calc(100% - 32rpx);
        height: 72rpx;
        display: flex;
        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: 28rpx;
            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%;
      //height: calc(100% - 200rpx);
      margin-top: 24rpx;

      .listTitle {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #F1F1F1;
        padding-bottom: 16rpx;

        .titleName {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #786B6C;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .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: 24rpx;
          background: #F7F8FA;
          border-radius: 8rpx;
          box-sizing: border-box;
          padding: 24rpx;
          display: flex;
          align-items: flex-start;
          position: relative;
          margin-bottom: 24rpx;

          .bg {
            width: 144rpx;
            height: 144rpx;
            position: absolute;
            right: 0;
            bottom: 0;
          }

          .listItemLeft {
            .picBox {
              width: 96rpx;
              height: 96rpx;
              border-radius: 16rpx;
              margin-right: 16rpx;
              overflow: hidden;

              .shopLogo {
                width: 96rpx;
                height: 96rpx;
              }
            }

            .stateBox {
              margin-top: 40rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 96rpx;

              .stateIcon {
                width: 12rpx;
                height: 12rpx;
                border-radius: 50%;
                background: #ff4d4f;
                margin-right: 12rpx;
              }

              .stateText {
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #9A9A9A;
                line-height: 36rpx;
              }
            }
          }

          .listItemRight {
            width: calc(100% - 100rpx);

            .rightTop {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;

              .rightTopLeft {
                width: calc(100% - 32rpx);
                display: flex;
                align-items: center;

                .sortIcon {
                  width: 40rpx;
                  height: 40rpx;
                  margin-right: 12rpx;
                }

                .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;
                  margin-right: 12rpx;
                }

                .shopName {
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 40rpx;
                  display: inline-block;
                  width: 100%;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
              }

              .rightTopRight {
                .moreIcon {
                  width: 32rpx;
                  height: 32rpx;
                }
              }
            }

            .MERCHANTS_NAMEBox {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .MERCHANTS_NAME {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #571519;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
                padding: 4rpx 16rpx;
                background: #FCF1D3;
                border-radius: 4rpx;
                display: inline-block;
                max-width: 70%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }

              .type {
                max-width: 25%;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #1979FE;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                display: inline-block;
                padding: 2rpx 8rpx;
                background: #E3EFFF;
                border-radius: 4rpx;
              }
            }

            .rightBottom {
              margin-top: 12rpx;

              .type {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #1979FE;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                display: inline-block;
                padding: 2rpx 8rpx;
                background: #E3EFFF;
                border-radius: 4rpx;
              }

              .endTime {
                background: #FFEFEA;
                border-radius: 4rpx;
                padding: 2rpx 8rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #FF6531;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }
            }

            .rightBottomMoney {
              display: flex;
              align-items: center;
              margin-top: 32rpx;

              .moneyItem {
                display: flex;
                flex-direction: column;

                .value {
                  font-size: 28rpx;
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 32rpx;
                  margin-top: 8rpx;
                }

                .unit {
                  font-size: 24rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #9A9A9A;
                  line-height: 36rpx;
                }
              }

              .moneyDetailFixed {
                position: absolute;
                display: inline-block;
                background: #fff;
                padding: 12rpx;
                border-radius: 12rpx;
                bottom: 40rpx;
                right: 10%;
                width: 80vw;
                box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(231, 231, 231, 0.67);
              }
            }
          }
        }
      }
    }
  }

  .uniPopup {
    width: 100%;
    height: 976rpx;
    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;
        }

        .filterItem:nth-child(3) {
          margin-right: 0;
        }

        .selectFilterItem {
          color: #2363FF;
          background: #ECF2FF;
        }
      }

      .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>
