<template>
  <div class="main">
    <div class="top">
        <img class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/specialBg.png"/>
        <div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
          <image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
          <div class="timeSelect">
<!--            <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDate.png"/>-->
            <picker mode="date" :value="searchText"  :end="lastDay" @change="bindDateChange" >
              <view class="time">
                <view class="text">{{ searchText }}</view>
                <img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/timeDown.png"/>
              </view>
            </picker>
          </div>
        </div>on
        <div class="topBox">
          <div class="boxLeft">
            <div class="headerTitle">实时车流预警</div>
<!--            注: 1个小时入区流量比5月同一时间流量增幅150%以上且每小时入区车辆超过100辆-->
              <span class="notice" v-if="selectTab===1">{{ `注: 1个小时入区流量比${showMonth}月同一时间流量增幅150%以上且每小时入区车辆超过100辆` }}</span>
              <span class="notice" v-if="selectTab===2">注: 前20个从今日零时起至今流量与月均同时段增幅情况</span>
          </div>
          <div class="boxRight">
            <span class="day">{{showDay}}</span>
            <img class="dayBox" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/dateBg.png"/>
          </div>
        </div>
    </div>

    <div class="content">
      <div class="contentTab">
        <div :class="selectTab===1?'selectTab tabItem':'tabItem'" @click="handleTab(1)">
          <span>{{`${startTime===0?23:startTime-1}时入区车流预警`}}</span>
        </div>
        <div :class="selectTab===2?'selectTab2 tabItem':'tabItem'" @click="handleTab(2)">
          <span>
            {{endTime===24?`${endTime - 1}-0时入区车流排行`:`0-${startTime===0?23:startTime-1}时入区车流排行`}}
          </span>
        </div>
      </div>
<!--      <div class="noticeBox">-->

<!--      </div>-->
      <div class="contentList">
        <div class="sortBox">
          <div class="sortItem" :style="{width:'calc(100% - 330rpx)'}">服务区</div>
          <div class="sortItem">
            <span class="sortItemText" @click="handleChangeSort(1)">今日</span>
            <img class="sortIcon" :style="{transform:sortType===1?'':`rotate(-180deg)`}" :src="sortNumber===1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectSortIcon.png':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/sortIcon.png'"/>
          </div>
          <div class="sortItem">
            <span class="sortItemText" @click="handleChangeSort(2)">月均</span>
            <img class="sortIcon" :style="{transform:sortType===1?'':`rotate(-180deg)`}" :src="sortNumber===2?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectSortIcon.png':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/sortIcon.png'"/>
          </div>
          <div class="sortItem">
            <span class="sortItemText" @click="handleChangeSort(3)">增幅</span>
            <img class="sortIcon" :style="{transform:sortType===1?'':`rotate(-180deg)`}" :src="sortNumber===3?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectSortIcon.png':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/sortIcon.png'"/>
          </div>
        </div>
        <div class="unitBox" v-if="selectTab===1">
          <span class="unit">单位：辆</span>
        </div>
        <div class="unitBox" v-if="selectTab===2">
          <span class="unit">单位：万辆</span>
        </div>

        <scroll-view  class="listBigBox" :style="{height:selectTab===1?'calc(100ch - 320px)':'calc(100ch - 356px)'}" :scroll-y="true">
          <div class="listItem" v-for="(item,index) in tableList" :key="index" >
            <div class="itemLeft" >
              <image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/car/itemLeftBg.svg"/>
              <view class="nameBox">
                <text class="serviceName">{{item.name}}</text>
                <text class="serviceLabel">{{item.SERVERPART_REGION + '区'}}</text>
              </view>
            </div>
            <div class="contentRight">
              <div class="rightTop">
                <view class="rightTopLeft">
                  <img class="NoIcon" v-if="index<=2" :src="index===0?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No1.png':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No2.png':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No3.png':''"/>
                  <view class="otherIcon" v-else>{{index+1}}</view>
