<template>
  <view class="page-body">
    <view class="meng" v-if="showNotice" @click="handleShowNotice"></view>
    <!-- 日期筛选 -->
    <div class="ai-center screen-box" style="padding-bottom: 8rpx">
      <!--      <view class="searchBtn" @click="handleSelect">查询筛选</view>-->
      <!--	搜索框内容 -->
      <div style="display: flex;align-items: center;justify-content: space-between;padding: 10rpx 0">
        <!--        <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>-->
        <!--        <div class="select_btn" @click="handleSelect" >-->
        <!--          <img src="/static/images/recons/select_icon.svg" alt="" class="select_icon">-->
        <!--          筛选-->
        <!--        </div>-->
      </div>
      <!-- 查询时间 -->
      <div style="display: flex;justify-content: space-between">
        <view style="display: flex;">
          <picker mode="date" @change="bindDateChange($event, 0)" :value="pageData.searchTime[0]"
            :end="pageData.endDate" start="2018-12-01" class="screen-unit">
            <text>{{ pageData.searchTime[0] }}</text>
            <text class="uni-icon uni-icon-arrowdown"></text>
          </picker>
          <text class="mr20">至</text>
          <picker mode="date" @change="bindDateChange($event, 1)" :value="pageData.searchTime[1]"
            :end="pageData.endDate" start="2018-12-01" class="screen-unit">
            <text>{{ pageData.searchTime[1] }}</text>
            <text class="uni-icon uni-icon-arrowdown"></text>
          </picker>
        </view>


        <div class="select_btn" @click="handleSelect">
          <img src="/static/images/recons/select_icon.svg" alt="" class="select_icon">
          筛选
        </div>
      </div>
      <!-- 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="uni-flex ai-center head-card">
        <!--        @tap="toTrend()"-->
        <view class="topDetail" style="width: 100%">
          <view class="label">实收总额</view>
          <view class="price-num">¥{{ $util.fmoney(pageData.msg.Total_Revenue, 2) }}</view>
          <view class="detailBox" style="margin-top: 12px">
            <view class="detailItem">
              <view class="value">{{ $util.fmoney(pageData.msg.Different_Price_More, 2) }}</view>
              <view class="label">长款金额 <span class="unit">/元</span></view>
            </view>
            <view class="detailItem">
              <view class="value">{{ $util.fmoney(pageData.msg.Different_Price_Less, 2) }}</view>
              <view class="label">短款金额 <span class="unit">/元</span></view>
            </view>
            <view class="detailItem">
              <view class="value">{{ $util.fmoney(pageData.msg.TotalOffAmount, 2) }}</view>
              <view class="label">优惠金额 <span class="unit">/元</span></view>
            </view>
            <view class="detailItem">
              <view class="value">{{ $util.noDecimal(pageData.msg.TicketCount) }}</view>
              <view class="label">客单数量<span class="unit">/笔</span></view>
            </view>
            <view class="detailItem">
              <view class="value">{{ $util.fmoney(pageData.msg.TotalCount, 2) }}</view>
              <view class="label">商品出售 <span class="unit">/件</span></view>
            </view>
            <view class="detailItem">
              <view class="value">{{ $util.fmoney(pageData.msg.countave, 2) }}</view>
              <view class="label">商品均价 <span class="unit">/元</span></view>
            </view>
          </view>

        </view>
      </view>
      <view class="modle-title">
        <image src="https://eshangtech.com/ShopICO/ahyd-BID/revenue/yestoday-region.png" mode="aspectFit"></image>
        <text>经营报表</text>
      </view>
      <view class="modleText" v-if="pageData.msg.SearchResult">
        <div v-if="showModal">
          <span v-if="copySearchText && BusinessTypeValue || copySearchText && BusinessTypeValue" class="text"
            style="color: red;display: block">温馨提示：模糊查询不支持选择经营方法/结算方式</span>
          <span class="text">{{ pageData.msg.SearchResult[0] }}</span>
          <view class="text" v-if="BusinessTypeValue !== 0">{{`经营模式: ${BusinessTypeList.filter(item =>
            item.value === BusinessTypeValue)[0].label}`}}</view>
          <view class="text" v-if="SettlementModeValue !== 0">{{`结算模式: ${SettlementModeList.filter(item =>
            item.value === SettlementModeValue)[0].label}`}}</view>
        </div>
        <div v-else>
          <span v-if="copySearchText && BusinessTypeValue || copySearchText && BusinessTypeValue" class="text"
            style="color: red">温馨提示：模糊查询不支持选择经营方法/结算方式</span>
          <div v-for="(item, index) in pageData.msg.SearchResult" :key="index">
            <span class="text" v-for="(subItem, subIndex) in item" :key="subIndex">
              <span class="text" style="color:red" v-if="item.length > 1 && subItem.indexOf('：') === -1">{{
                copySearchText }}</span>
              {{ subItem }}
            </span>
          </div>
        </div>



      </view>
      <view class="bg-white" v-if="ServerpartList.length > 0">
        <view class="region-area-title uni-flex ai-center jc-between" v-show="pageData.msg.Province_ExternalAmount"
          :class="{ 'active': pageData.insideShow }" @tap="pageData.insideShow = !pageData.insideShow">
          <text>省内区域</text>
        </view>
        <view v-show="pageData.insideShow">
          <view v-for="(item, i) in ServerpartList" :key="i">
            <div class=" region-cell" @tap="toggleRegion(item)">
              <div class="region-cell-unit region-title cuIcon-triangledownfill">
                <text class="">{{ item.Region_Name }}</text>
                <div class="ct01">
                  <text class="strong-text">¥{{ $util.fmoney(item.Total_Revenue, 2) }}</text>
                </div>
              </div>
              <div class="region-cell-unit">
                <text>营收占比</text>
                <div class="ct01">
                  <text class="strong-text">{{ item.Revenue_Proportion }}</text>
                </div>
              </div>
              <div class="region-cell-unit">
                <text class="uni-icon uni-icon-arrowright" :class="{ 'active': item.show }"></text>
              </div>
            </div>
            <ul class="region-cell-area" v-show="item.show">
              <li v-for="(child, index) in item.revenueServerModels" :class="{ 'visited': child.visited }" :key="index"
                @tap="toDetail(child)">
                <view>{{ child.Serverpart_Name }}</view>
                <view class="uni-flex ai-center data-number">
                  <text class="">{{ child.Revenue_Proportion }}</text>
                  <text style="flex: 2;">¥{{ $util.fmoney(child.Total_Revenue, 2) }}</text>
                </view>
              </li>
            </ul>
          </view>

        </view>

        <template v-if="insideRegionList.length > 0">
          <view class="region-area-title uni-flex ai-center jc-between" :class="{ 'active': pageData.exsideShow }"
            @tap="pageData.exsideShow = !pageData.exsideShow">
            <text>省外区域</text>
          </view>
          <view v-show="pageData.exsideShow">
            <view v-for="(item, i) in insideRegionList" :key="i">
              <div class=" region-cell" @tap="toggleRegion(item)">
                <div class="region-cell-unit region-title cuIcon-triangledownfill" :class="{ 'active': item.show }">
                  <text class="">{{ item.Region_Name }}</text>
                  <div class="ct01">
                    <text class="strong-text">¥{{ $util.fmoney(item.Total_Revenue, 2) }}</text>
                  </div>
                </div>
                <div class="region-cell-unit">
                  <text>营收占比</text>
                  <div class="ct01">
                    <text class="strong-text">{{ item.Revenue_Proportion }}</text>
                  </div>

                </div>
                <div class="region-cell-unit"><text class="uni-icon uni-icon-arrowright"
                    :class="{ 'active': item.show }"></text></div>
              </div>
              <ul class="region-cell-area" v-show="item.show">
                <li v-for="(child, index) in item.revenueServerModels" :class="{ 'visited': child.visited }"
                  :key="index" @tap="toDetail(child)">
                  <view>{{ child.Serverpart_Name }}</view>
                  <view class="uni-flex ai-center data-number">
                    <text class="">{{ child.Revenue_Proportion }}</text>
                    <text style="flex: 2;">¥{{ $util.fmoney(child.Total_Revenue, 2) }}</text>

                  </view>
                </li>
              </ul>
            </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" style="background: #fff">
      <div class="popupBox" style="box-sizing:border-box;height: 550px">
        <!--        <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 style="height: 380px;overflow-y: scroll">
            <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: {
    // 是否显示结算模式的悬浮框
    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">
.page-body {
  //padding-bottom: 80rpx;
}

.meng {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
}

.search_box {
  position: relative;
  width: 558rpx;
  height: 72rpx;
  background: #F2F4F5;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 36rpx;

  img {
    width: 35rpx;
    height: 35rpx;
    margin: auto 16rpx auto 24rpx;
  }

  .select_input {
    width: 420rpx;
    border: none;
    height: 40rpx;
    font-size: 28rpx;
  }

  .delete {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0%;
    z-index: 99;
  }
}

.select_btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
  color: #6C737A;

  img {
    width: 35rpx;
    height: 35rpx;
    margin-right: 12rpx;
  }
}

