<template>
  <view class="main">
    <view class="header">
      <view class="top" :style="{height:(menu.bottom + 6)+'px'}">
        <image :style="{top:(menu.top + ((menu.height - 24)/2))+'px'}" @click="handleBack" class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
      </view>
      <p class="pageTitle">服务区月度计划</p>

      <view class="monthTabs">
        <scroll-view class="big" :show-scrollbar="false" scroll-with-animation  scroll-x="true" enable-flex :scrollIntoView="selectMonthId" >
          <div :id="'item'+item.value" :class="selectMonth===item.value?'monthItem selectItem':'monthItem'" v-for="(item,index) in monthList" :key="index" @click="handleSelectMonth(item.value)">{{item.label}}</div>
        </scroll-view>
      </view>

      <view class="monthDetailList">
        <swiper class="swiper" previous-margin="40rpx" next-margin="40rpx" @change="handleDetailScroll" :current="selectDetail">
          <block v-for="(item,index) in swiperList" :key="index">
            <swiper-item class="swiper-item" :item-id="index" :data-item-id="index" bindtap='clickChange'>
              <view class="box">
                <view :class="selectDetail===index?'detail':'detail noShow'">
                  <view class="item" v-if="selectDetail===index">
                    <div class="picker">
                      <div class="selectService" @click="handleShowPopup">
                        <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/fixed.svg"></image>
                        <view class="select">
                          <view class="name">{{selectServiceName || '-'}}</view>
                          <p class="area">服务区</p>
                          <div style="width: 24px;height: 12px"></div>
                          <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/orangeArrow.svg"></image>
                        </view>
                      </div>
                    </div>
                    <view class="itemTop" :style="{marginTop: selectDetail===index?'16px':'4px'}">
                      <view class="left">
                        <view class="detailContent">
                          <view class="top">
                            <span class="money">{{serviceDetailObj.RevenueMonth_Amount || '-'}}</span>
                            <!--                            <image class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
                          </view>
                          <p class="text">本月已完成<text class="unit">/元</text></p>
                        </view>
                      </view>
                      <view class="right">
                        <p class="add" :style="{color:serviceDetailObj.MonthGrowth_Rate >0?'#E83944':'#049E77'}">{{serviceDetailObj.MonthGrowth_Rate >0?'+':''}}{{serviceDetailObj.MonthGrowth_Rate|| '-' }}%</p>
                        <text class="compare">比计划</text>
                      </view>
                    </view>
                    <view class="itemBottom" :style="{marginTop: selectDetail===index?'20px':'4px'}">
                      <view class="progress">
                        <view class="have" :style="{width:serviceDetailObj.MonthBudget_Degree + '%'}"></view>
                      </view>
                      <view class="text">
                        <span class="success">计划完成<span class="unit">/元</span></span>
                        <span class="target">{{serviceDetailObj.BudgetMonth_Amount || '-'}}</span>
                      </view>
                    </view>
                  </view>
                  <view class="item" v-if="selectDetail!==index">
                    <div class="picker">
                      <div class="selectService" @click="handleShowPopup">
                        <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/fixed.svg"></image>
                        <view class="select">
                          <view class="name">{{'-'}}</view>
                          <p class="area">服务区</p>
                          <div style="width: 24px;height: 12px"></div>
                          <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/orangeArrow.svg"></image>
                        </view>
                      </div>
                    </div>
                    <view class="itemTop" :style="{marginTop: selectDetail===index?'16px':'4px'}">
                      <view class="left">
                        <view class="detailContent">
                          <view class="top">
                            <span class="money">{{'-'}}</span>