<!--                  <view class="indexBox" :style="{backgroundImage:`url(${index===0?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No1.svg':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No2.svg':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No3.svg':''})`}">{{index+1}}</view>-->
                  <!--                <text class="areaName">{{item.SPRegionType_Name||'-'}}</text>-->
                </view>
                <view class="rightTopRight">
                  <view class="valueItem">{{item.VEHICLE_COUNT?item.VEHICLE_COUNT<100?`${item.VEHICLE_COUNT}(辆)`:selectTab===2?$util.getMoney(item.VEHICLE_COUNT / 10000):$util.getMoneyNoDecimal(item.VEHICLE_COUNT):''}}</view>
                  <view class="valueItem">{{item.MONTHVEHICLE_COUNT?item.MONTHVEHICLE_COUNT<100?`${item.MONTHVEHICLE_COUNT}(辆)`:selectTab===2?$util.getMoney(item.MONTHVEHICLE_COUNT / 10000):$util.getMoneyNoDecimal(item.MONTHVEHICLE_COUNT):''}}</view>
                  <view class="valueItem">
                    <span :style="{color:item.VEHICLE_RATE>0?'red':item.VEHICLE_RATE<0?'#0E9976':''}">{{item.VEHICLE_RATE>0?'+':item.VEHICLE_RATE<0?'':''}}</span>
                    <span :style="{color:item.VEHICLE_RATE>0?'red':item.VEHICLE_RATE<0?'#0E9976':''}">{{item.VEHICLE_RATE?item.VEHICLE_RATE+'%':'-'}}</span>
                  </view>
<!--                  <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>-->
<!--                  <span class="add">{{item.VEHICLE_RATE}}%</span>-->
                </view>
              </div>
              <div class="rightBottom">
                <span class="distance">{{item.SERVERPART_DISTANCE?item.SERVERPART_DISTANCE+'km':''}}</span>
                <span class="address">{{item.OWNERUNIT_NAME?item.OWNERUNIT_NAME+'km':''}}</span>
<!--                <view class="rightBottomItem">-->
<!--                  <text class="itemLabel">当前车流 /辆</text>-->
<!--                  <text class="itemValue">{{ item.VEHICLE_COUNT  || '-'}}</text>-->
<!--                </view>-->
<!--                <view class="rightBottomItem">-->
<!--                  <text class="itemLabel">月均车流 /辆</text>-->
<!--                  <text class="itemValue">{{item.MONTHVEHICLE_COUNT || '-'}}</text>-->
<!--                </view>-->
                <view class="goMap" @click="handleGoMap(item)">
                  <image class="mapIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/navigation.svg"/>
                  <text class="mapText">导航</text>
                </view>

              </div>
            </div>
          </div>
        </scroll-view>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/util/index.js'