.popupBox {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 24rpx;
  position: relative;

  .popupContent {
    margin-top: 24rpx;

    .search_box {
      position: relative;
      width: 100%;
      height: 72rpx;
      background: #F2F4F5;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-radius: 36rpx;

      img {
        width: 35rpx;
        height: 35rpx;
        margin: auto 16rpx auto 24rpx;
      }

      .select_input {
        width: 80%;
        border: none;
        height: 40rpx;
        font-size: 28rpx;
      }

      .delete {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 0%;
        z-index: 99;
      }
    }

    .popupTitle {
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: bold;
      line-height: 40rpx;
      margin-top: 24rpx;

      .title {
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: bold;
        line-height: 40rpx;
      }

      .notice {
        margin-left: 8rpx;
        width: 12px;
        height: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #A69E9F;
        border-radius: 50%;
        color: #A69E9F;
        font-size: 12px;
        font-weight: 500;

        .noticeBox {
          max-width: 80%;
          position: absolute;
          top: 15px;
          display: inline-block;
          padding: 5px 10px;
          background: #fff;
          border-radius: 10rpx;
          box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
          z-index: 100;
          transform: translateY(-100%);

          .noticeText {
            display: block;
          }
        }
      }
    }

    .timeList {
      width: 100%;
      display: flex;
      align-items: center;
      flex-flow: wrap;
      padding: 12rpx 0;

      .timeItem {
        width: 22%;
        margin-right: 3%;
        box-sizing: border-box;
        text-align: center;
        background: #ffffff;
        border: 1rpx solid #efefef;
        margin-bottom: 8rpx;
      }

      .timeSelectItem {
        background: #e8f3fd;
        border: 1rpx solid #e8f3fd;
        color: #4D95F0;
      }
    }
  }


  .title {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: bold;
    line-height: 40rpx;
  }

  .delete {
    width: 20px;
    height: 20px;
  }

  .checkBox {
    padding: 30rpx 0;
  }

  .btn {
    position: absolute;
    width: calc(100% - 48px);
    //margin-left: 24px;
    padding: 15rpx 0;
    text-align: center;
    border-radius: 16rpx;
    color: #fff;
    background: #0A98D5;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
}

::v-deep.vue-ref {
  padding-bottom: 0px !important;
}

.timePopup {
  width: 80vw;
  height: 130px;
  background: #fff;
  box-sizing: border-box;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .btn {
    width: calc(100% - 48px);
    margin-left: 24px;
    padding: 15rpx 0;
    text-align: center;
    border-radius: 16rpx;
    color: #fff;
    background: #0A98D5;
    margin-top: 30rpx;
  }
}

.screen-box {
  background-color: #fff;
  padding: 0 20rpx;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 9;
}

.screen-box .searchBtn {
  margin-top: 12rpx;
  box-sizing: border-box;
  padding: 2rpx 10rpx;
  border-radius: 6rpx;
  background: rgba(22, 155, 213, 1);
  color: #fff;
  display: inline-block;
}

.screen-box .searchBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.screen-box .searchBox .searchItem {
  display: flex;
  width: 50%;
  align-items: center;
}

.searchBox .searchItem .searchLabel {
  margin-right: 16rpx;
  font-size: 16px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  line-height: 40rpx;
}



.screen-box .screen-unit {
  display: flex;
  align-items: center;
  width: 200rpx;
  padding: 0 14rpx;
  line-height: 3;
}

.screen-box .mr20 {
  margin-right: 20rpx;
  color: #95999C;
}

.uni-icon-arrowdown {
  font-size: 22rpx;
  color: #C7C7C7;
  margin-left: 8rpx;
}

.screen-box text {
  line-height: 3;
}

.screen-box image {
  width: 12rpx;
  height: 8rpx;
  margin: 0 16rpx;
  vertical-align: middle;
}

.head-card {
  padding: 12rpx 26rpx 40rpx;
  background-color: #fff;
}

.head-card>view {
  width: 330rpx;
  //height: 190rpx;
  color: #fff;
  text-align: center;
  padding-top: 30rpx;
  font-size: 28rpx;
  border-radius: 24rpx;
  box-sizing: border-box;
}

.head-card .topDetail .detailBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.head-card .topDetail .label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  opacity: 0.8;
  line-height: 40rpx;
  margin-bottom: 2px;
}