<!--                            <image class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
                          </view>
                          <p class="text">本月已完成<text class="unit">/元</text></p>
                        </view>
                      </view>
                      <view class="right">
                        <p class="add" :style="{color:serviceDetailObj.MonthGrowth_Rate >0?'#E83944':'#049E77'}">{{''}}{{'-' }}%</p>
                        <text class="compare">比计划</text>
                      </view>
                    </view>
                    <view class="itemBottom" :style="{marginTop: selectDetail===index?'20px':'4px'}">
                      <view class="progress">
                        <view class="have" :style="{width:serviceDetailObj.MonthBudget_Degree + '%'}"></view>
                      </view>
                      <view class="text">
                        <span class="success">计划完成<span class="unit">/元</span></span>
                        <span class="target">{{'-'}}</span>
                      </view>
                    </view>
                  </view>
                  <image class="detailLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/detailLogo.svg"></image>
                </view>
              </view>
            </swiper-item>
          </block>
        </swiper>
      </view>
    </view>

    <view class="detail" :style="{height:`calc(100vh - 321px - ${menu.bottom + 6}px)`}">
      <scroll-view scroll-y="true" style="height: calc(100% - 16px);width: 100%">
        <view class="box" v-for="(item,index) in detailList" :key="index">
          <p class="title">{{item.node.ACCOUNT_CODE}}</p>
          <view class="top">
            <image class="icon" :src="item.node.ACCOUNT_CODE==='营业收入'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/mainWork.svg':item.node.ACCOUNT_CODE==='营业成本'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/cost.svg':item.node.ACCOUNT_CODE==='毛利率'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/gross.svg':''"></image>
            <view class="sum">
              <span class="money">{{item.node.REVENUE_AMOUNT || '-'}}</span>
              <span class="text">总计<span class="unit">/元</span></span>
            </view>
            <image class="meng" :src="item.node.ACCOUNT_CODE==='营业收入'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/mainWorkMeng.png':item.node.ACCOUNT_CODE==='营业成本'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/costBg.png':item.node.ACCOUNT_CODE==='毛利率'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/grossBg.png':''"></image>
          </view>
          <view v-for="(subItem,subIndex) in item.children" :key="subIndex">
            <view class="smallTitle">
              <span class="type">{{subItem.node.ACCOUNT_CODE}}<span class="unit">/元</span></span>
              <span class="money">{{subItem.node.REVENUE_AMOUNT || '-'}}</span>
            </view>
            <view class="subItem" v-for="(thirdItem,thirdIndex) in subItem.children" :key="thirdIndex">
              <view class="link" v-if="thirdIndex + 1 !== subItem.children.length"></view>
              <view class="subTop">
                <image class="icon" :src="`https://eshangtech.com/ShopICO/ahyd-BID/plan/${
                  item.node.ACCOUNT_CODE==='营业收入'?subItem.node.ACCOUNT_CODE==='自营收入'?
                  thirdItem.node.ACCOUNT_CODE==='便利店'?'store':thirdItem.node.ACCOUNT_CODE==='餐饮（含小吃）'?'mainWorkFood':'mainWorkRoom'
                  :thirdItem.node.ACCOUNT_CODE==='餐饮租赁收入'?''
                  :thirdItem.node.ACCOUNT_CODE==='商铺租赁收入'?''
                  :thirdItem.node.ACCOUNT_CODE==='场地租赁汇总'?'':''
                  :item.node.ACCOUNT_CODE==='营业成本'?thirdItem.node.ACCOUNT_CODE==='便利店'?'costStore'
                  :thirdItem.node.ACCOUNT_CODE==='餐饮销售成本'?'costFood'
                  :thirdItem.node.ACCOUNT_CODE==='员工餐成本'?'costBook':'costRoom'
                  :thirdItem.node.ACCOUNT_CODE==='综合毛利率 (不含员工餐)'?'grossAdd'
                  :thirdItem.node.ACCOUNT_CODE==='综合毛利率 (含员工餐)'?'grossUser'
                  :thirdItem.node.ACCOUNT_CODE==='便利店'?'grossStore':'grossFood'
                }.svg`"></image>
                <span class="text">{{thirdItem.node.ACCOUNT_CODE}}</span>
              </view>
              <view class="subBox">
                <view class="subType">
                  <view class="upper">
                    <view class="icon" :style="{background:item.node.ACCOUNT_CODE==='营业收入'?'#FF7D35':item.node.ACCOUNT_CODE==='营业成本'?'#1E80FF':'#7242DE'}"></view>
                    <span class="subTitle">实际</span>
                    <span class="unit">/元</span>
                  </view>
                  <span class="value">{{thirdItem.node.REVENUE_AMOUNT || '-'}}</span>
                </view>
                <view class="subTypeNoAfter">
                  <view class="upper">
                    <view class="icon" :style="{opacity: 0.4,background:item.node.ACCOUNT_CODE==='营业收入'?'#FF7D35':item.node.ACCOUNT_CODE==='营业成本'?'#1E80FF':'#7242DE'}"></view>
                    <span class="subTitle">计划</span>
                    <span class="unit">/元</span>
                  </view>
                  <span class="value">{{thirdItem.node.BUDGETDETAIL_AMOUNT || '-'}}</span>
                </view>
                <view class="progress">
                  <view class="reality" v-if="thirdItem.node.Budget_Degree" :style="{width:thirdItem.node.Budget_Degree>=200?'100%':(thirdItem.node.Budget_Degree / 100)*40 + 'px'}"></view>
                  <view class="plan"></view>
                  <view class="add">
                    <image v-if="thirdItem.node.Budget_Degree" class="addIcon" :src="thirdItem.node.Budget_Degree>0?'https://eshangtech.com/ShopICO/ahyd-BID/plan/add.svg':'https://eshangtech.com/ShopICO/ahyd-BID/plan/reduce.svg'"></image>
                    <span class="value" :style="{color:thirdItem.node.Budget_Degree>0?'#E83944':thirdItem.node.Budget_Degree<0?'#049E77':'#ccc'}">{{thirdItem.node.Budget_Degree  || '-'}}%</span>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <uniPopup type="bottom" :round="true" :show="showPop" @hidePopup="hidePopup">
      <view class="popup" :style="{height:selectTab!==2?'60vh':'78vh'}">
        <view class="top">
          <text class="popupTitle">选择片区</text>
          <image @click="hidePopup" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
        </view>
        <view class="areaList">
          <view @click="handleChangeArea(item)" :class="selectServiceId===item.value?'selectItem item':'item'" v-for="(item,index) in serviceList" :key="index">{{item.label}}<text class="unit">片区</text></view>
        </view>
      </view>
    </uniPopup>
  </view>
</template>
<script>
import request from '@/util/index.js'
import uniPopup from '@/components/uni-popup'
export default {
  components:{
    uniPopup
  },
  data(){
    return{
      menu:{},
      serviceList:[],// 服务区选择列表
      monthList:[{label:'1月',value:1},{label:'2月',value:2},{label:'3月',value:3},{label:'4月',value:4},{label:'5月',value:5},{label:'6月',value:6},{label:'7月',value:7}, {label:'8月',value:8},{label:'9月',value:9},{label:'10月',value:10},{label:'11月',value:11},{label:'12月',value:12}],
      selectMonth:0,// 选中的月份
      selectMonthId:'',// 选中月份的id
      swiperList:[{},{},{},{},{},{},{},{},{},{}, {},{}],
      selectDetail:0,// 放大的月份详情
      detailList:[],
      serviceId:'',// 服务区ID
      showPop:false,// 是否显示popup
      selectAreaValue:'',// 选择的片区ID
      selectServiceId:'',// 选择的服务区id
      selectServiceName:'',// 选择的服务区名称
      serviceDetailObj:{},// 服务区的详细信息
    }
  },
  onLoad(query){
    console.log('query',query)
    // query 有id searchTime 片区名称和片区内码
    //  获取手机参数对页面进行适配
    this.menu = uni.getMenuButtonBoundingClientRect()
    // 处理上个页面传入的数据
    // 先拿到首页的时间 作为调用接口的统一时间  存的lastDay存当前月份的具体日期切换回本月的日期判断有用
    if (query.search){
      this.searchTime = query.search
    }else{
      this.searchTime = uni.getStorageSync('lastDay')
    }
    // 两个是一起的 一个有另一个一定有
    if (query.selectAreaValue){
      this.selectAreaValue = query.selectAreaValue
    }
    if (query.obj){
      this.serviceDetailObj = JSON.parse(query.obj)
      this.selectServiceName = this.serviceDetailObj.Serverpart_Name.split('服务区')[0]
      this.selectServiceId = this.serviceDetailObj.Serverpart_ID
    }
    this.lastDay = uni.getStorageSync('lastDay')
    // 拿到当前时间
    const date = new Date(this.searchTime)
    let month = date.getMonth() + 1
    // 月份列表的显示和详情卡片的滑块列表 还是得用首页的时间 不然选择前面月份 后续比当前月份小的月份不会显示
    const nowDate = new Date(this.lastDay)
    let nowMonth = nowDate.getMonth() + 1
    // 滚动的月份列表
    this.monthList = this.monthList.filter(item=>item.value<=nowMonth)
    // 详情卡片的滑动列表
    this.swiperList = this.swiperList.filter((item,index)=>index<nowMonth)
    // 根据月份显示的详情卡片
    this.selectDetail = month - 1
    // 拿到服务区id
    this.serviceId = query.id
    // 拿到服务区列表
    this.getServiceList()
    // 拿到下方需要遍历的数据
    this.getServiceDetail()
  },
  onReady(){
    this.getThisMonth()
  },
  methods:{
    getThisMonth(){
      const date = new Date(this.searchTime)
      const month = date.getMonth() + 1
      this.selectMonth = month
      this.selectMonthId = `item${month}`
    },
    // 滚动也会触发点击 点击触发滚动，所以在滚动里面请求既可
    handleDetailScroll(e){
      this.selectDetail = e.detail.current
      this.selectMonth = e.detail.current + 1
      const date = new Date(this.lastDay)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      if (m === e.detail.current + 1){
        this.searchTime=this.lastDay
      }else{
        let month = e.detail.current + 1
        if (month<10){
          month = '0' + month
        }
        this.searchTime = `${y}-${month}`
      }
      // 拿到列表
      this.getServiceDetail()
      // 拿到卡片详情
      this.handleServiceDetail()
    },
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    async getServiceDetail(){
      let req = {}
      const date = new Date(this.searchTime)
      let y = date.getFullYear()
      let m = date.getMonth() + 1

      const nowDate = new Date(this.lastDay)
      let nowY = nowDate.getFullYear()
      let nowM = nowDate.getMonth() + 1
      if (m === nowM && y === nowY){
        if (m<10){
          m = '0' + m
        }
        req = {
          BUDGETPROJECT_YEAR: y,
          STATISTICS_MONTH:`${y}${m}`,
          SERVERPART_ID:this.serviceId,
          ACCOUNT_CODE:'6001,6401,6402',
          STATISTICS_DATE: this.lastDay
        }
      }else{
        if (m<10){
          m = '0' + m
        }
        req = {
          BUDGETPROJECT_YEAR: y,
          STATISTICS_MONTH:`${y}${m}`,
          SERVERPART_ID:this.serviceId,
          ACCOUNT_CODE:'6001,6401,6402',
        }
      }
      const totalData = await request.$webGet('CommercialApi/Budget/GetBudgetProjectDetailList',req)
      this.detailList = totalData.Result_Data.List
      // 千分号格式化处理数字
      this.detailList.forEach(item=>{
        if (item.children){
          item.children = this.editData(item.children)
          if (item.node.ShowRevenue_Amount){
            item.node.REVENUE_AMOUNT  = item.node.REVENUE_AMOUNT  ? this.$util.fmoney(item.node.REVENUE_AMOUNT ):''
            item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
          }
        }else{
          if (item.node.REVENUE_AMOUNT){
            item.node.REVENUE_AMOUNT  = item.node.REVENUE_AMOUNT  ? this.$util.fmoney(item.node.REVENUE_AMOUNT ):''
            item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
          }else{
            item.node.REVENUE_AMOUNT  = '-'
          }
        }
      })
    },
    // 获取服务区详情信息
    async handleServiceDetail(){
      uni.showLoading({title:'正在加载'})
      let reqTime = ''
      const date = new Date(this.searchTime)
      let y = date.getFullYear()
      let m = date.getMonth() + 1

      const nowDate = new Date(this.lastDay)
      let nowY = nowDate.getFullYear()
      let nowM = nowDate.getMonth() + 1
      if (m === nowM && y === nowY){
        reqTime= this.lastDay
      }else{
        let d = this.$util.getThisMonthDay(this.searchTime)
        reqTime=`${y}-${m}-${d}`
      }
      // 如果是当前月份 传入当前时间 之前月份传入月份的最后一天 之后月份不会显示 不做判断
      let req = {
        Province_Code:'340000',
        Statistics_Date:reqTime,
        Serverpart_ID:this.selectServiceId,
        SPRegionType_ID:this.selectAreaValue
      }
      const data = await request.$webGet('CommercialApi/Revenue/GetRevenueBudget',req)
      this.serviceDetailObj = data.Result_Data
      for (let key in this.serviceDetailObj){
        if (key==='RevenueMonth_Amount' || key==='BudgetMonth_Amount'){
          this.serviceDetailObj[key] = this.$util.fmoney(this.serviceDetailObj[key])
        }
      }
      uni.hideLoading()
    },
    // 点击月份切换月份
    handleSelectMonth(value){
      this.selectMonth = value
      this.selectMonthId = `item${value}`
      this.selectDetail = value - 1
    },
    // 递归处理数据
    editData(value){
      value.forEach(item=>{
        if (item.children){
          item.children = this.editData(item.children)
          if (item.node.ShowRevenue_Amount){
            item.node.REVENUE_AMOUNT  = item.node.REVENUE_AMOUNT  ? this.$util.fmoney(item.node.REVENUE_AMOUNT ) :''
            item.node.BUDGETDETAIL_AMOUNT  = item.node.BUDGETDETAIL_AMOUNT? this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT ) :''
          }
        }else{
          // 下面注释的这句 有的时候可以显示空白内容
          item.children = [{},{},{}]
          if (item.node.REVENUE_AMOUNT){
            item.node.REVENUE_AMOUNT  = item.node.REVENUE_AMOUNT  ? this.$util.fmoney(item.node.REVENUE_AMOUNT ) :''
            item.node.BUDGETDETAIL_AMOUNT  = item.node.BUDGETDETAIL_AMOUNT? this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT ) :''
          }else{
            item.node.REVENUE_AMOUNT  = '-'
          }
        }
      })
      return value
    },
    // 是否显示弹出框
    handleShowPopup(){
      this.showPop = true
    },
    // 弹出框点击蒙层关闭
    hidePopup(){
      this.showPop = false
    },
    // 修改当前选中的片区
    handleChangeArea(item){
      // 选择的片区名称和片区id
      this.selectServiceId = item.value
      this.selectServiceName = item.label.split('服务区')[0]
      // 详情卡片信息接口调用
      this.handleServiceDetail()
      // 服务区详情列表接口调用
      this.getServiceDetail()
      // 关闭弹出框方法
      this.hidePopup()
    },
    async getServiceList(){
      const req = {
        StatisticsDate:this.searchTime,
        ProvinceCode:'340000',
        StatisticsType:4,
        SPRegionTypeID:this.selectAreaValue
      }
      const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
      let list = []
      data.Result_Data.RegionBudgetList.forEach(item=>{
        list.push({label:item.Serverpart_Name,value:item.Serverpart_ID})
      })
      this.serviceList = list
    }
  }
}
</script>
<style scoped lang="scss">
@import '/static/public/font/stylesheet.css';
.main{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .header{
    width: 100%;
    padding-bottom: 32px;
    background: linear-gradient(180deg, #FF6D40 0%, rgba(255,132,91,0.84) 44%, #FFEDBE 100%);
    .top{
      width: 100%;
      position: relative;
      .img{
        width: 24px;
        height: 24px;
        position: absolute;
        left: 16px;
      }
    }
    .pageTitle{
      font-size: 28px;
      font-family: Alimama ShuHeiTi;
      color: #160002;
      line-height: 39px;
      text-shadow: 0  4px 8px rgba(129,36,7,0.2);
      background: linear-gradient(180deg, #FEFFFE 40%, #FFBEAA 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 12px 0 0 16px;
    }
    .monthTabs{
      width: calc(100% - 32px);
      height: 34px;
      border-radius: 17px;
      box-sizing: border-box;
      border: 1px solid #FFA98D;
      background: linear-gradient(180deg, #FC6C3F 0%, #FFAC91 100%);
      overflow: hidden;
      padding: 2px 0;
      margin-top: 16px;
      margin-left: 16px;
      .big{
        width: 100%;
        height: 100%;
        white-space: nowrap;
        .monthItem{
          display: inline-block;
          font-size: 14px;
          padding: 2px 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #FFCFC0;
          line-height: 24px;
          margin-right: 4px;
          text-align: center;
          border-radius: 12px;
        }
        .selectItem{
          background: #fff;
        }
        .monthItem:first-child{
          margin-left: 4px;
        }
      }
    }
    .monthDetailList{
      width: 100%;
      height: 188px;
      margin-top: 12px;
      .swiper{
        width: 100%;
        height: 188px;
        .swiper-item{
          .box{
            width: 100%;
            height: 100%;
            .detail{
              position: relative;
              width: calc(100% - 20px);
              height: 100%;
              background: linear-gradient(314deg, #FFF7E4 0%, #F5F2FF 32%, #FFFAFA 54%, #FFF6F3 70%, #FFE4D9 100%);              margin-left: 10px;
              border-radius: 8px;
              box-sizing: border-box;
              padding: 16px;
              margin-top: 16px;
              z-index: 1;
              .detailLogo{
                width: 97px;
                height: 103px;
                position: absolute;
                z-index:1;
                top: 16px;right: 30px;
                opacity: 0.6;
              }
              .item{
                position: absolute;
                top: 0; left: 0;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 16px;
                z-index: 99;
                .picker{
                  .selectService{
                    display: flex;
                    align-items: center;
                    .img{
                      width: 40px;
                      height: 40px;
                      z-index: 2;
                    }
                    .select{
                      height: 32px;
                      min-width: 110px;
                      background: linear-gradient(270deg, #FFE8DE 0%, #FFDFD1 100%);
                      border-radius: 0 16px 16px 0;
                      transform: translateX(-20px);
                      box-sizing: border-box;
                      padding-left: 25px;
                      display: flex;
                      align-items: center;
                      position: relative;
                      .name{
                        font-size: 14px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #160002;
                      }
                      .area{
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #786B6C;
                        margin-left: 2px;
                      }
                      .rightArrow{
                        position: absolute;
                        right: 2px;
                        width: 24px;
                        height: 12px;
                      }

                    }
                  }
                }
                .itemTop{
                  margin-top: 16px;
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  .left{
                    display: flex;
                    .detailContent{
                      .top{
                        display: flex;
                        align-items: center;
                        margin-bottom: 2px;
                        .money{
                          font-size: 18px;
                          font-family: DINAlternate-Bold, DINAlternate;
                          font-weight: bold;
                          color: #160002;
                          line-height: 24px;
                        }
                        .icon{
                          width: 15px;
                          height: 15px;
                          margin-left: 6px;
                        }
                      }
                      .text{
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #786B6C;
                        line-height: 20px;
                        .unit{
                          font-size: 14px;
                          font-family: PingFangSC-Regular, PingFang SC;
                          font-weight: 400;
                          color: #A69E9F;
                          line-height: 20px;
                          margin-left: 2px;
                        }
                      }
                    }
                  }
                  .right{
                    text-align: right;
                    .add{
                      font-size: 18px;
                      font-family: DINAlternate-Bold, DINAlternate;
                      font-weight: bold;
                      color: #E83944;
                      line-height: 24px;
                    }
                    .compare{
                      font-size: 14px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #A69E9F;
                      line-height: 18px;
                    }
                  }
                }
                .itemBottom{
                  .progress{
                    width: 100%;
                    height: 10px;
                    background: #FBD9CD;
                    border-radius: 5px;
                    position: relative;
                    overflow: hidden;
                    .have{
                      height: 100%;
                      position: absolute;
                      left: 0;
                      top: 0;
                      background: #FF6D40;
                      border-radius: 5px;
                    }
                  }
                  .text{
                    margin-top: 4px;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .success{
                      font-size: 14px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #786B6C;
                      line-height: 20px;
                      .unit{
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #A69E9F;
                        line-height: 20px;
                        margin-left: 2px;
                      }
                    }
                    .target{
                      font-size: 14px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #160002;
                      line-height: 20px;
                    }
                  }
                }
              }
            }
            .noShow{
              height: 151px;
              margin-top: 30px;
            }

          }
        }
      }
    }
  }
  .detail{
    width: 100%;
    transform: translateY(-16px);
    background: #fff;
    border-radius: 16px 16px 2px 2px;
    padding-top: 16px;
    box-sizing: border-box;
    .box{
      width: 100%;
      background: #fff;
      border-radius: 16px 16px 2px 2px;
      box-sizing: border-box;
      padding: 8px 16px 16px;
      position: relative;
      .title{
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 24px;
      }
      .top{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
        position: relative;
        border-bottom: 1px solid #EEEEEE;
        padding-bottom: 16px;
        .icon{
          width: 48px;
          height: 48px;
        }
        .sum{
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          .money{
            font-size: 20px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #160002;
            line-height: 24px;
          }
          .text{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 20px;
            margin-top: 4px;
            .unit{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #A69E9F;
              line-height: 20px;
              margin-left: 2px;
            }
          }
        }
        .meng{
          position: absolute;
          width: 80px;
          height: 80px;
          right: 0;top: -30px;
        }
      }
      .smallTitle{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        margin-bottom: 16px;
        .type{
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #160002;
          line-height: 20px;
          .unit{
            font-weight: 400;
            color: #A69E9F;
            margin-left: 2px;
          }
        }
        .money{
          font-size: 16px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #160002;
          line-height: 20px;
        }
      }
      .subItem{
        margin-bottom: 20px;
        position: relative;
        .link{
          position: absolute;
          left: 12px;top: 24px;
          width: 2px;
          height: 110px;
          background: #E6E6E6;
        }
        .subTop{
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 6px;
          .icon{
            width: 24px;
            height: 24px;
          }
          .text{
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            margin-left: 8px;
            line-height: 24px;
          }
        }
        .subBox{
          width: calc(100vw - 64px);
          height: 80px;
          background: #F5F5F5;
          box-sizing: border-box;
          margin-left: 32px;
          border-radius: 8rpx;
          display: flex;
          .subType,.subTypeNoAfter{
            width: 33%;
            height: 100%;
            box-sizing: border-box;
            padding: 16px 12px;
            position: relative;
            .upper{
              display: flex;
              align-items: center;
              margin-bottom: 16rpx;
              .icon{
                width: 12rpx;
                height: 12rpx;
                border-radius: 50%;
              }
              .subTitle{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 40rpx;
                margin-left: 4px;
              }
              .unit{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 40rpx;
                margin-left: 2px;
              }
            }
            .value{
              font-size: 27rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #160002;
              line-height: 40rpx;
            }
          }
          .subType:after{
            content:'';
            width: 1px;
            height: 50px;
            background: #E6E6E6;
            border-radius: 1px;
            position: absolute;
            right: 0;top: 15px;
          }
          .progress{
            width: 34%;
            height: 100%;
            box-sizing: border-box;
            padding: 16px 10px;
            .reality{
              height: 6px;
              background: #FF7D35;
              border-radius: 4px;
            }
            .plan{
              width: 40px;
              height: 6px;
              background: #FF7D35;
              border-radius: 4px;
              opacity: 0.4;
              margin-top: 4px;
            }
            .add{
              margin-top: 12px;
              display: flex;
              align-items: center;
              .addIcon{
                width: 14px;
                height: 14px;
              }
              .value{
                font-size: 32rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                line-height: 40rpx;
                margin-left: 2px;
              }
            }
          }
        }
      }
    }
  }
  .popup{
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    .top{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .popupTitle{
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 22px;
      }
      .close{
        width: 20px;
        height: 20px;
      }
    }
    .areaList{
      width: 100%;
      height: calc(60vh - 70px);
      margin-top: 12px;
      overflow-y: scroll;
      .item{
        width: 100%;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 20px;
        text-align: left;
        padding:9px 12px;
        box-sizing: border-box;
        .unit{
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #786B6C;
          line-height: 18px;
        }
      }
      .selectItem{
        background: RGBA(243, 235, 255, 0.5);
      }
    }
    .serviceList{
      .tab{
        width: 100%;
        height: 38px;
        background: #F3F1F5;
        border-radius: 4px;
        margin-top: 16px;
        box-sizing: border-box;
        padding: 4px;
        .tabItem{
          display: inline-block;
          width: 50%;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #786B6C;
          line-height: 30px;
        }
        .selectTabItem{
          background: #fff;
          border-radius: 4px;
        }
      }
      .list{
        margin-top: 12px;
        height: calc(78vh - 130px);
        overflow-y: scroll;
        .item{
          display: flex;
          justify-content: space-between;
          .person{
            margin-top: 12px;
            text-align: left;
            .value{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #160002;
              line-height: 20px;
              margin-bottom: 2px;
            }
            .label{
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 18px;
            }
            .icon{
              margin-bottom:-2px;
              width: 16px;
              height: 19px;
            }
          }
        }
      }
    }
    .meetList{
      margin-top: 16px;
      height: calc(60vh - 80px);
      overflow-y: scroll;
      .message{
        display: flex;
        align-items: flex-start;
        .icon{
          width: 16px;
          height: 16px;
          margin-top: 2px;
        }
        .value{
          display: inline-block;
          text-align: left;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #160002;
          line-height: 20px;
          margin-left: 8px;
          width: 90%;
        }
      }
    }
  }
}
</style>
