 <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: 430px">
<!--        <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="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="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>
        </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,// 经营模式的选择项
        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,// 显示模式
      }
		},
		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
      },
      // 给悬浮框的自定义时间赋初始值
      // 选择了自定义时间
      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)
				item.visited = true
				this.$forceUpdate()
			},
      // 页面请求的主要方法
			getList(){
        // 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;
        req = {
          startTime: searchTime[0],
          endTime: searchTime[1],
          SearchKeyName:searchName,
          SearchKeyValue:this.searchText,
          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 onLoad(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')
			// 调用接口拿到页面数据的方法
      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>