.detailBox .detailItem {
  width: 33%;
  margin-bottom: 16px;
}

.detailBox .detailItem .value {
  font-size: 16px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #fff;
  line-height: 40rpx;
}

.detailBox .detailItem .label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  opacity: 0.8;
  line-height: 40rpx;
  margin-bottom: 2px;
}

.detailBox .detailItem .label .unit {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: 40rpx;
  margin-left: 2px;
}


.head-card>view:first-child {

  background: linear-gradient(to left, #93a4ec 0%, #4b76e9 100%);
}

.head-card>view:last-child {
  //margin-left: 30rpx;
  background: linear-gradient(to left, #8cdade 0%, #82c2ce 100%);
  position: relative;
  //overflow: hidden;
}

.head-card .price-num {
  font-family: 'Bahnschrift Regular';
  font-size: 50rpx;
  line-height: 1.5;
}

.all-diff {
  background: linear-gradient(#f28785, #ee5b4c);
  height: 36rpx;
  line-height: 36rpx;
  width: 126rpx;
  color: #fff;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 20rpx;
  border-radius: 0 0 0 54rpx;

}

.all-diff image {
  width: 20rpx;
  height: 17rpx;
  margin-right: 8rpx;
}

.modle-title {
  padding-left: 24rpx;
  font-size: 30rpx;
  padding-top: 32rpx;
  //padding-bottom: 20rpx;
  font-weight: bolder;
  display: flex;
  align-items: center;
}

.modleText {
  width: 100%;
  box-sizing: border-box;
  padding: 0 24rpx 18rpx 74rpx;

  .text {
    font-size: 26rpx;
    color: #929292;
    white-space: pre-wrap;
  }
}

.modle-title image {
  max-width: 36rpx;
  max-height: 36rpx;
  margin-right: 14rpx;
}

.bg-white {
  background-color: #fff;
  margin: 0 24rpx;
  border-radius: 12rpx;
  padding-bottom: 26rpx;
}

.region-area-title {
  color: #000;
  font-weight: bolder;
  padding: 26rpx 46rpx 0 56rpx;
  position: relative;
  display: flex;
}

/*日结上传*/
.region-title {
  position: relative;
  color: #929292;
  /* font-weight: bolder; */

}

.region-title,
.ct01 {
  color: #000000;
}

.ct01 {
  padding-top: 8rpx;
}

.region-area-title:before {
  content: '';
  position: absolute;
  width: 0rpx;
  height: 0rpx;
  border: 0rpx;
  border-left: 8rpx solid transparent;
  border-right: 8rpx solid transparent;
  border-top: 8rpx solid #BBB7B7;
  left: 22rpx;
  top: 48rpx;
  transform: rotate(-90deg);
  transition: all 0.4s;
  display: block;
}

.active.region-area-title:before {

  border-left: 8rpx solid transparent;
  border-right: 8rpx solid transparent;
  border-top: 8rpx solid #E0BB97;
  transform: rotate(0deg);
}

.region-cell {
  display: flex;
  padding: 26rpx 46rpx 16rpx 56rpx;
  align-items: flex-end;
}

.region-cell .active.uni-icon-arrowright::before {
  transform: rotate(90deg);


}

.region-cell .uni-icon-arrowdown,
.region-cell .uni-icon-arrowright {
  font-size: 36rpx;
  color: #5A5A5A;
  /* padding-bottom: 12rpx; */
  position: relative;
}

.region-cell .uni-icon-arrowright::before {
  position: absolute;
  right: -26rpx;
  top: -46rpx;
  transition: all 0.4s;
}

.region-cell .region-cell-unit {
  flex: 2;
  display: flex;
  flex-direction: column;
  color: #929292;
  font-size: 26rpx;
  line-height: 1.5;
  text-align: right;
}

.region-cell .region-cell-unit:nth-child(1) {
  flex: 3;
  text-align: left;
}

.region-cell .region-cell-unit:nth-child(3) {

  flex: 2.5;

}

.region-cell-image {
  width: 48rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 50rpx;

}

.region-cell image {
  width: 14rpx;
  height: 23rpx;
}

/*日结上传服务区*/
.region-cell-area {
  box-sizing: border-box;
}

.region-cell-area li:nth-child(2n+1) {
  background-color: #FCFCFC;
}

.region-cell-area li view:first-child {
  display: flex;
  align-items: center;
}

.region-cell-area li.visited view:first-child {
  color: #007AFF;

}

.region-cell-area li:nth-child(2n+1) {
  background-color: #F9F9FB;
}

.region-cell-area li:nth-child(2n) view:first-child:before {
  content: '';
  background-color: #5596F9;
  width: 8rpx;
  height: 8rpx;
  border-radius: 8rpx;
  display: block;
  margin-right: 16rpx;
  /* position: absolute;
		left: 0rpx; */

}

.region-cell-area li:nth-child(2n+1) view:first-child:before {
  content: '';
  background-color: #FE6D67;
  width: 8rpx;
  height: 8rpx;
  border-radius: 8rpx;
  display: block;
  margin-right: 16rpx;
  /* 	position: absolute;
		left: 0rpx; */
}

.region-cell-area li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 46rpx 16rpx 56rpx;
  position: relative;
  text-align: left;
  color: #2E2E2E;
}

.region-cell-area li>view {
  flex: 2;
  font-size: 22rpx;
  position: relative;
}

.region-cell-area li>view text {
  font-size: 22rpx;
  flex: 1;
  text-align: right;
}

.region-cell-area li>view text:last-child {
  /* text-align: right; */
  font-weight: bolder;
  padding-right: 8rpx;
  flex: 2;
}

.region-cell-area li>view:last-child:after {
  content: '';
  background: url('https://eshangtech.com/ShopICO/ahyd-BID/revenue/you-jt.png')no-repeat center;
  width: 14rpx;
  height: 24rpx;
  background-size: contain;
  display: block;
  position: absolute;
  right: -28rpx;
  top: 8rpx;
}
</style>
