<template>
  <view class="main">
    <view class="meng" v-if="showNotice" @click="handleShowNotice"></view>

    <!-- 筛选卡片 -->
    <view class="filterCard">
      <view class="filterHeader">
        <view class="filterTitle">查询筛选</view>
        <view class="filterBtn" @click="handleSelect">
          <image class="filterIcon" src="/static/images/recons/select_icon.svg" />
          <text>筛选</text>
        </view>
      </view>

      <!-- 时间选择器 -->
      <view class="dateSelector">
        <view class="dateRange">
          <picker mode="date" @change="bindDateChange($event, 0)" :value="pageData.searchTime[0]"
            :end="pageData.endDate" start="2018-12-01" class="datePicker">
            <view class="dateInput">
              <text>{{ pageData.searchTime[0] }}</text>
              <text class="uni-icon uni-icon-arrowdown"></text>
            </view>
          </picker>

          <view class="dateSeparator">至</view>

          <picker mode="date" @change="bindDateChange($event, 1)" :value="pageData.searchTime[1]"
            :end="pageData.endDate" start="2018-12-01" class="datePicker">
            <view class="dateInput">
              <text>{{ pageData.searchTime[1] }}</text>
              <text class="uni-icon uni-icon-arrowdown"></text>
            </view>
          </picker>
        </view>
      </view>
    </view>
    <!-- BusinessType【经营模式】  SettlementMode【结算模式】 -->
    <!--      <view class="searchBox">-->
    <!--        <view class="searchItem">-->
    <!--          <span class="searchLabel">经营模式</span>-->
    <!--          <picker mode="selector" :range="BusinessTypeList" :value="BusinessTypeIndex" range-key="label">-->
    <!--            {{BusinessTypeList[BusinessTypeIndex].label}}-->
    <!--          </picker>-->
    <!--        </view>-->
    <!--        <view class="searchItem">-->
    <!--          <span class="searchLabel">结算模式</span>-->
    <!--          <picker mode="selector" :range="SettlementModeList" :value="SettlementModeIndex" range-key="label">-->
    <!--            {{SettlementModeList[SettlementModeIndex].label}}-->
    <!--          </picker>-->
    <!--        </view>-->
    <!--      </view>-->
    </div>
    <template v-if="!pageData.isLoading && pageData.msg && pageData.msg.Total_Revenue">
      <!-- 实收总额卡片 -->
      <view class="revenueCard">
        <view class="revenueHeader">
          <view class="revenueTitle">实收总额</view>
          <view class="revenueAmount">¥{{ $util.fmoney(pageData.msg.Total_Revenue, 2) }}</view>
        </view>

        <view class="revenueDetails">
          <view class="detailGrid">
            <view class="detailItem">
              <view class="itemValue">{{ $util.fmoney(pageData.msg.Different_Price_More, 2) }}</view>
              <view class="itemLabel">长款金额<text class="unit">/元</text></view>
            </view>
            <view class="detailItem">
              <view class="itemValue">{{ $util.fmoney(pageData.msg.Different_Price_Less, 2) }}</view>
              <view class="itemLabel">短款金额<text class="unit">/元</text></view>
            </view>
            <view class="detailItem">
              <view class="itemValue">{{ $util.fmoney(pageData.msg.TotalOffAmount, 2) }}</view>
              <view class="itemLabel">优惠金额<text class="unit">/元</text></view>
            </view>
            <view class="detailItem">
              <view class="itemValue">{{ $util.noDecimal(pageData.msg.TicketCount) }}</view>
              <view class="itemLabel">客单数量<text class="unit">/笔</text></view>
            </view>
            <view class="detailItem">
              <view class="itemValue">{{ $util.fmoney(pageData.msg.TotalCount, 2) }}</view>
              <view class="itemLabel">商品出售<text class="unit">/件</text></view>
            </view>
            <view class="detailItem">
              <view class="itemValue">{{ $util.fmoney(pageData.msg.countave, 2) }}</view>
              <view class="itemLabel">商品均价<text class="unit">/元</text></view>
            </view>
          </view>
        </view>
      </view>
      <!-- 经营报表标题 -->
      <view class="reportHeader">
        <view class="reportTitle">
          <image class="reportIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/revenue/yestoday-region.png" />
          <text>经营报表</text>
        </view>

        <view class="reportInfo"
          v-if="pageData.msg && (pageData.msg.SearchResult || BusinessTypeValue !== 0 || SettlementModeValue !== 0)">
          <view v-if="showModal" class="reportText">
            <text v-if="copySearchText && (BusinessTypeValue || SettlementModeValue)" class="warningText">
              温馨提示：模糊查询不支持选择经营方法/结算方式
            </text>
            <text v-if="pageData.msg.SearchResult && pageData.msg.SearchResult[0]" class="searchResult">{{
              pageData.msg.SearchResult[0] }}</text>
            <text v-if="BusinessTypeValue !== 0" class="filterMode">
              经营模式: {{ getBusinessTypeLabel(BusinessTypeValue) }}
            </text>
            <text v-if="SettlementModeValue !== 0" class="filterMode">
              结算模式: {{ getSettlementModeLabel(SettlementModeValue) }}
            </text>
          </view>
          <view v-else class="reportText">
            <text v-if="copySearchText && (BusinessTypeValue || SettlementModeValue)" class="warningText">
              温馨提示：模糊查询不支持选择经营方法/结算方式
            </text>
            <view v-for="(item, index) in pageData.msg.SearchResult" :key="index" class="searchResultItem">
              <text v-for="(subItem, subIndex) in item" :key="subIndex" class="searchResultText">
                <text class="highlightText" v-if="item.length > 1 && subItem.indexOf('：') === -1">
                  {{ copySearchText }}
                </text>
                {{ subItem }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <!-- 区域数据卡片 -->
      <view class="regionCard" v-if="ServerpartList.length > 0">
        <!-- 省内区域 -->
        <view class="regionSection">
          <view class="regionTitle" :class="{ 'active': pageData.insideShow }"
            @click="pageData.insideShow = !pageData.insideShow">
            <view class="titleText">全部片区</view>
            <view class="expandIcon" :class="{ 'expanded': pageData.insideShow }">
              <text class="uni-icon uni-icon-arrowdown"></text>
            </view>
          </view>

          <view v-show="pageData.insideShow" class="regionList">
            <view v-for="(item, i) in ServerpartList" :key="i" class="regionItem">
              <view class="regionHeader" @click="toggleRegion(item)">
                <view class="regionInfo">
                  <view class="regionName">{{ item.Region_Name }}</view>
                  <view class="regionRevenue">¥{{ $util.fmoney(item.Total_Revenue, 2) }}</view>
                </view>
                <view class="regionStats">
                  <view class="statLabel">营收占比</view>
                  <view class="statValue">{{ item.Revenue_Proportion }}</view>
                </view>
                <view class="expandBtn" :class="{ 'active': item.show }">
                  <text class="uni-icon uni-icon-arrowright"></text>
                </view>
              </view>

              <view class="serverList" v-show="item.show">
                <view v-for="(child, index) in item.revenueServerModels" :key="index" class="serverItem"
                  :class="{ 'visited': child.visited }" @tap="toDetail(child)">
                  <view class="serverInfo">
                    <view class="serverName">{{ child.Serverpart_Name }}</view>
                    <view class="serverStats">
                      <text class="serverProportion">{{ child.Revenue_Proportion }}</text>
                      <text class="serverRevenue">¥{{ $util.fmoney(child.Total_Revenue, 2) }}</text>
                    </view>
                  </view>
                  <view class="serverArrow">
                    <text class="uni-icon uni-icon-arrowright"></text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 省外区域 -->
        <template v-if="insideRegionList.length > 0">
          <view class="regionSection">
            <view class="regionTitle" :class="{ 'active': pageData.exsideShow }"
              @click="pageData.exsideShow = !pageData.exsideShow">
              <view class="titleText">省外区域</view>
              <view class="expandIcon" :class="{ 'expanded': pageData.exsideShow }">
                <text class="uni-icon uni-icon-arrowdown"></text>
              </view>
            </view>

            <view v-show="pageData.exsideShow" class="regionList">
              <view v-for="(item, i) in insideRegionList" :key="i" class="regionItem">
                <view class="regionHeader" @click="toggleRegion(item)">
                  <view class="regionInfo">
                    <view class="regionName">{{ item.Region_Name }}</view>
                    <view class="regionRevenue">¥{{ $util.fmoney(item.Total_Revenue, 2) }}</view>
                  </view>
                  <view class="regionStats">
                    <view class="statLabel">营收占比</view>
                    <view class="statValue">{{ item.Revenue_Proportion }}</view>
                  </view>
                  <view class="expandBtn" :class="{ 'active': item.show }">
                    <text class="uni-icon uni-icon-arrowright"></text>
                  </view>
                </view>

                <view class="serverList" v-show="item.show">
                  <view v-for="(child, index) in item.revenueServerModels" :key="index" class="serverItem"
                    :class="{ 'visited': child.visited }" @click="toDetail(child)">
                    <view class="serverDot"></view>
                    <view class="serverInfo">
                      <view class="serverName">{{ child.Serverpart_Name }}</view>
                      <view class="serverStats">
                        <text class="serverProportion">{{ child.Revenue_Proportion }}</text>
                        <text class="serverRevenue">¥{{ $util.fmoney(child.Total_Revenue, 2) }}</text>
                      </view>
                    </view>
                    <view class="serverArrow">
                      <text class="uni-icon uni-icon-arrowright"></text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>

      </view>
    </template>
    <view class="" v-else-if="!pageData.isLoading && !pageData.msg">
      <noFound nodata=" true" :text="noDataText" />
    </view>


    <uni-popup ref="popup" type="bottom" background-color="#fff" :safe-area="false">
      <div class="popupBox">
        <!--        <div style="display: flex;align-items: center;justify-content: space-between">-->
        <!--          <text class="title">查询配置</text>-->
        <!--          <img src="/static/images/recons/delete.svg" alt="" class="delete" @click="handleClosePopup">-->
        <!--        </div>-->
        <div class="popupContent">
          <div class="search_box">
            <img src="/static/images/recons/search_icon.svg" alt="" class="search_icon">
            <input v-model="searchText" confirm-type="search" @confirm="getList" placeholder="可以查询门店/服务区/品牌/商家等信息"
              class="select_input" clear />
            <img src="/static/images/recons/delete.svg" alt="" class="delete" @click="handleDelete">
          </div>

          <view class="scrollContent">
            <view class="popupTitle">日期选择</view>
            <view class="timeList">
              <view :class="selectTime === item.value ? 'timeItem timeSelectItem' : 'timeItem'"
                v-for="(item, index) in timeTypeList" :key="index" @click="handleChangeTime(item.value)">{{ item.label
                }}
              </view>
            </view>
            <view class="timeList">
              <view :class="selectTimeOther ? 'timeItem timeSelectItem' : 'timeItem'" @click="handleTimeOther">自定义
              </view>
            </view>

            <view class="popupTitle">业态类型</view>
            <view class="timeList">
              <view :class="BusinessTrade === item.value ? 'timeItem timeSelectItem' : 'timeItem'"
                v-for="(item, index) in tradeList" :key="index" @click="handleChangeTrade(item.value, index)">
                {{ item.label }}
              </view>
            </view>
            <view class="timeList"
              v-if="bigTradeIndex >= 0 && tradeList[bigTradeIndex] && tradeList[bigTradeIndex].children && tradeList[bigTradeIndex].children.length > 0">
              <view :class="BusinessSmallTrade.indexOf(item.value) !== -1 ? 'timeItem timeSelectItem' : 'timeItem'"
                v-for="(item, index) in tradeList[bigTradeIndex].children" :key="index"
                @click="handleChangeSmallTrade(item.value)">{{ item.label }}</view>
            </view>

            <view class="popupTitle">经营模式</view>
            <view class="timeList">
              <view :class="BusinessTypeValue === item.value ? 'timeItem timeSelectItem' : 'timeItem'"
                v-for="(item, index) in BusinessTypeList" :key="index" @click="handleChangeBusiness(item.value)">
                {{ item.label }}</view>
            </view>
            <view class="popupTitle" style="display: flex;position: relative;align-items: center">
              <span class="title">结算模式</span>
              <view class="notice" @click="handleShowNotice">?
                <view class="noticeBox" v-if="showNotice" :style="{ left: '10%', top: '20px' }">
                  <span class="noticeText">营收回款：经营模式为商家收款，商家按月/季度/半年/年度模式返款给驿达</span>
                  <span class="noticeText">资金返款：经营模式为驿达收款，驿达按月/季度/半年/年度模式打款给商家</span>
                  <span class="noticeText">营收分润：经营模式为单个业态使用“移动支付分账”模式，移动支付交易按照七三分成的模式，营收达到保底后按照合同约定的提成比例进行分成</span>
                  <span class="noticeText">组合分润：经营模式为多个业态使用“移动支付分账”模式，移动支付交易按照七三分成的模式，营收达到保底后按照合同约定的提成比例进行分成</span>
                  <span class="noticeText">阶段提成：经营模式为合作分成，根据营业额的高低，提成比例会进行阶段性的变化</span>
                </view>
              </view>
            </view>

            <view class="timeList">
              <view :class="SettlementModeValue === item.value ? 'timeItem timeSelectItem' : 'timeItem'"
                v-for="(item, index) in SettlementModeList" :key="index" @click="handleChangeSettlement(item.value)">
                {{ item.label }}</view>
            </view>
          </view>
        </div>
        <div class="btn" @click="handleConfirmCheckChange">确认</div>
      </div>
    </uni-popup>
    <uni-popup ref="timePopup" type="center" style="background: #fff">
      <div class="timePopup">
        <div style="display: flex;margin-left: 10%">
          <picker mode="date" @change="handleChangeTimePopup($event, 0)" :value="searchTimePopup[0]"
            :end="pageData.endDate" start="2018-12-01" class="screen-unit">
            <text style="font-size: 32rpx">{{ searchTimePopup[0] }}</text>
            <text class="uni-icon uni-icon-arrowdown"></text>
          </picker>
          <text class="mr20">至</text>
          <picker mode="date" @change="handleChangeTimePopup($event, 0)" :value="searchTimePopup[1]"
            :end="pageData.endDate" start="2018-12-01" class="screen-unit">
            <text style="font-size: 32rpx">{{ searchTimePopup[1] }}</text>
            <text class="uni-icon uni-icon-arrowdown"></text>
          </picker>
        </div>
        <div class="btn" @click="handleTimePopup">确认</div>
      </div>
    </uni-popup>
  </view>

</template>

<script>
import { mapState } from 'vuex'
import request from '@/util/index.js'
import { wrapTreeNode } from "../../util/dateTime";
import moment from "moment";
export default {
  data() {
    let now = new Date()
    let nowTime = this.$util.cutDate(now, 'YYYY-MM-DD', -1)
    let sTime = this.$util.cutDate(now, 'YYYY-MM-DD', -1)
    return {
      pageData: {
        endDate: nowTime,
        searchTime: [sTime, nowTime],
        msg: {},
        isLoading: true,
        exsideShow: true,
        insideShow: true,
      },
      noDataText: '抱歉，没有数据，请稍后重试',
      regionType: 0, // 0 东南 1 西北
      ServerpartList: [],
      insideRegionList: [], // 省外
      queryTime: '',// 传入的时间
      lastDay: '',// 首页的实际时间
      searchText: '',// 搜索框内容
      copySearchText: '',// 搜索框内容复制
      requestText: '',// 已经请求过接口的查询框内容
      isScreen: false,// 显示popup里面的内容
      checkBoxValue: ['MerchantName', 'Brand', 'Shop', 'Serverpart'],// 查询的字段放接口里的
      checkChange: ['MerchantName', 'Brand', 'Shop', 'Serverpart'],// checkBox里面选择了 但是没点确定的
      BusinessTypeList: [],// 经营模式列表
      BusinessTypeValue: 0,// 经营模式的选择项
      BusinessTrade: 0,//选择的业态类型
      BusinessSmallTrade: [],// 小类业态
      bigTradeIndex: null,// 大类的第几项
      tradeList: [],//业态类型数据
      SettlementModeList: [],// 结算模式列表
      SettlementModeValue: 0,// 结算模式的选择项
      timeTypeList: [{ label: '近1周', value: 1 }, { label: '近1月', value: 2 }, { label: '近3月', value: 3 }, { label: '近半年', value: 4 }],
      selectTime: 0,
      selectTimeOther: false,
      timePopup: false,
      searchTimePopup: [null, null],
      showNotice: false,
      showModal: false,// 显示模式
      selectTradeId: '',//选择的业态
    }
  },
  computed: {
    ...mapState({ 'ProvinceCode': (state) => { return state.userData.ProvinceCode } }),
  },
  methods: {
    // 获取经营模式标签
    getBusinessTypeLabel(value) {
      const item = this.BusinessTypeList.find(item => item.value === value)
      return item ? item.label : ''
    },
    // 获取结算模式标签  
    getSettlementModeLabel(value) {
      const item = this.SettlementModeList.find(item => item.value === value)
      return item ? item.label : ''
    },
    // 是否显示结算模式的悬浮框
    handleShowNotice() {
      this.showNotice = !this.showNotice
    },
    // 自定义时间选框里面的选择 改变悬浮框的自定义时间 外面页面上的时间也要跟着改变 强刷
    handleChangeTimePopup(e, index) {
      this.searchTimePopup[index] = e.detail.value
      this.$forceUpdate()
    },
    // 自定义时间选框的确定 赋值给页面上的时间
    handleTimePopup() {
      this.pageData.searchTime = this.searchTimePopup
      this.$refs.timePopup.close()
    },
    // 经营模式和结算模式只能二选一 选了一个另一个就取消
    // 选择了结算模式
    handleChangeSettlement(value) {
      if (this.BusinessTypeValue !== 0) {
        this.BusinessTypeValue = 0
      }
      this.SettlementModeValue = value
    },
    // 选择了经营模式
    handleChangeBusiness(value) {
      if (this.SettlementModeValue !== 0) {
        this.SettlementModeValue = 0
      }
      this.BusinessTypeValue = value
    },
    // 改变小类业态
    handleChangeSmallTrade(value) {
      if (this.BusinessSmallTrade.indexOf(Number(value)) === -1) {
        this.BusinessSmallTrade.push(Number(value))
      } else {
        let list = []
        this.BusinessSmallTrade.forEach(item => {
          if (Number(value) === item) {

          } else {
            list.push(item)
          }
        })
        this.BusinessSmallTrade = list
      }

    },
    // 选择业态类型
    handleChangeTrade(value, index) {
      if (this.BusinessTrade === value) {
        this.BusinessTrade = 0
        this.BusinessSmallTrade = []
        this.bigTradeIndex = null
      } else {
        this.BusinessTrade = value
        this.BusinessSmallTrade = []
        this.bigTradeIndex = index
      }
    },
    // 给悬浮框的自定义时间赋初始值
    // 选择了自定义时间
    handleTimeOther() {
      this.searchTimePopup = JSON.parse(JSON.stringify(this.pageData.searchTime))
      this.$refs.timePopup.open()
      this.selectTimeOther = true
      this.selectTime = 0
    },
    // 改变选择的时间
    // 选择的时间类型 moment 拿到时间
    handleChangeTime(value) {
      this.selectTimeOther = false
      this.selectTime = value
      let endTime
      let startTime
      let searchTime
      if (this.selectTime === 1) {
        endTime = moment().subtract(1, 'day').format('YYYY-MM-DD')
        startTime = moment().subtract(7, 'day').format('YYYY-MM-DD')
        searchTime = [startTime, endTime]
      } else if (this.selectTime === 2) {
        endTime = moment().subtract(1, 'day').format('YYYY-MM-DD')
        startTime = moment().subtract(30, 'day').format('YYYY-MM-DD')
        searchTime = [startTime, endTime]
      } else if (this.selectTime === 3) {
        endTime = moment().subtract(1, 'day').format('YYYY-MM-DD')
        startTime = moment().subtract(90, 'day').format('YYYY-MM-DD')
        searchTime = [startTime, endTime]
      } else if (this.selectTime === 4) {
        endTime = moment().subtract(1, 'day').format('YYYY-MM-DD')
        startTime = moment().subtract(180, 'day').format('YYYY-MM-DD')
        searchTime = [startTime, endTime]
      }
      this.pageData.searchTime = searchTime
    },
    // 拿到枚举的方法
    async handleEnumeration(text) {
      const req = {
        FieldExplainField: text,
        sessionName: text,
        FieldEnumStatus: true
      }
      const data = await request.$webGet('EShangApiMain/FrameWork/GetFieldEnumTree', req)
      // 变成label、value的数据格式
      let list = wrapTreeNode(data.Result_Data.List)
      return list
    },
    handleConfirmCheckChange() {
      // 老的选类型的方法  暂时不让他改 已经写死
      this.checkBoxValue = this.checkChange
      // 关闭悬浮框
      this.$refs.popup.close()
      // 没用的东西
      this.isScreen = false
      // 请求数据的方法
      this.getList()
    },
    // 查询配置的关闭方法 暂时隐藏不用
    handleClosePopup() {
      this.checkChange = this.checkBoxValue
      this.$refs.popup.close()
      this.isScreen = false
      this.BusinessTypeValue = 0
      this.SettlementModeValue = 0
      this.selectTime = 0
      // this.getList()
    },
    // 删除查询字段
    handleDelete() {
      this.searchText = ''
    },
    // 更多筛选的点击打开悬浮框
    handleSelect() {
      this.$refs.popup.open()
      this.isScreen = true
    },
    // 老的一个跳转方法 暂时用不到
    toTrend() {
      this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/operatingTrend?time=' + this.pageData.searchTime[1])
    },
    // 改变时间的方法
    bindDateChange(e, index) {
      let nowDate = this.pageData.searchTime[index]
      if (e.detail.value != nowDate) {
        this.pageData.searchTime[index] = e.detail.value
        this.$forceUpdate()
        this.searchList()
      }
    },
    // 套一层方法 可以进行其他操作 只有有其他操作的 业务更改之后就没了 暂时保留
    searchList() {
      this.getList()
    },
    // 老方法 显示具体条目
    toggleRegion(item) {
      item.show = !item.show ? true : false
      this.$forceUpdate()
    },
    // 跳转详情带上参数
    toDetail(item) {
      this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/detail?pcode=' + item.Province_Code + '&id=' +
        item.Serverpart_Id + '&st=' + this.pageData.searchTime[0] + '&et=' + this.pageData.searchTime[1] +
        '&searchKey=' + JSON.parse(JSON.stringify(this.checkBoxValue)) + '&searchValue=' + this.requestText +
        '&BusinessTypeValue=' + this.BusinessTypeValue + '&SettlementModeValue=' + this.SettlementModeValue + '&BusinessTrade=' + this.selectTradeId
      )
      item.visited = true
      this.$forceUpdate()
    },
    // 页面请求的主要方法
    getList() {
      console.log('this.BusinessSmallTrade', this.BusinessSmallTrade)
      // copySearchText 是要显示在经营报表下方的红色字 每次请求前要清空 不能和searchText同源 不然清空搜索框 显示的文字也会消失
      this.copySearchText = ''
      uni.showLoading({
        title: '正在加载',
        mask: true
      })
      let _this = this
      let searchTime = this.pageData.searchTime
      // 接口要的查询字段类型 之前是可选的 用这样的方法写 暂时可以保留 不影响
      let searchName = ''
      this.checkBoxValue.forEach(item => {
        if (searchName) {
          searchName += `,${item}`
        } else {
          searchName = item
        }
      })
      let req;


      console.log('BusinessSmallTrade', this.BusinessSmallTrade)
      console.log('BusinessTrade', this.BusinessTrade)
      console.log('tradeList', this.tradeList)
      let tradeId = ''
      if (this.BusinessSmallTrade && this.BusinessSmallTrade.length > 0) {
        tradeId = this.BusinessSmallTrade.toString()
      } else if (this.BusinessTrade) {
        let list = []
        this.tradeList.forEach(item => {
          if (Number(item.value) === Number(this.BusinessTrade)) {
            if (item.children && item.children.length > 0) {
              item.children.forEach(subItem => {
                list.push(Number(subItem.value))
              })
            }
          }
        })
        if (list && list.length > 0) {
          tradeId = list.toString()
        }
      }
      console.log('tradeId', tradeId)
      this.selectTradeId = tradeId
      req = {
        startTime: searchTime[0],
        endTime: searchTime[1],
        SearchKeyName: searchName,
        SearchKeyValue: this.searchText,
        BusinessTrade: tradeId,
        BusinessType: this.searchText ? '' : this.BusinessTypeValue ? this.BusinessTypeValue : '',
        SettlementMode: this.searchText ? '' : this.SettlementModeValue ? this.SettlementModeValue : '',
      }
      // _this.$request.$webGet('WeChat/GetRevenueReport',{
      request.$webGet('CommercialApi/Revenue/GetRevenueReport', req).then(res => {
        // 拿到数据之后的一些处理方法 看看就明白了
        if (res.Result_Code == 100) {
          _this.pageData.msg = res.Result_Data
          _this.pageData.msg.countave = (Number(_this.pageData.msg.Province_InsideAmount) / Number(_this.pageData.msg.TotalCount)).toFixed(2)
          res.Result_Data.revenueRegionModels.map(n => {
            n.show = false
          })
          if (res.Result_Data.revenueInsideRegionModels) {
            res.Result_Data.revenueInsideRegionModels.map(n => {
              n.show = false
            })
            _this.insideRegionList = res.Result_Data.revenueInsideRegionModels
          }

          // _this.pageData.msg.SearchResult
          // 判断一下 如果是有搜索框的值 就按照搜索框有的值显示
          // 没有就出现结算模式 或者经营模式
          if (this.searchText) {
            this.showModal = false
            if (res.Result_Data.SearchResult) {
              let newList = []
              res.Result_Data.SearchResult.forEach(item => {
                newList.push(item.split(this.searchText))
                _this.pageData.msg.SearchResult = newList
                _this.copySearchText = JSON.parse(JSON.stringify(this.searchText))
              })
            }
          } else {
            if (this.BusinessTypeValue || this.SettlementModeValue) {
              this.showModal = true
            }
          }
          _this.ServerpartList = res.Result_Data.revenueRegionModels
        } else if (res.Result_Code == 200 || res.Result_Code == 999) {
          _this.noDataText = '暂无数据'
          _this.insideRegionList = []
          _this.pageData.msg = null
        } else {
          _this.pageData.msg = null
          _this.noDataText = res.Result_Desc
          _this.insideRegionList = []
        }
        _this.requestText = _this.searchText

        uni.hideLoading()
        _this.pageData.isLoading = false
        _this.$forceUpdate()
      })
    },

    // 拿业态枚举
    async handleGetTradeList() {
      const data = await request.$webGet('EShangApiMain/BaseInfo/GetBusinessTradeTree', {})
      const treeTable = wrapTreeNode(data.Result_Data.List);
      console.log('treeTable', treeTable)
      let list = []
      if (treeTable && treeTable.length > 0) {
        treeTable.forEach(item => {
          let children = []
          if (item.children && item.children.length > 0) {
            item.children.forEach(subItem => {
              children.push({
                label: subItem.AUTOSTATISTICS_NAME,
                value: subItem.AUTOSTATISTICS_ID
              })
            })
          }
          list.push({
            label: item.AUTOSTATISTICS_NAME,
            value: item.AUTOSTATISTICS_ID,
            children: children
          })
        })
      }
      this.tradeList = list
    }
  },
  async onLoad(query) {
    console.log('queryqueryquery', query);

    // 拿时间和拿传入的数据
    this.lastDay = uni.getStorageSync('lastDay')
    if (query.time) {
      this.queryTime = query.time
      const date = new Date(this.queryTime)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      const realDate = new Date(this.lastDay)
      let realMonth = realDate.getMonth() + 1
      if (m < realMonth) {
        if (m < 10) {
          m = '0' + m
        }
        let day = this.$util.getThisMonthDay(`${y}-${m}`)
        let time = [`${y}-${m}-01`, `${y}-${m}-${day}`]
        this.pageData.searchTime = time
      } else {
        if (m < 10) {
          m = '0' + m
        }
        let d = realDate.getDate()
        if (d < 10) {
          d = '0' + d
        }
        let time = [`${y}-${m}-01`, `${y}-${m}-${d}`]
        this.pageData.searchTime = time
      }
    }
    // 用枚举方法拿到枚举数组
    this.BusinessTypeList = await this.handleEnumeration('BUSINESS_TYPE')
    this.SettlementModeList = await this.handleEnumeration('SETTLEMENT_MODES')
    await this.handleGetTradeList()

    // 调用接口拿到页面数据的方法
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
// 使用项目全局颜色变量
$bg: #f8f9fa;
$muted: #666;
$card: #fff;
$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
$primary: #27B25F;
$primary2: #4CCC7F;
$success: #2ed573;
$warning: #ff9f43;
$danger: #ff4757;
$info: #3742fa;

.main {
  width: 100vw;
  min-height: 100vh;
  background-color: $bg;
  padding: 32rpx;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

// 遮罩层
.meng {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.5);
}

// 筛选卡片
.filterCard {
  background: $card;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 32rpx;
  box-shadow: $shadow;

  .filterHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;

    .filterTitle {
      font-size: 28rpx;
      font-weight: 600;
      color: #160002;
    }

    .filterBtn {
      display: flex;
      align-items: center;
      padding: 12rpx 24rpx;
      background: transparent;
      border: 1rpx solid $primary;
      border-radius: 24rpx;

      .filterIcon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
        filter: brightness(0) saturate(100%) invert(45%) sepia(67%) saturate(1055%) hue-rotate(113deg) brightness(96%) contrast(86%);
      }

      text {
        font-size: 24rpx;
        font-weight: 400;
        color: $primary;
      }
    }
  }

  .dateSelector {
    .dateRange {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .datePicker {
        flex: 1;

        .dateInput {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 16rpx 24rpx;
          background: #f8f8f8;
          border-radius: 12rpx;

          text:first-child {
            font-size: 24rpx;
            font-weight: 400;
            color: #160002;
          }

          .uni-icon-arrowdown {
            font-size: 20rpx;
            color: $muted;
            margin-left: 8rpx;
          }
        }
      }

      .dateSeparator {
        margin: 0 24rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: $muted;
      }
    }
  }
}