import moment from "moment/moment";
export default {
    name: "specialCase",
    data(){
      const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
      return {
        single:'',//显示时间
        endData:'', // 结束时间
        startTime:'',// 开始数据的时间
        endTime:'',// 结束数据的时间
        selectTab: 1,// 选中的tab
        tableList:[],// 表格数据
        time:'',// 给接口的time
        statusBarHeight:'',
        menu:'',
        searchText:'',
        showMonth:'',// 上个月
        showDay:'',// 顶部右侧显示的日期
        seat:{},// 当前用户的经纬度位置
        serviceList:[],// 服务区列表
        sortType: 1,// 1正序 2倒序
        sortNumber: 1,// 1当月 2月均 3增幅
      }
    },
    async onLoad(){
      //  获取手机参数对页面进行适配
      let systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = Number(systemInfo.statusBarHeight)
      this.menu = uni.getMenuButtonBoundingClientRect()


      this.seat = uni.getStorageSync('seatInfo')
      let _this = this
      if (this.seat){
        //获取用户的经纬度位置存在stroge里面
        wx.getFuzzyLocation({
          type:'gcj02',
          altitude:true,
          success: (res) =>{
            let seatInfo = {
              latitude:res.latitude,
              longitude:res.longitude
            }
            uni.setStorageSync('seatInfo', seatInfo);
            _this.seat = seatInfo
          }
        })
      }

      // let storeTime = uni.getStorageSync('lastDay')
      // if (storeTime){
      //   this.time = storeTime
      // }
      const currentDate = new Date()
      // 拿到当前小时的前一小时
      let y = currentDate.getFullYear()
      let nowM = currentDate.getMonth() + 1
      if (nowM<10){
        nowM = '0'+nowM
      }
      let nowD = currentDate.getDate()
      if (nowD<10){
        nowD = '0'+nowD
      }
      this.time = `${y}-${nowM}-${nowD}`
      this.searchText = this.time
      // this.searchText = '2023-06-21'
      const date  = new Date(this.time)
      let m = date.getMonth()
      this.showMonth = m
      let d = date.getDate()
      if (d<10){
        d = '0'+d
      }
      this.showDay = d
      const nowDate = new Date()
      let h = nowDate.getHours()
      // let h = 0
      this.startTime = h
      if (this.startTime===0){
        let showDay = new Date(moment(this.searchText).subtract(1, 'day').format('YYYY-MM-DD')).getDate()
        if (showDay<10){
          showDay = '0'+showDay
        }
        this.showDay = showDay
      }
      // this.startTime = 19
      //传入的时间用在最上面的选择器上
      await this.handleGetServiceList()

      await this.handleTab(1)
    },
    methods:{
        // 查看服务区详情
        async handleGoMap(item){
          uni.showLoading({
            title:'查询服务区数据'
          })
          let req = {
            ServerpartId:item.SERVERPART_ID
          }
          const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
          uni.navigateTo({
            url:`/pages/commercialBI/map?longitude=${total.Result_Data.ServerpartInfo?total.Result_Data.ServerpartInfo.SERVERPART_X:''}&latitude=${total.Result_Data.ServerpartInfo?total.Result_Data.ServerpartInfo.SERVERPART_Y:''}&id=${item.SERVERPART_ID}&time=${this.searchText}`
          })
          uni.hideLoading()
        },
        // 时间器改变的方法
        bindDateChange(e){
          const date = new Date(e.detail.value)
          let m = date.getMonth()
          this.showMonth = m
          const d = date.getDate()
          this.searchText = e.detail.value
          this.showDay = d<10?'0'+d:d
          // 改变时间重新调数据的方法
          this.onRefresh()
        },
        handleTab(val){
            this.selectTab = val
          uni.showLoading({
            title:'正在加载'
          })
            if (val === 2 ){
                const req= {
                  StatisticsDate:this.startTime === 0 ?moment(this.searchText).subtract(1, 'day').format('YYYY-MM-DD'):this.searchText,
                  StatisticsHour:this.startTime === 0?23:this.startTime-1,
                  StatisticsType:2,
                  ShowCount:20
                }
                request.$webGet('CommercialApi/BigData/GetBayonetWarning',req).then(res=>{
                    res.Result_Data.List.forEach(item=>{
                        item.name  = item.SERVERPART_NAME.split('服务区')[0]
                    })
                    this.tableList = this.handleList(res.Result_Data.List,this.serviceList)
                  this.tableList = this.handleSortList(this.tableList)
                  uni.hideLoading()
                })
            }else if(val === 1 ){
                const req= {
                  StatisticsDate:this.startTime === 0?moment(this.searchText).subtract(1, 'day').format('YYYY-MM-DD'):this.searchText,
                  StatisticsHour:this.startTime === 0?23:this.startTime-1,
                  StatisticsType:1,
                  ShowCount:20
                }
                request.$webGet('CommercialApi/BigData/GetBayonetWarning',req).then(res=>{
                    res.Result_Data.List.forEach(item=>{
                        item.name  = item.SERVERPART_NAME.split('服务区')[0]
                    })
                    this.tableList = this.handleList(res.Result_Data.List,this.serviceList)
                    this.tableList = this.handleSortList(this.tableList)
                  uni.hideLoading()
                })
            }

        },
        onRefresh(){
            this.handleTab(this.selectTab)
        },
        handleBack(){
          uni.switchTab({
            url: '/pages/index/index'
          });
          // uni.navigateBack({
          //   delta: 1
          // });
        },
        //  拿到服务区列表的方法
        async handleGetServiceList(){
          const req = {
            Province_Code:'340000',
            longitude:this.seat.longitude,
            latitude:this.seat.latitude
          }
          const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
          this.serviceList = data.Result_Data.List
        },
        // 数据数组拼上服务区数据
        handleList(list,filterList){
          let res = []
          if (list && list.length>0){
            list.forEach((item=>{
              let filter = filterList.filter(filterItem=> filterItem.SERVERPART_ID===item.SERVERPART_ID)
              if (filter && filter.length>0){
                let filterRes = filter[0]
                item.SERVERPART_DISTANCE = filterRes.SERVERPART_DISTANCE
                item.OWNERUNIT_NAME = filterRes.OWNERUNIT_NAME
              }
              res.push(item)
            }))
          }
          return res
        },
        // 点击切换排序方法
      handleChangeSort(value){
        if (this.sortNumber===value){
          if (this.sortType===1){
            this.sortType = 2
          }else{
            this.sortType = 1
          }
        }else{
          this.sortNumber = value
        }
        this.tableList = this.handleSortList(this.tableList)
      },
      // 手动排序
      handleSortList(list){
        var len = list.length;
        for (var i = 0; i < len - 1; i++) {
          for (var j = 0; j < len - 1 - i; j++) {
            if (this.sortType === 1){
              if (this.sortNumber ===1){
                if (list[j].VEHICLE_COUNT < list[j + 1].VEHICLE_COUNT) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }else if(this.sortNumber===2){
                if (list[j].MONTHVEHICLE_COUNT < list[j + 1].MONTHVEHICLE_COUNT) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }else if(this.sortNumber===3){
                if (list[j].VEHICLE_RATE < list[j + 1].VEHICLE_RATE) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }else{
              if (this.sortNumber ===1){
                if (list[j].VEHICLE_COUNT > list[j + 1].VEHICLE_COUNT) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }else if(this.sortNumber===2){
                if (list[j].MONTHVEHICLE_COUNT > list[j + 1].MONTHVEHICLE_COUNT) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }else if(this.sortNumber===3){
                if (list[j].VEHICLE_RATE > list[j + 1].VEHICLE_RATE) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
          }
        }
        return list
      }
    }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  background: #fff;
  .top{
    width: 100%;
    height: 212px;
    position: relative;
    .bg{
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .header{
      position: absolute;
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .backArrow{
        width: 24px;
        height: 24px;
        margin-right: 16px;
      }
      .timeSelect{
        display: flex;
        align-items: center;
        .selectIcon{
          width: 16px;
          height: 16px;
        }
        .time{
          display: flex;
          align-items: center;
          .text{
            margin: 0 5px;
            font-size: 32rpx;
            font-family: AlimamaShuHeiTi;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 40rpx;
          }
          .icon{
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
    .topBox{
      position: absolute;
      left: 16px;
      top: 100px;
      width: calc(100% - 32px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .boxLeft{
        width: calc(100% - 200rpx);
        .headerTitle{
          font-size: 24px;
          font-family: AlimamaShuHeiTi;
          color: #FEFFFE;
          font-weight: bold;
          line-height: 24px;
          margin-bottom: 6px;
        }
        .notice{
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 16px;
          display: inline-block;
        }
      }
      .boxRight{
        width: 112rpx;
        height: 112rpx;
        position: relative;
        .day{
          font-size: 48rpx;
          font-family: DINAlternate, DINAlternate;
          font-weight: bold;
          color: #4983FD;
          line-height: 56rpx;
          position: absolute;
          top: 50%;left: 50%;
          transform: translate(-50%,-7px);
          z-index:3;
        }
        .dayBox{
          position: absolute;
          top: 0;left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .content{
    width: 100%;
    height: calc(100vh - 212px);
    box-sizing: border-box;
    //padding: 16px;
    transform: translateY(-32rpx);
    border-radius: 32rpx 32rpx 0 0;
    background: #fff;
    overflow: hidden;
    .contentTab{
      width: 100%;
      height: 108rpx;
      border-radius: 4px;
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectTab.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      display: flex;
      .tabItem{
        width: 44%;
        height: 100%;
        text-align: center;
        font-size: 30rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #786B6C;
        line-height: 30rpx;
        padding: 32rpx 26rpx;
        box-sizing: border-box;
      }
      .selectTab{
        width: 56%;
        font-size: 32rpx;
        line-height: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #160002;
        background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectLeftTab.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        white-space: nowrap;
      }
      .selectTab2{
        width: 56%;
        font-size: 32rpx;
        line-height: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #160002;
        background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectTabRight.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        white-space: nowrap;
      }
    }
    .contentList{
      width: 100%;
      box-sizing: border-box;
      padding: 0 32rpx;
      .sortBox{
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        position: relative;
        .sortItem{
          width: 110rpx;
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #A69E9F;
          line-height: 40rpx;
          .sortItemText{
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #A69E9F;
            line-height: 40rpx;
          }
          .sortIcon{
            width: 24rpx;
            height: 24rpx;
            margin-left: 4rpx;
          }
        }

      }
      .unitBox{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        .unit{
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #786B6C;
          line-height: 36rpx;
        }
      }
    }
    .noticeBox{
      width: 100%;
      border-bottom: 1px solid #ccc;
      margin-top: 4px;
      .notice{
        font-size: 12px;
        color: gray;
      }
    }
    .contentList{
      width: 100%;
      border-radius: 8px;
      margin-top: 16px;
      padding-bottom: 16px;
      overflow: hidden;
      .contentItem{
        background: #fff;
        padding: 19px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .index{
          width: 16px;
          height: 16px;
          position: relative;
          .boxBg{
            width: 16px;
            height: 16px;
            background: #10BFCE;
            filter: blur(4px);
            position: absolute;
            top: 0;left: 0;
          }
          .indexText{
            position: absolute;
            top: 50%;left: 50%;
            transform: translate(-50%,-50%);
            z-index: 2;
            font-size: 16px;
            font-family: DingTalk-JinBuTi, DingTalk;
            font-weight: normal;
            color: #160002;
            line-height: 20px;
          }
        }
        .serviceBox{
          width: 35%;
          display: inline-block;
          margin-left: 8px;
          .name{
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #160002;
            line-height: 26px;
          }
          .position{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 20px;
          }
        }
        .numberBox{
          width: 30%;
          .number{
            font-size: 20px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #160002;
            line-height: 24px;
          }
          .unit{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #A69E9F;
            line-height: 20px;
            margin-left: 2px;
          }
        }
        .addBox{
          width: calc(30% - 20px);
          display: flex;
          align-items: center;
          .addIcon{
            width: 14px;
            height: 14px;
          }
          .add{
            font-size: 20px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #E83944;
            line-height: 24px;
          }
        }
      }
    }
    .listBigBox{
      width: 100%;

      margin-top: 24rpx;
      box-sizing: border-box;
      padding-bottom: 12px;
      .listItem{
        width:100%;
        padding: 24rpx;
        box-sizing: border-box;
        border-radius: 16rpx;
        background: #F7F7F7;
        margin-bottom: 24rpx;
        display: flex;
        .itemLeft{
          width: 160rpx;
          height: 160rpx;
          border-radius: 16rpx;
          //border: 2rpx solid #E6E6E6;
          position: relative;
          background-repeat: no-repeat;
          background-size: cover;
          .bg{
            position: absolute;
            width: 160rpx;
            height: 160rpx;
            top: 0;left: 0;
            z-index: 1;
          }
          .statueBox{
            position: absolute;
            z-index: 2;
            top: 0;right: 0;
            width: 76rpx;
            height: 32rpx;
            font-size: 20rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 28rpx;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            text-align: center;
          }
          .nameBox{
            position: absolute;
            z-index: 2;
            top: 28rpx;
            left: 20rpx;
            display: flex;
            flex-direction: column;
            .serviceName{
              font-size: 30rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #7F020B;
              line-height: 30rpx;
            }
            .serviceLabel{
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #7F020B;
              line-height: 30rpx;
            }
          }
        }
        .contentRight{
          width: calc(100% - 176rpx);
          margin-left: 16rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .rightTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .rightTopLeft{
              display: flex;
              align-items: center;
              .NoIcon{
                width: 40rpx;
                height: 40rpx;
              }
              .otherIcon{
                width: 32rpx;
                height: 32rpx;
                background: linear-gradient(141deg, #BABCC3 0%, #CBCCD1 45%, #B5B6BA 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 24rpx;
                border-radius: 50%;
              }

              .indexBox{
                width: 36rpx;
                height: 32rpx;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #FEFFFF;
                line-height: 28rpx;
                text-align: center;
                background-repeat: no-repeat;
                background-size: 100% 100%;
              }
              .areaName{
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 40rpx;
                margin-left: 8rpx;
              }
            }
            .rightTopRight{
                display: flex;
                align-items: center;
                .valueItem{
                  width: 110rpx;
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 500;
                  color: #9A9A9A;
                  text-align: center;
                }



                .addIcon{
                  width: 14px;
                  height: 14px;
                }
                .add{
                  font-size: 20px;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #E83944;
                  line-height: 24px;
                }
            }
          }
          .rightBottom{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .distance{
              display: inline-block;
              width: 94rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 36rpx;
            }
            .address{
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 36rpx;
              display: inline-block;
              width: 200rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .goMap{
              display: flex;
              align-items: center;
              padding: 4rpx 16rpx;
              background: #4e92f6;
              box-sizing: border-box;
              border-radius: 8rpx;
              .mapIcon{
                width: 30rpx;
                height: 30rpx;
                margin-right: 8rpx;
              }
              .mapText{
                color: #fff;
              }
            }

            .rightBottomItem{
              display: flex;
              flex-direction: column;
              align-items: center;
              .itemLabel{
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #9A9A9A;
                line-height: 36rpx;
              }
              .itemValue{
                font-size: 28rpx;
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                color: #160002;
                line-height: 32rpx;
                margin-top: 8rpx;
              }

            }
          }
        }
      }
      //.listItem{
      //  margin-bottom: 12px;
      //  border: 1px solid #D9DBE0;
      //  border-radius: 8px;
      //  position: relative;
      //  .bg{
      //    position: absolute;
      //    right: 0;top: 0;
      //    width: 97px;
      //    height: 97px;
      //  }
      //  .listBox{
      //    width: 100%;
      //    box-sizing: border-box;
      //    padding: 12px 16px;
      //    background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
      //    border-bottom: 1px solid #D9DBE0;
      //    border-radius: 8px;
      //    .itemTop{
      //      width: 100%;
      //      display: flex;
      //      justify-content: space-between;
      //      align-items: center;
      //      .itemLeft{
      //        display: inline-block;
      //        padding: 4px 12px;
      //        background: rgba(26, 95, 255, 0.1);
      //        border-radius: 14px;
      //        .itemFixed{
      //          width: 12px;
      //          height: 14px;
      //          margin-right: 4px;
      //        }
      //        .serverName{
      //          font-size: 16px;
      //          font-family: DINAlternate-Bold, DINAlternate;
      //          font-weight: bold;
      //          white-space: nowrap;
      //          color: #1A5FFF;
      //          line-height: 22px
      //        }
      //      }
      //      .itemRight{
      //        display: flex;
      //        align-items: center;
      //        .entryRate{
      //          display: flex;
      //          flex-direction: column;
      //          .entryValue{
      //            font-size: 16px;
      //            font-family: DINAlternate-Bold, DINAlternate;
      //            font-weight: bold;
      //            color: red;
      //            line-height: 24px;
      //            white-space: nowrap;
      //          }
      //          .entryLabel{
      //            font-size: 14px;
      //            font-family: PingFangSC-Regular, PingFang SC;
      //            font-weight: 400;
      //            color: #786B6C;
      //            line-height: 20px;
      //          }
      //        }
      //        .img{
      //          width: 26px;
      //          height: 14px;
      //        }
      //
      //      }
      //    }
      //    .itemDetail{
      //      margin-top: 16px;
      //      width: 100%;
      //      display: flex;
      //      justify-content: space-between;
      //      align-items: center;
      //      .message{
      //        display: flex;
      //        flex-direction: column;
      //        .cirRate{
      //          width: 40px;
      //          height: 40px;
      //        }
      //        .label{
      //          font-size: 14px;
      //          font-family: PingFangSC-Regular, PingFang SC;
      //          font-weight: 400;
      //          color: #786B6C;
      //          line-height: 20px
      //        }
      //        .value{
      //          font-size: 20px;
      //          font-family: DINAlternate-Bold, DINAlternate;
      //          font-weight: bold;
      //          color: #160002;
      //          line-height: 24px;
      //          white-space: nowrap;
      //        }
      //      }
      //    }
      //  }
      //  .childList{
      //    border-radius: 8px 8px 0 0;
      //    box-sizing: border-box;
      //    margin-left: 16px;
      //    width: calc(100% - 32px);
      //    display: flex;
      //    align-items: center;
      //    justify-content: space-between;
      //    padding: 8px;
      //    .childItem{
      //      width: calc(100% / 3);
      //      display: flex;
      //      flex-direction: column;
      //      .childLabel{
      //        font-size: 14px;
      //        font-family: PingFangSC-Regular, PingFang SC;
      //        font-weight: 400;
      //        color: #786B6C;
      //        line-height: 20px
      //      }
      //      .childValue{
      //        font-size: 18px;
      //        font-family: DINAlternate-Bold, DINAlternate;
      //        font-weight: bold;
      //        color: #160002;
      //        line-height: 24px;
      //      }
      //    }
      //  }
      //}
    }
  }
}




//.main{
//  width: 100%;
//  box-sizing: border-box;
//  padding: 0 16px;
//  .select{
//        margin-left: 8px;
//        display: inline-block;
//        .time {
//            display: flex;
//            align-items: center;
//            margin-right: 4px;
//            .day {
//                font-size: 32rpx;
//                font-family: PingFangSC-Regular, PingFang SC;
//                font-weight: 400;
//                color: #782717;
//                line-height: 44rpx;
//                margin-right: 4px;
//            }
//            .uni-input {
//                font-size: 14px;
//                font-family: PingFangSC-Regular, PingFang SC;
//                font-weight: 400;
//                color: #ae664e;
//                line-height: 36rpx;
//            }
//            .icon {
//                width: 24px;
//                height: 16px;
//            }
//        }
//    }
//  .list{
//     .tabs{
//          width: 100%;
//          display: flex;
//          .tabItem{
//              width: 50%;
//              height: 40px;
//              font-size: 12px;
//              line-height: 40px;
//              text-align: center;
//              background: #f0f0f0;
//              border-radius: 10px 10px 0 0;
//          }
//          .selectTab{
//              width: 50%;
//              height: 40px;
//              font-size: 12px;
//              line-height: 40px;
//              text-align: center;
//              background: #fff;
//              border-radius: 10px 10px 0 0;
//          }
//      }
//    .item{
//        width: 100%;
//        display: flex;
//        margin-bottom: 5px;
//        margin-top: 10px;
//        .box{
//            width: 100%;
//            display: flex;
//            align-items: center;
//            .name{
//                width: 40%;
//                font-size: 16px;
//                font-weight: 600;
//                text-align: left;
//                white-space: nowrap;
//                display: flex;
//                align-items: baseline;
//                .normal{
//                    font-size: 12px;
//                    font-weight: 400;
//                    .unit{
//                        color:#ccc;
//                    }
//                }
//            }
//            .enter{
//                font-size: 12px;
//                width: 30%;
//                text-align: left;
//                white-space: nowrap;
//            }
//            .add{
//                font-size: 12px;
//                width: 30%;
//                text-align: center;
//                display: flex;
//                align-items: center;
//                justify-content: center;
//                .orangeRed{
//                    color:orangered;
//                }
//                .addIcon{
//                    width: 20px;
//                    height: 20px;
//                }
//            }
//        }
//    }
//      ::-webkit-scrollbar {
//          width: 4px;
//          height: 4px;
//          color:transparent;
//      }
//
//      /*定义滚动条轨道 内阴影+圆角*/
//      ::-webkit-scrollbar-track {
//          border-radius: 10px;
//          background-color:transparent;
//      }
//
//      /*定义滑块 内阴影+圆角*/
//      ::-webkit-scrollbar-thumb {
//          border-radius: 10px;
//          background-color:transparent;
//      }
//    .notice{
//        font-size: 12px;
//        color: gray;
//    }
//  }
//}
</style>
