<template>
  <view class="newMain">

    <view :class="showPop?'header headerBoxShow':'header'" :style="{height: menu.bottom + 92 + 'px'}">
      <view class="arrowBox" :style="{paddingTop: menu.top + 'px',height: menu.height + 'px'}">
        <image @click="handleBack" class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"/>

        <picker :value="selectServiceId" :range="selectServiceList" @change="handleChangeService" range-key="label">
          <view class="selectServiceBox">
            <image class="serviceIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/serviceIcon.png"/>
            <view class="nameBox">
              <span class="service">{{ selectServiceList[selectIndex].label }}</span>
              <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
            </view>
          </view>
        </picker>
      </view>

      <view class="timeBox">
        <picker class="timeSelect" mode="date" fields="month" :value="$moment(startDate).format('YYYY-MM')"
                :start="'2023-01-01'" :end="end" @change="handleGetStartTime">
          <span class="monthNumber">{{ startMonth || ''  }}</span>
          <span class="monthUnit">月</span>
          <span class="year">/{{ startYear || '' }}</span>
          <image class="bottomArrow" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/bottomArrow.png"/>
        </picker>
        <span style="margin: 0 16rpx">-</span>
        <picker class="timeSelect" mode="date" fields="month" :value="$moment(endDate).format('YYYY-MM')"
                :start="'2023-01-01'" :end="end" @change="handleGetEndTime">
          <span class="monthNumber">{{ endMonth || ''  }}</span>
          <span class="monthUnit">月</span>
          <span class="year">/{{ endYear || '' }}</span>
          <image class="bottomArrow" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/bottomArrow.png"/>
        </picker>
      </view>

      <view class="TabsBox">
        <view class="tabItemList">
          <view :class="selectFilter===4?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:4})">
            全部
          </view>
          <view :class="selectFilter===0?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:0})">
            待结算
          </view>
          <view :class="selectFilter===2?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:2})">
            审批中
          </view>
          <view :class="selectFilter===1?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:1})">
            已结算
          </view>
        </view>
        <view class="otherItem" @click="handleChangeSelect({id: 5})">
          <image class="filterIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/filter.png"/>
          类型
        </view>
      </view>
    </view>

      <scroll-view class="contentBox" :scroll-y="true" :style="{height: `calc(100vh - ${menu.bottom + 92}px)`}"
                   @scrolltolower="handleScrollBottom"
                   refresher-enabled="true" :refresher-triggered="isRefreshing"
                   @refresherrefresh="handleRefresherRefresh">