// 实收总额卡片
.revenueCard {
  background: linear-gradient(to left, #93a4ec 0%, #4b76e9 100%);
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  box-shadow: $shadow;

  .revenueHeader {
    text-align: center;
    margin-bottom: 24rpx;

    .revenueTitle {
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 12rpx;
    }

    .revenueAmount {
      font-size: 36rpx;
      font-weight: 600;
      color: #fff;
      font-family: 'DIN Alternate', 'Arial', sans-serif;
    }
  }

  .revenueDetails {
    .detailGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24rpx;

      .detailItem {
        text-align: center;

        .itemValue {
          font-size: 28rpx;
          font-weight: 600;
          color: #fff;
          margin-bottom: 8rpx;
          font-family: 'DIN Alternate', 'Arial', sans-serif;
        }

        .itemLabel {
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);

          .unit {
            font-size: 20rpx;
          }
        }
      }
    }
  }
}

// 经营报表标题
.reportHeader {
  margin-bottom: 32rpx;

  .reportTitle {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .reportIcon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 12rpx;
    }

    text {
      font-size: 28rpx;
      font-weight: 600;
      color: #160002;
    }
  }

  .reportInfo {
    padding-left: 44rpx;

    .reportText {
      .warningText {
        display: block;
        font-size: 22rpx;
        font-weight: 400;
        color: $danger;
        margin-bottom: 8rpx;
      }

      .searchResult {
        font-size: 24rpx;
        font-weight: 400;
        color: $muted;
        line-height: 1.5;
      }

      .filterMode {
        display: block;
        font-size: 22rpx;
        font-weight: 400;
        color: $muted;
        margin-top: 4rpx;
      }

      .searchResultItem {
        margin-bottom: 8rpx;

        .searchResultText {
          font-size: 24rpx;
          font-weight: 400;
          color: $muted;

          .highlightText {
            color: $danger;
            font-weight: 600;
          }
        }
      }
    }
  }
}

// 区域数据卡片
.regionCard {
  background: $card;
  border-radius: 16rpx;
  box-shadow: $shadow;
  overflow: hidden;

  .regionSection {
    .regionTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx;
      background: #fafafa;
      border-bottom: 1rpx solid #f0f0f0;

      .titleText {
        font-size: 26rpx;
        font-weight: 600;
        color: #160002;
      }

      .expandIcon {
        transition: transform 0.3s ease;

        &.expanded {
          transform: rotate(180deg);
        }

        .uni-icon-arrowdown {
          font-size: 24rpx;
          color: $muted;
        }
      }
    }

    .regionList {
      .regionItem {
        border-bottom: 1rpx solid #f8f8f8;

        &:last-child {
          border-bottom: none;
        }

        .regionHeader {
          display: flex;
          align-items: center;
          padding: 24rpx;
          background: $card;

          .regionInfo {
            flex: 2;

            .regionName {
              font-size: 24rpx;
              font-weight: 600;
              color: #160002;
              margin-bottom: 8rpx;
            }

            .regionRevenue {
              font-size: 28rpx;
              font-weight: 600;
              color: $primary;
              font-family: 'DIN Alternate', 'Arial', sans-serif;
            }
          }

          .regionStats {
            flex: 1;
            text-align: center;

            .statLabel {
              font-size: 22rpx;
              font-weight: 400;
              color: $muted;
              margin-bottom: 8rpx;
            }

            .statValue {
              font-size: 24rpx;
              font-weight: 600;
              color: #160002;
            }
          }

          .expandBtn {
            flex: 0 0 64rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s ease;

            &.active {
              transform: rotate(90deg);
            }

            .uni-icon-arrowright {
              font-size: 24rpx;
              color: $muted;
            }
          }
        }

        .serverList {
          background: #fafafa;

          .serverItem {
            display: flex;
            align-items: center;
            padding: 24rpx 32rpx;
            border-bottom: 1rpx solid #f0f0f0;
            transition: background-color 0.2s ease;

            &:last-child {
              border-bottom: none;
            }

            &.visited {
              .serverName {
                color: $primary;
              }
            }

            .serverDot {
              width: 8rpx;
              height: 8rpx;
              border-radius: 50%;
              background: $primary;
              margin-right: 16rpx;
              flex-shrink: 0;
            }

            .serverInfo {
              flex: 1;

              .serverName {
                font-size: 24rpx;
                font-weight: 400;
                color: #160002;
                margin-bottom: 8rpx;
              }

              .serverStats {
                display: flex;
                align-items: center;

                .serverProportion {
                  font-size: 22rpx;
                  font-weight: 400;
                  color: $muted;
                  margin-right: 16rpx;
                }

                .serverRevenue {
                  font-size: 24rpx;
                  font-weight: 600;
                  color: $primary;
                  font-family: 'DIN Alternate', 'Arial', sans-serif;
                }
              }
            }

            .serverArrow {
              .uni-icon-arrowright {
                font-size: 20rpx;
                color: $muted;
              }
            }
          }
        }
      }
    }
  }
}