<!--                   @refresherpulling="handleRefresherPulling"-->
<!--                   @refresherrestore="handleRefresherRestore"-->
<!--                   @refresherabort="handleRefresherAbort"-->

        <view class="dataList">
          <view class="dataItem" v-for="(item,index) in dataList" :key="index" @click="handleGoDetail(item)" :style="{boxShadow: item.SETTLEMENT_STATE===0 || item.SETTLEMENT_STATE===2?'0 0px 6rpx #f9b297':'',marginTop: index===0?'0px':''}">
            <div class="content-index">{{index+1}}</div>
            <view class="itemRow" >
              <view class="projectName">{{ item.BUSINESSPROJECT_NAME }}</view>
              <view class="stateName" :style="{color: item.SETTLEMENT_STATE===2?'#FF814FFF':''}">{{ item.SETTLEMENT_STATE===0?'待结算':item.SETTLEMENT_STATE===1?'已结算':item.SETTLEMENT_STATE===2?'审批中':'' }}</view>
            </view>
            <view class="itemCenterRow" style="margin: 60rpx 0 20rpx">
              <view class="value">{{ item.SETTLEMENT_TYPE===1?$util.getMoney(item.REVENUE_AMOUNT):item.SETTLEMENT_TYPE===2?$util.getMoney(item.CURREVENUE_AMOUNT):'' }}</view>
              <view class="label">{{ item.SETTLEMENT_TYPE===1?'累计营业额':item.SETTLEMENT_TYPE===2?'本月营业额':'' }}</view>
            </view>
            <view class="itemRow">
              <view class="leftName">{{item.CURRENT_PERIOD || ''}}</view>
              <!--          <view class="rightName">{{ $util.getMoney(item.REVENUE_AMOUNT) }}</view>-->

              <view class="rightName">{{item.SETTLEMENT_TYPE===1?'年度结算':item.SETTLEMENT_TYPE===2?'月度结算':''}}：<span class="month">{{item.SETTLEMENT_DATE || ''}}</span> </view>
            </view>

            <view class="line"></view>
            <view class="itemRow">
              <view class="leftName"><span class="radio" style="background: #44bea3"></span>{{ item.MERCHANTS_NAME || '' }}</view>
              <view class="rightName"></view>
            </view>
            <view class="itemRow">
              <view class="leftName"><span class="radio" style="background: #398EFE"></span>{{item.SERVERPARTSHOP_NAME || ''}}</view>
            </view>
          </view>
        </view>
        <view class="load-more" v-if="dataList && dataList.length>0">
          <text>{{!isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
        </view>
      </scroll-view>

    <view class="meng" v-if="showPop" :style="{height: `calc(100vh - ${menu.bottom + 92}px)`,top: menu.bottom + 92 + 'px'}" @click="closePop">
      <view class="filterBox">
        <view class="filterBox2">
          <view class="filterTitle">结算类型</view>
          <view class="filterItemList">
            <view :class="SettlementType===0?'filterItem selectFilterItem':'filterItem'" @click.stop="handleChangeSettlementType(0)">全部</view>
            <view :class="SettlementType===1?'filterItem selectFilterItem':'filterItem'" @click.stop="handleChangeSettlementType(1)">年度</view>
            <view :class="SettlementType===2?'filterItem selectFilterItem':'filterItem'" @click.stop="handleChangeSettlementType(2)">月度</view>
          </view>
        </view>
        <view style="display: flex;justify-content: center">
          <view class="button" @click.stop="handleSubmit">查询</view>
        </view>
      </view>
    </view>



      <UniPop v-if="false" :show="showPop" @hidePopup="closePop" type="top" @touchmove.prevent>
        <view class="uniPopup">
          <!--            <view class="uniPopupTop">-->
          <!--              <text class="uniPopupTitle">筛选</text>-->
          <!--              <image @click="closePop" 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="'2023-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>
      </UniPop>
  </view>
</template>
<script>
import {
  mapState,
} from 'vuex'
import request from '@/util/index.js'
import Store from "../../store/store";
import UniPop from '@/components/uni-popup.vue'
import moment from "moment";
  export default {
    components: {UniPop},
    data() {
      return {
        selectFilter: 4,
        dataList: [],
        selectServiceList:[],// 这个用户可以选择的服务区
        selectIndex:0,// 选中的索引
        selectServiceId:'',// 选择的服务区
        showPop: false,// 显示更多筛选
        startDate:'',// 开始时间
        startMonth:'',// 开始时间的月份
        startYear:'',// 开始时间的年份
        endDate:'',// 结束时间
        endMonth:'',// 结束时间的月份
        endYear:'',// 结束时间的年份
        start:'',// 限制的开始时间
        end:'',// 限制的结束时间
        SettlementType: 0,// 结算模式
        PageIndex: 1,// 默认的页数
        isEnd: false,// 判断是否到底了
        useInfo:{},// 用户详情
        menu:{},
        isRefreshing: false,// 判断是不是在下拉刷新
      }
    },
    // computed: { //监听属性 类似于data概念
    //   ...mapState({
    //     user: (state) => {
    //       return state.userData
    //     },
    //   }),
    // },
    async onLoad(){
      this.menu = uni.getMenuButtonBoundingClientRect()
      console.log('this.menu',this.menu)


      let userInfo = uni.getStorageSync('vuex')
      userInfo = JSON.parse(userInfo)
      console.log('userInfo',userInfo)
      this.useInfo = JSON.parse(JSON.stringify(userInfo))
      console.log('this.useInfo',this.useInfo)
      console.log('Store.state.userData',Store.state.userData)

      await this.getSeverpart()


      // this.startDate = this.$moment().startOf('year').format('YYYY-MM')
      this.startDate = this.$moment('2023-01-01').format('YYYY-MM')
      this.startMonth = this.$moment(this.startDate).format('MM')
      this.startYear = this.$moment(this.startDate).format('YYYY')


      // this.endDate = this.$moment().subtract(1,'months').format('YYYY-MM')
      this.endDate = this.$moment().format('YYYY-MM')
      this.endMonth = this.$moment(this.endDate).format('MM')
      this.endYear = this.$moment(this.endDate).format('YYYY')
      // this.selectServiceList = Store.state.userData.serverPartList
      // if(this.selectServiceList[0].value==='424'){
      //   let list = []
      //   this.selectServiceList.forEach(item=>{
      //     if(item.value!=='424'){
      //       list.push(item)
      //     }
      //   })
      //   this.selectServiceList = list
      // }
      // this.selectServiceId = this.selectServiceList[0].value
      this.handleGetPageData()
    },
    onShow(){
      let reload = uni.getStorageSync('reolad')
      if(reload==='true'){
        this.dataList = []
        this.handleGetPageData()
        uni.setStorageSync('reolad','')
      }
      let isGoNewMonth = uni.getStorageSync('handleGetNewMonth')
      let handleGetNewMonthObj = uni.getStorageSync('handleGetNewMonthObj')
      let handleGetNewMonthTime = uni.getStorageSync('handleGetNewMonthTime')
      console.log('isGoNewMonth',isGoNewMonth)
      console.log('handleGetNewMonthObj',handleGetNewMonthObj)
      console.log('handleGetNewMonthTime',handleGetNewMonthTime)
      if(isGoNewMonth==='true'){
        this.handleGetNewMonth(handleGetNewMonthObj,handleGetNewMonthTime)
        uni.setStorageSync('handleGetNewMonth','')
        uni.setStorageSync('handleGetNewMonthObj','')
        uni.setStorageSync('handleGetNewMonthTime','')
      }
    },
    onUnload(){
      this.$util.addUserBehaviorNew()
    },
    methods:{
      async handleRefresherRefresh(){
        this.PageIndex = 1
        this.isEnd = false
        this.dataList = []
        this.isRefreshing = true
        await this.handleGetPageData()
        this.isRefreshing = false
      },
      // 滚动到底部
      handleScrollBottom(){
        console.log('1111')
        if(!this.isEnd){
          this.PageIndex = this.PageIndex + 1
          this.handleGetPageData()
        }
      },
      // 返回按钮
      handleBack(){
        console.log('1111')
        uni.navigateBack({ delta: 1})
      },
      // 拿到服务区列表
      async getSeverpart(){
        const req = {
          UserIdEncrypted: this.useInfo.userData.UserIdEncrypted
        }
        const data = await this.$request.$webGet('EShangApiMain/Logging/GetPassportInfoById',req)
        console.log('Info',data)
        const secondReq = {
          ServerpartCodes: data.Result_Data.CityAuthority,
          ServerpartType: 1000,
          StatisticsType: '1000,2000'
        }
        const secondData = await this.$request.$webGet('EShangApiMain/BaseInfo/GetServerpartDDL',secondReq)
        console.log('secondData',secondData)
        this.selectServiceList = secondData.Result_Data.List
        if(this.selectServiceList[0].value==='424'){
          let list = []
          this.selectServiceList.forEach(item=>{
            if(item.value!=='424'){
              list.push(item)
            }
          })
          this.selectServiceList = list
        }
        this.selectServiceId = this.selectServiceList[0].value
      },
      // 自动跳转到指定月份的方法
      async handleGetNewMonth(obj,time){
        console.log('time',time)
        uni.showLoading({
          title: '正在加载...'
        })
        const req = {
          ServerpartId: obj?.SERVERPART_ID,
          ServerpartShopId: obj?.SERVERPARTSHOP_ID,
          StartDate: this.$moment(time).format('YYYYMM'),
          EndDate: this.$moment(time).format('YYYYMM'),
        }
        const data = await request.$webGet('EShangApiMain/BusinessProject/GetProjectAccountList',req)
        console.log('data',data)
        let res = data.Result_Data.List
        let bigObj = {}
        if(res && res.length>0){
          res.forEach(item=>{
            if(item.SETTLEMENT_TYPE===2 && this.$moment(item.ENDDATE).format('YYYYMM') === this.$moment(time).format('YYYYMM')){
              if (item.SHOPROYALTY_ID === obj.SHOPROYALTY_ID) {
                bigObj = item
              }
            }
          })
        }
        console.log('bigObj',bigObj)
        let result = {
          ...bigObj,
          Approvalstate: bigObj.SETTLEMENT_STATE === 0 ? 0 : bigObj.SETTLEMENT_STATE === 1 ? 9 : bigObj.SETTLEMENT_STATE === 2 ? 1 : '',
          startTime: this.$moment(bigObj.SETTLEMENT_DATE  + (bigObj.SETTLEMENT_TYPE===1?'':'/01') ).startOf('months').format('YYYY-MM-DD'),
          endTime: this.$moment(bigObj.SETTLEMENT_DATE  + (bigObj.SETTLEMENT_TYPE===1?'':'/01')).endOf('months').format('YYYY-MM-DD'),
        }
        this.$util.toNextRoute('navigateTo', `/pages/settlementApproval/detail?obj=${JSON.stringify(result)}&staticMonth=${time}`)

        uni.hideLoading()
      },
      // 改变筛选条件
      handleChangeSelect(obj){
        if(obj.id === 5){
          this.showPop = true
        }else{
          this.selectFilter = obj.id
          this.isEnd = false
          this.PageIndex = 1
          this.handleGetPageData()
        }
      },
      // 改变服务区
      handleChangeService(e){
        console.log('e',e)
        this.selectIndex = Number(e.target.value)
        this.selectServiceId = this.selectServiceList[Number(e.target.value)].value
        this.handleGetPageData()
        this.isEnd = false
        this.PageIndex = 1
      },
      // 关闭弹出框
      closePop(){
        this.showPop = false
      },
      // 改变开始时间
      handleGetStartTime(e){
        this.start = e.detail.value
        this.startDate = moment(e.detail.value).format('YYYY-MM')
        this.startMonth = this.$moment(this.startDate).format('MM')
        this.startYear = this.$moment(this.startDate).format('YYYY')
        this.isEnd = false
        this.PageIndex = 1
        this.handleGetPageData()
      },
      // 改变结束时间
      handleGetEndTime(e){
        this.endDate = moment(e.detail.value).format('YYYY-MM')
        this.endMonth = this.$moment(this.endDate).format('MM')
        this.endYear = this.$moment(this.endDate).format('YYYY')
        this.isEnd = false
        this.PageIndex = 1
        this.handleGetPageData()
      },
      handleChangeSettlementType(e){
        this.SettlementType = e
      },
      handleSubmit(){
        this.isEnd = false
        this.PageIndex = 1
        this.closePop()
        this.handleGetPageData()
      },
      // 跳转
      handleGoDetail(obj){
        console.log('obj',obj)
        let res = {
          ...obj,
          Approvalstate: obj.SETTLEMENT_STATE === 0 ? 0 : obj.SETTLEMENT_STATE === 1 ? 9 : obj.SETTLEMENT_STATE === 2 ? 1 : '',
          // startTime: new Date(obj.STARTDATE).getTime() < new Date(obj.SETTLEMENT_DATE).getTime()?this.$moment(obj.SETTLEMENT_DATE).startOf('months').format('YYYY-MM-DD'):this.$moment(obj.STARTDATE).format('YYYY-MM-DD'),
          // endTime: new Date(obj.ENDDATE).getTime() > new Date(obj.SETTLEMENT_DATE).getTime()?this.$moment(obj.SETTLEMENT_DATE).startOf('months').format('YYYY-MM-DD'):this.$moment(obj.STARTDATE).format('YYYY-MM-DD')
          startTime: this.$moment(obj.SETTLEMENT_DATE + (obj.SETTLEMENT_TYPE===1?'':'/01')).startOf('month').format('YYYY-MM-DD'),
          endTime: this.$moment(obj.SETTLEMENT_DATE +(obj.SETTLEMENT_TYPE===1?'':'/01')).endOf('month').format('YYYY-MM-DD'),
        }
        this.$util.toNextRoute('navigateTo', `/pages/settlementApproval/detail?obj=${JSON.stringify(res)}&staticMonth=${res.SETTLEMENT_DATE + (obj.SETTLEMENT_TYPE===1?'':'/01')}`)
      },
      async handleGetPageData(){
        const req = {
          ServerpartId: this.selectServiceId,
          SettlementState: this.selectFilter===4?'': this.selectFilter,
          SettlementType: this.SettlementType || '',
          StartDate: this.startDate?this.$moment(this.startDate).format('YYYYMM'):'',
          EndDate: this.endDate?this.$moment(this.endDate).format('YYYYMM'):'',
          PageIndex: this.PageIndex,
          PageSize: 10,
          UserId: this.useInfo.userData.UserId
        }
        uni.showLoading({
          title: '正在加载...'
        })
        const data = await request.$webGet('EShangApiMain/BusinessProject/GetProjectAccountList',req)
        console.log('data',data)
        this.dataList =  this.PageIndex === 1?data.Result_Data.List:[...this.dataList,...data.Result_Data.List]
        console.log('this.dataList',this.dataList)
        if(data.Result_Data.List && data.Result_Data.List.length < 10){
          this.isEnd = true
        }
        uni.hideLoading()
      },
      // 下拉刷新
      // onPullDownRefresh(){
      //   console.log('1111')
      //   this.PageIndex = 1
      //   this.isEnd = false
      //   this.dataList = []
      //   this.handleGetPageData()
      //   setTimeout(function() {
      //     uni.stopPullDownRefresh()
      //   }, 1000)
      // },
      // 滚动到底部
      // onReachBottom(){
      //   console.log('1111')
      //   if(!this.isEnd){
      //     this.PageIndex = this.PageIndex + 1
      //     this.handleGetPageData()
      //   }
      // }
    }
  }
</script>

<style scoped lang="scss">
.newMain{
  width: 100%;
  max-height: 100vh;
  box-sizing: border-box;
  background: #F3F3F3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .header{
    width: 100%;
    background-image: url("https://eshangtech.com/ShopICO/yxcl/settlementApproval/pageBg.png");
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    padding: 0 32rpx;
    z-index: 4;
    position: relative;
    .arrowBox{
      width: 100%;
      display: flex;
      align-items: center;
      .img{
        width: 48rpx;
        height: 48rpx;
      }
      .selectServiceBox{
        margin-left: 16rpx;
        display: flex;
        align-items: center;
        .serviceIcon{
          width: 80rpx;
          height: 80rpx;
          position: relative;
          z-index: 2;
        }
        .nameBox{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #160002;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          padding: 12rpx 34rpx 12rpx 48rpx;
          display: inline-block;
          border-top-right-radius: 200rpx;
          border-bottom-right-radius:  200rpx;
          background: #fff;
          transform: translateX(-20px);
          .moreIcon{
            width: 24rpx;
            height: 24rpx;
            margin-left: 14rpx;
          }
        }
      }
    }
    .timeBox{
      height: 28px;
      margin-top: 12px;
      display: flex;
      align-items: center;
      .timeSelect{
        display: flex;
        align-items: center;
        .monthNumber{
          font-family: DINAlternate-Bold, DINAlternate;
          font-size: 42rpx;
          font-weight: bold;
        }
        .monthUnit{
          margin-left: 4rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #242729;
        }
        .year{
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: 400;
          font-size: 28rpx;
          color: #786B6C;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
          margin-left: 8rpx;
        }
        .bottomArrow{
          width: 32rpx;
          height: 32rpx;
          margin-left: 8rpx;
        }
      }
    }

    .TabsBox{
      width: 100%;
      height: 32px;
      margin-top: 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .tabItemList{
        width: calc(100% - 140rpx);
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 62rpx;
        margin-right: 30rpx;
        .tabItem{
          display: inline-block;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          height: 62rpx;
          color: #242729;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
        .selectTabItem{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #FD7F21;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          position: relative;
        }
        .selectTabItem:after{
          content:'';
          height: 6rpx;
          position: absolute;
          width: 100%;
          left: 0;bottom: 0;
          background: #FD7F21;
        }
      }
      .otherItem{
        width: 110rpx;
        height: 62rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #786B6C;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        position: relative;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        padding-left: 10rpx;
        .filterIcon{
          width: 32rpx;
          height: 32rpx;
          margin-right: 4rpx;
          margin-top: 4rpx;
        }
      }
      .otherItem:before{
        content:'';
        width: 1px;
        height: 36rpx;
        background: #E4E4E4;
        position: absolute;
        top: 0;left: 0;
      }
    }
  }
  .headerBoxShow{
    box-shadow: 0rpx 60rpx 160rpx 0rpx rgba(94,43,1,0.08);
  }

    .contentBox{
      width: 100%;
      height: 100%;
      background-color: #f3f3f3;
      .dataList{
        width: 100%;
        box-sizing: border-box;
        padding: 24rpx 24rpx 0;
        .dataItem{
          width: 100%;
          box-sizing: border-box;
          background: #fff;
          padding: 16rpx;
          margin: 24rpx 0;
          border-radius: 8rpx;
          box-shadow: 0 0px 6rpx #E2E2E2;
          position: relative;
          .content-index {
            width: 42rpx;
            height: 32rpx;
            line-height: 32rpx;
            font-size: 24rpx;
            color: #fff;
            text-align: center;
            background-color: #fb8b56;
            position: absolute;
            top: 26rpx;
            left: -4rpx;
            box-shadow: 4rpx 4rpx 2rpx 0 rgba(238,112,27,0.5)
          }
          .itemRow{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .projectName{
              width: 60%;
              font-size: 28rpx;
              height: 54rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #333333;
              box-sizing: border-box;
              padding-left: 40rpx;
            }
            .leftName{
              color: #686868;
              font-size: 24rpx;
              .radio{
                display: inline-block;
                width: 14rpx;
                height: 14rpx;
                border-radius: 14rpx;
                margin: 0 8px 0 5px;
              }
            }
            .stateName{
              font-size: 28rpx;
              color: #999999;
            }
            .rightName{
              color: #686868;
              font-size: 24rpx;
              .radio{
                display: inline-block;
                width: 14rpx;
                height: 14rpx;
                border-radius: 14rpx;
                margin: 0 8px 0 5px;
              }
              .month{
                font-family: DINAlternate-Bold, DINAlternate;
              }
            }
          }
          .itemCenterRow{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .value{
              font-family: DINAlternate-Bold, DINAlternate;
              font-size: 16px;
              font-weight: 600;
              color: #FF814FFF;
            }
            .label{
              font-size: 12px;
              color: #999999;
            }
          }
          .line{
            height: 2rpx;
            width: 100%;
            background-color: #eee;
            margin-bottom: 18rpx;
            margin-top: 16rpx;
          }
        }
      }
      .load-more {
        text-align: center;
        width: 100%;
        height: 80rpx;
        color: #9999;
        font-size: 24rpx;
      }
    }
  .meng{
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index:9;
    .filterBox{
      width: 100%;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 16rpx 16rpx;
      padding: 48rpx 32rpx 24rpx ;
      box-sizing: border-box;
      z-index:10;
      position: relative;
      .filterBox2{
        .filterTitle{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #212226;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
        .filterTimeBox{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 24rpx;
          .timeSelect{
            width: calc((100% - 20px)/2);
          }
        }
        .filterItemList{
          margin: 24rpx;
          display: flex;
          flex-wrap: wrap;
          .filterItem{
            width: calc((100% - 36rpx)/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: #FD7F21;
            border: 2rpx solid #FD7F21;
          }
        }
      }
      .button{
        background: #FA8B39;
        border-radius: 8rpx;
        width: calc(100% - 64rpx);
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }
  .uniPopup{
    width: 100%;
    height: 150px;
    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;
      }
      .filterTimeBox{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24rpx;
        .timeSelect{
          width: calc((100% - 20px)/2);
        }
      }
      .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;
        }
      }
    }
    .button{
      background: #FA8B39;
      border-radius: 8rpx;
      width: calc(100% - 64rpx);
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #FFFFFF;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
    }
  }
}
</style>