// 搜索框样式（弹窗内使用）
.search_box {
  position: relative;
  width: 100%;
  height: 72rpx;
  background: #F2F4F5;
  display: flex;
  align-items: center;
  border-radius: 36rpx;
  padding: 0 24rpx;
  box-sizing: border-box;

  img {
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
    flex-shrink: 0;
  }

  .select_input {
    flex: 1;
    border: none;
    height: 40rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #160002;
    background: transparent;
  }

  .delete {
    width: 32rpx;
    height: 32rpx;
    flex-shrink: 0;
  }
}

// 已在 filterCard 中重新定义

// 弹窗样式
.popupBox {
  width: 100%;
  height: 70vh;
  background: $card;
  box-sizing: border-box;
  padding: 32rpx;
  position: relative;
  border-radius: 24rpx 24rpx 0 0;
  display: flex;
  flex-direction: column;

  .popupContent {
    flex: 1;
    margin-top: 24rpx;
    overflow: hidden;

    .scrollContent {
      height: calc(100% - 72rpx);
      overflow-y: auto;
      padding-bottom: 24rpx;
    }

    .popupTitle {
      font-size: 28rpx;
      font-weight: 600;
      color: #160002;
      margin: 32rpx 0 16rpx;

      .title {
        font-size: 28rpx;
        font-weight: 600;
        color: #160002;
      }

      .notice {
        margin-left: 12rpx;
        width: 24rpx;
        height: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2rpx solid $muted;
        border-radius: 50%;
        color: $muted;
        font-size: 20rpx;
        font-weight: 500;

        .noticeBox {
          max-width: 500rpx;
          position: absolute;
          top: 40rpx;
          left: 0;
          display: inline-block;
          padding: 16rpx 20rpx;
          background: $card;
          border-radius: 12rpx;
          box-shadow: $shadow;
          z-index: 100;

          .noticeText {
            display: block;
            font-size: 22rpx;
            font-weight: 400;
            color: #160002;
            line-height: 1.5;
            margin-bottom: 8rpx;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }

    .timeList {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;
      margin-bottom: 24rpx;

      .timeItem {
        flex: 0 0 calc(25% - 12rpx);
        padding: 16rpx 8rpx;
        text-align: center;
        background: #f8f8f8;
        border-radius: 12rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #160002;
        transition: all 0.2s ease;
      }

      .timeSelectItem {
        background: rgba($primary, 0.1);
        color: $primary;
        border: 1rpx solid $primary;
      }
    }
  }

  .btn {
    width: 100%;
    padding: 24rpx 0;
    text-align: center;
    border-radius: 16rpx;
    color: #fff;
    background: $primary;
    font-size: 28rpx;
    font-weight: 600;
    margin-top: 24rpx;
    flex-shrink: 0;
  }
}

// 时间选择弹窗
.timePopup {
  width: 80vw;
  background: $card;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: $shadow;

  .btn {
    width: 100%;
    padding: 24rpx 0;
    text-align: center;
    border-radius: 16rpx;
    color: #fff;
    background: $primary;
    font-size: 28rpx;
    font-weight: 600;
    margin-top: 32rpx;
  }
}

// 覆盖uni-popup的默认样式，移除底部间隙
::v-deep .uni-popup__wrapper-box {
  padding-bottom: 0 !important;
}

::v-deep .uni-popup--bottom {
  padding-bottom: 0 !important;
}
</style>
