<template>
  <div class="main">
      <div class="top">
          <p class="title" v-if="type==='month'">{{serviceInfo.name}}服务区自营计划</p>
          <p class="title" v-if="type==='year'">{{serviceInfo.name}}服务区年度自营计划</p>
          <div class="select">
              <picker mode="date" fields="month" :value="single" :end="endData"  @change="bindDateChange" >
                  <view class="time">
                      <view class="uni-input"  style="background: transparent;padding: 0;height:100%">{{ single }}</view>
                      <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>
                  </view>
              </picker>
          </div>
      </div>
      <view class="box" v-if="type==='month'">
          <view class="top">
              <view class="big">
                  <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
              </view>
              <view class="text">
                  <view class="textTop">
                      <view class="left">
                          <p class="number">{{serviceInfo.Budget_Degree?serviceInfo.Budget_Degree + '%':'-'}}</p>
                          <p v-if="serviceInfo.Budget_Degree>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>
                      </view>
                      <view class="right">
                          <text class="comparePlan">比计划： </text>
                          <view class="box2">
                              <image class="addIcon" :src="Number(serviceInfo.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                              <p class="text">{{serviceInfo.Growth_Rate ?Math.abs(serviceInfo.Growth_Rate) + '%':'-'}}</p>
                          </view>
                      </view>
                  </view>
                  <div class="progressPlan">
                      <div class="trans" :style="{width:serviceInfo.Budget_Degree > 100 ? '100%' : serviceInfo.Budget_Degree + '%'}"></div>
                  </div>
              </view>
          </view>
          <view class="bottom">
              <view class="success" style="margin-right: 39px">
                  <p class="text">本月已完成<text class="unit">/元</text></p>
                  <p class="money">{{serviceInfo.Revenue_Amount ?serviceInfo.Revenue_Amount :'-'}}</p>
              </view>
              <view class="success">
                  <p class="text">本月计划<text class="unit">/元</text></p>
                  <p class="money">{{serviceInfo.Budget_Amount ?serviceInfo.Budget_Amount :'-'}}</p>
              </view>
          </view>
      </view>

      <view class="box" v-if="type==='year'">
          <view class="top">
              <view class="big">
                  <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>
              </view>
              <view class="text">
                  <view class="textTop">
                      <view class="left">
                          <p class="number">{{serviceInfo.Budget_Degree?serviceInfo.Budget_Degree + '%':'-'}}</p>
                          <p v-if="serviceInfo.Budget_Degree>=100" class="desc" style="color: #4E68FF"><image class="success" src="/static/images/index/yearSuccess.svg"></image></p>
                      </view>
                      <view class="right">
                          <text class="comparePlan">比计划： </text>
                          <div class="box2">
                              <image class="addIcon" :src="Number(serviceInfo.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                              <p class="text">{{serviceInfo.Growth_Rate?Math.abs(serviceInfo.Growth_Rate) + '%':''}}</p>
                          </div>
                      </view>
                  </view>
                  <div class="progressPlan">
                      <div class="transYear" :style="{width:serviceInfo.Budget_Degree + '%'}"></div>
                      <!--                  <image class="img" :style="{width: plan.percentageYear + '%'}"  src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png"></image>-->
                      <!--                  <div class=pro :style="{width:(100 - plan.percentageYear)+ '%'}"></div>-->
                  </div>
              </view>
          </view>
          <view class="bottom">
              <view class="success" style="margin-right: 39px">
                  <p class="text">年度已完成<text class="unit">/元</text></p>
                  <p class="money">{{serviceInfo.Revenue_Amount?serviceInfo.Revenue_Amount:'-'}}</p>
              </view>
              <view class="success">
                  <p class="text">年度计划<text class="unit">/元</text></p>
                  <p class="money">{{serviceInfo.Budget_Amount?serviceInfo.Budget_Amount:'-'}}</p>
              </view>
          </view>
      </view>
      <p class="title" style="margin-top: 12px">{{month}}月预算完成度</p>
      <div class="list" v-if="type==='month'" >
        <div class="item" >
          <!--  三级遍历数组展示  -->
          <div class="firstBox" v-for="(item,index) in dataList" :key="index" >

            <div class="valueBox" v-if="item.node.ShowRevenue_Amount" style="display: flex;justify-content: space-between">
              <p  class="firstTitle">{{item.node.ACCOUNT_CODE}}</p>
              <div>
                <p v-if="item.node.BUDGETDETAIL_AMOUNT"  class="value" style="color:#a69e9f">{{item.node.BUDGETDETAIL_AMOUNT?item.node.BUDGETDETAIL_AMOUNT:''}}<text v-if="item.node.BUDGETDETAIL_AMOUNT!=='-'" style="margin-left: 4px;color:#a69e9f">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="item.node.BUDGETDETAIL_AMOUNT!=='-'" class="type" style="margin-left: 4px">(计划)</text></p>
                <p  class="value">{{item.node.REVENUE_AMOUNT?item.node.REVENUE_AMOUNT:'-' }}<text v-if="item.node.REVENUE_AMOUNT" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="item.node.REVENUE_AMOUNT" class="type" style="margin-left: 4px">(实际)</text></p>
                <view class="addBox" v-if="item.node.ShowGrowth_Rate">
                  <image class="addIcon" :src="item.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':item.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
                  <p class="text" style="margin-left: 4px">{{item.node.Growth_Rate?Math.abs(item.node.Growth_Rate) + '%':'-'}}</p>
                  <text class="type" style="margin-left: 4px">{{item.node.Growth_Rate>0?'(提升)':item.node.Growth_Rate<0?'(降低)':''}}</text>
                </view>
              </div>
            </div>

            <text  class="firstTitle" v-if="!item.node.ShowRevenue_Amount ">{{item.node.ACCOUNT_CODE}}</text>

            <div class="valueBox" v-if="item.node.BUDGETDETAIL_AMOUNT && !item.node.ShowRevenue_Amount">
              <p class="value" style="color:#a69e9f">{{item.node.BUDGETDETAIL_AMOUNT }}<text style="margin-left: 4px;color:#a69e9f">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text class="type" style="margin-left: 4px">(计划)</text></p>
              <p class="value" v-if="item.node.ShowGrowth_Rate">{{item.node.REVENUE_AMOUNT?item.node.REVENUE_AMOUNT:'-'  }}<text v-if="item.node.REVENUE_AMOUNT!=='-'" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="item.node.REVENUE_AMOUNT!=='-'" class="type" style="margin-left: 4px">(实际)</text></p>
              <view class="addBox" v-if="item.node.ShowGrowth_Rate">
                <image class="addIcon" :src="item.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':item.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
                <p class="text" style="margin-left: 4px">{{item.node.Growth_Rate?Math.abs(item.node.Growth_Rate) + '%':'-' }}</p>
                <text class="type" style="margin-left: 4px">{{item.node.Growth_Rate>0?'(提升)':item.node.Growth_Rate<0?'(降低)':'-'}}</text>
              </view>
            </div>

            <div v-if="item.children.length>0" class="subBox" v-for="(subItem,subIndex) in item.children" :key="subIndex"
                 :style="subItem.children?'':'display:flex;justify-content: space-between'">

              <div class="valueBox" v-if="subItem.node.ShowRevenue_Amount" style="display: flex;justify-content: space-between">
                <p  class="subTitle">{{subItem.node.ACCOUNT_CODE}}</p>
                <div >
                  <p v-if="subItem.node.BUDGETDETAIL_AMOUNT" class="value" style="color:#a69e9f">{{subItem.node.BUDGETDETAIL_AMOUNT?subItem.node.BUDGETDETAIL_AMOUNT:''}}<text v-if="subItem.node.BUDGETDETAIL_AMOUNT!=='-'" style="margin-left: 4px;color:#a69e9f">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="subItem.node.BUDGETDETAIL_AMOUNT!=='-'" class="type" style="margin-left: 4px">(计划)</text></p>
                  <p  class="value">{{subItem.node.REVENUE_AMOUNT?subItem.node.REVENUE_AMOUNT:'-' }}<text v-if="subItem.node.REVENUE_AMOUNT" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="subItem.node.REVENUE_AMOUNT" class="type" style="margin-left: 4px">(实际)</text></p>
                  <view class="addBox" v-if="subItem.node.ShowGrowth_Rate">
                    <image class="addIcon" :src="subItem.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':subItem.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
                    <p class="text" style="margin-left: 4px">{{subItem.node.Growth_Rate?Math.abs(subItem.node.Growth_Rate) + '%':'-'}}</p>
                    <text class="type" style="margin-left: 4px">{{subItem.node.Growth_Rate>0?'(提升)':subItem.node.Growth_Rate<0?'(降低)':''}}</text>
                  </view>
                </div>
              </div>

              <p  class="subTitle" v-if="!subItem.node.ShowRevenue_Amount ">{{subItem.node.ACCOUNT_CODE}}</p>

              <div class="valueBox" v-if="subItem.node.BUDGETDETAIL_AMOUNT && !subItem.node.ShowRevenue_Amount">
                <p class="value" style="color:#a69e9f">{{subItem.node.BUDGETDETAIL_AMOUNT?subItem.node.BUDGETDETAIL_AMOUNT:''}}<text v-if="subItem.node.BUDGETDETAIL_AMOUNT!=='-'" style="margin-left: 4px;color:#a69e9f">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="subItem.node.BUDGETDETAIL_AMOUNT!=='-'" class="type" style="margin-left: 4px">(计划)</text></p>
                <p v-if="subItem.node.ShowGrowth_Rate" class="value">{{subItem.node.REVENUE_AMOUNT?subItem.node.REVENUE_AMOUNT:'-' }}<text v-if="subItem.node.REVENUE_AMOUNT" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="subItem.node.REVENUE_AMOUNT" class="type" style="margin-left: 4px">(实际)</text></p>

                <view class="addBox" v-if="subItem.node.ShowGrowth_Rate">
                  <image class="addIcon" :src="subItem.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':subItem.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
                  <p class="text" style="margin-left: 4px">{{subItem.node.Growth_Rate?Math.abs(subItem.node.Growth_Rate) + '%':'-'}}</p>
                  <text class="type" style="margin-left: 4px">{{subItem.node.Growth_Rate>0?'(提升)':subItem.node.Growth_Rate<0?'(降低)':''}}</text>
                </view>
              </div>

              <div v-if="subItem.children.length>0" class="thirdBox" v-for="(thirdItem,thirdIndex) in subItem.children" :key="thirdIndex">
                <text class="thirdTitle">{{thirdItem.node.ACCOUNT_CODE}}</text>

                <div class="valueBox" v-if="thirdItem.node.BUDGETDETAIL_AMOUNT">
                  <p class="value" style="color:#a69e9f">{{thirdItem.node.BUDGETDETAIL_AMOUNT}}<text style="margin-left: 4px;color:#a69e9f" v-if="thirdItem.node.BUDGETDETAIL_AMOUNT!=='-'">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="thirdItem.node.BUDGETDETAIL_AMOUNT!=='-'" class="type" style="margin-left: 4px">(计划)</text></p>
                  <p class="value" v-if="thirdItem.node.ShowGrowth_Rate">{{thirdItem.node.REVENUE_AMOUNT?thirdItem.node.REVENUE_AMOUNT:'-' }}<text v-if="thirdItem.node.REVENUE_AMOUNT" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="thirdItem.node.REVENUE_AMOUNT" class="type" style="margin-left: 4px">(实际)</text></p>

                  <view class="addBox" v-if="thirdItem.node.ShowGrowth_Rate">
                    <image class="addIcon" :src="thirdItem.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':thirdItem.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
                    <p class="text" style="margin-left: 4px">{{thirdItem.node.Growth_Rate?Math.abs(thirdItem.node.Growth_Rate) + '%':'-'}}</p>
                    <text class="type" style="margin-left: 4px">{{thirdItem.node.Growth_Rate>0?'(提升)':thirdItem.node.Growth_Rate<0?'(降低)':''}}</text>
                  </view>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="margin-top: 12px">
          <div v-if="type==='year'" class="monthList" v-for="(item,index) in dataList" :key="index"  @click="handleYearItem(item)">
              <div class="top">
                  <div class="left">
                      <p class="title" ><text class="name">{{item.Statistics_Month}}</text>月</p>
                      <div class="value" >{{item.Budget_Degree}}%</div>
                  </div>
                  <div class="right">
                      <text class="comparePlan">比计划： </text>
                      <div class="box2">
                          <image class="addIcon" :src="Number(item.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                          <p class="text">{{item.Growth_Rate?Math.abs(item.Growth_Rate) + '%':''}}</p>
                      </div>
                  </div>
              </div>
              <div class="progress">
                  <div class="have" :style="{width:item.Budget_Degree  + '%'}"></div>
              </div>
              <div class="bottom">
                  <div class="success">
                      <p class="text">已完成:</p>
                      <text class="money">{{item.Revenue_Amount}}</text>
                  </div>
                  <div class="success">
                      <p class="text">计划: </p>
                      <text class="money">{{item.Budget_Amount }}</text>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import request from '@/util/index.js'
export default {
    name: "serviceDetail",
    data(){
        return{
          serviceInfo:{},
          month:'',
          dataList:[],
          single:'',//显示时间
          endData:'',//截止日期
          type:'',
          isSelect:false,
            optionTime:''
        }
    },
    onLoad(option){
        console.log('option',option)
        if (option.select){
            this.isSelect = true
        }
        if (option.type === 'month'){
            this.type = option.type
            if (option.month){
                this.optionTime = option.month
                this.month = option.month
            }
            if (!this.month){
                const date = new Date()
                this.month = date.getMonth() + 1
            }
            if (this.month<10){
                this.month = '0' + this.month
            }
            this.serviceInfo = JSON.parse(option.serviceInfo)
            this.serviceInfo.Budget_Degree =this.$util.fmoney(this.serviceInfo.Budget_Degree)
            this.getData()
        }else {
            this.type = option.type
            this.serviceInfo = JSON.parse(option.serviceInfo)
            this.getYearData()
        }

    },
    onShow(){
        if (this.type === 'month'){
            uni.setNavigationBarTitle({
                title: `${this.month}月${this.serviceInfo.SERVERPART_NAME || this.serviceInfo.Serverpart_Name}计划`,
            })
        }else{
            uni.setNavigationBarTitle({
                title: `${this.serviceInfo.SERVERPART_NAME || this.serviceInfo.Serverpart_Name}年度计划`,
            })
        }
        if (this.month){
            const date = new Date()
            let y =  date.getFullYear()
            let time = `${y}-${this.month}`
            this.single = this.$util.getThisMonthHave(time)
        }else{
            let storeTime = uni.getStorageSync('lastDay')
            if (storeTime){
                this.time = storeTime
            }
            this.single = this.$util.getThisMonthHave(this.time)
        }

        let nowTime = new Date()
        let y = nowTime.getFullYear()
        let month = nowTime.getMonth() + 1
        if (month<10){
            month = '0'+ month
        }
        // 结束月份 给时间选择器
        this.endData = `${y}-${month}`
    },
    methods:{
        handleYearItem(item){
            let currentService = uni.getStorageSync('currentService')
            let service = {
                Budget_Amount:item.Budget_Amount,
                Budget_Degree:item.Budget_Degree,
                Growth_Rate:item.Growth_Rate,
                Revenue_Amount:item.Revenue_Amount,
                Serverpart_ID:currentService.Serverpart_ID,
                Serverpart_Name:currentService.SERVERPART_NAME
            }
            let num = service.Serverpart_Name.indexOf('服务区')
            if (num!==-1){
                service.name = service.Serverpart_Name.slice(0,num)
                service.unit = service.Serverpart_Name.slice(num,100)
            }else{
                service.name = service.Serverpart_Name
            }
            let month = item.Statistics_Month
            uni.navigateTo({
                url:`/pages/commercialBI/serviceDetail?serviceInfo=${JSON.stringify(service)}&month=${month}&type=month`
            })
        },
        // 时间选择器改变的时间
        bindDateChange(e){
            const date = new Date(e.detail.value)
            let m = date.getMonth() + 1
            if (m<10){
                m = '0' + m
            }
            this.month = m
            this.single = e.detail.value
            let d = this.$util.getThisMonthDay(e.detail.value)
            this.endTime = e.detail.value + '-' + d
            this.getData(e.detail.value)
            //修改顶部服务区数据的方法
            this.getServiceDate(e.detail.value)
            if (this.type === 'month'){
                uni.setNavigationBarTitle({
                    title: `${this.month}月${this.serviceInfo.SERVERPART_NAME || this.serviceInfo.Serverpart_Name}计划`,
                })
            }else{
                uni.setNavigationBarTitle({
                    title: `${this.serviceInfo.SERVERPART_NAME || this.serviceInfo.Serverpart_Name}年度计划`,
                })
            }
        },
        // 获取服务区信息
        async getServiceDate(time){
          let reqTime
          let date = new Date(time)
          let currentDate = new Date()
          let nowMonth = currentDate.getMonth() + 1
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          if (m === nowMonth){
              let nowYear = currentDate.getFullYear()
              let nodDay = currentDate.getDate()
              if (nowMonth<10){
                  nowMonth = '0' + nowMonth
              }
              if (nodDay<10){
                  nodDay = '0' + nodDay
              }
              reqTime = `${nowYear}-${nowMonth}-${nodDay}`
          }else{
              let howDay = this.$util.getThisMonthDay(time)
              if (m<10){
                  m = '0' + m
              }
              reqTime = `${y}-${m}-${howDay}`
          }
          let req = {
              Province_Code:'340000',
              Statistics_Date:reqTime,
              Serverpart_ID:this.serviceInfo.Serverpart_ID,
              SPRegionType_ID:this.serviceInfo.SPRegionType_ID
          }
          const data = await request.$webGet('CommercialApi/Revenue/GetRevenueBudget',req)

          let service = {
             Budget_Amount:this.$util.fmoney(data.Result_Data.BudgetMonth_Amount),
             Budget_Degree:data.Result_Data.MonthBudget_Degree,
             Growth_Rate:data.Result_Data.MonthGrowth_Rate,
             Revenue_Amount:this.$util.fmoney(data.Result_Data.RevenueMonth_Amount),
             Serverpart_ID:this.serviceInfo.Serverpart_ID,
             Serverpart_Name:this.serviceInfo.Serverpart_Name
          }
            let num = service.Serverpart_Name.indexOf('服务区')
            if (num!==-1){
                service.name = service.Serverpart_Name.slice(0,num)
                service.unit = service.Serverpart_Name.slice(num,100)
            }else{
                service.name = service.Serverpart_Name
            }
          this.serviceInfo = service
        },
        async getYearData(){
          let storeServiceInfo = uni.getStorageSync('currentService')
          let lastDay = uni.getStorageSync('lastDay')
          let req = {
              StatisticsDate: lastDay,
              ProvinceCode:'340000',
              StatisticsType:3,
              SPRegionTypeID:storeServiceInfo.SPRegionType_ID,
              ServerpartID:storeServiceInfo.Serverpart_ID
          }
          const totalData = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
          this.dataList = totalData.Result_Data.RegionBudgetList
        },
        async getData(changeTime){
            let time = uni.getStorageSync('lastDay')
            let  date = ''
            if (changeTime){
              date = new Date(changeTime)
            }else{
                date = new Date(time)
            }
            const nowDate = new Date()
            let nowMonth = nowDate.getMonth() + 1
            let y = date.getFullYear()
            let m = this.month
            let req = {}
            if (nowMonth === Number(m) ){
                req = {
                    BUDGETPROJECT_YEAR: y,
                    STATISTICS_MONTH:`${y}${m}`,
                    SERVERPART_ID:this.serviceInfo.Serverpart_ID,
                    ACCOUNT_CODE:'6001,6401,6402',
                    STATISTICS_DATE: time
                }
            }else{
                let reqDate
                let m
                if (changeTime){
                    reqDate = new Date(changeTime)
                    m = reqDate.getMonth() + 1
                    if (m<10){
                        m = '0' + m
                    }
                }else{
                    reqDate = new Date()
                    m = this.month
                }
                let y  = reqDate.getFullYear()
                req = {
                    BUDGETPROJECT_YEAR: y,
                    STATISTICS_MONTH: `${y}${m}`,
                    SERVERPART_ID:this.serviceInfo.Serverpart_ID,
                    ACCOUNT_CODE:'6001,6401,6402',
                }
            }
            const totalData = await request.$webGet('CommercialApi/Budget/GetBudgetProjectDetailList',req)
            this.dataList = totalData.Result_Data.List
            // 千分号格式化处理数字
            this.dataList.forEach(item=>{
                if (item.children){
                    item.children = this.editData(item.children)
                    if (item.node.ShowRevenue_Amount){
                        item.node.BUDGETDETAIL_AMOUNT = item.node.BUDGETDETAIL_AMOUNT ? this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT):''
                        item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
                    }
                }else{
                    if (item.node.BUDGETDETAIL_AMOUNT){
                        item.node.BUDGETDETAIL_AMOUNT = item.node.BUDGETDETAIL_AMOUNT ? this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT):''
                        item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
                    }else{
                        item.node.BUDGETDETAIL_AMOUNT = '-'
                    }
                }
            })
            // 强制刷新 感觉没用 放一下保险
            this.$forceUpdate()
        },
        // 递归处理数据
        editData(value){
            value.forEach(item=>{
                if (item.children){
                    item.children = this.editData(item.children)
                    if (item.node.ShowRevenue_Amount){
                        item.node.BUDGETDETAIL_AMOUNT = item.node.BUDGETDETAIL_AMOUNT ? this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT) :''
                        item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
                    }
                }else{
                    if (item.node.BUDGETDETAIL_AMOUNT){
                        item.node.BUDGETDETAIL_AMOUNT = item.node.BUDGETDETAIL_AMOUNT ? this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT) :''
                        item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
                    }else{
                        item.node.BUDGETDETAIL_AMOUNT = '-'
                    }
                }
            })
            return value
        }
    }
}
</script>

<style scoped lang="scss">
.main{
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 0 16px;
    .title{
        font-size: 32rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
    }
    .top{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title{
            font-size: 32rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #160002;
        }
        .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;
                }
            }
        }
    }

    .box {
        width: 100%;
        padding: 12px 16px;
        box-sizing: border-box;
        border-radius: 8px;
        background: #f5f2f2;
        margin-top: 12px;
        .top {
            width: 100%;
            display: flex;
            .big {
                width: 40px;
                height: 40px;
                background: #ffffff;
                border-radius: 8px;
                border: 1px solid #ebebeb;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 8px;
                .icon {
                    width: 20px;
                    height: 20px;
                }
            }
            .text {
                width: calc(100% - 60px);
                padding: 2px 0;
                .textTop{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .left{
                        display: flex;
                        align-items: center;
                        .number {
                            font-size: 36rpx;
                            font-family: DINAlternate-Bold, DINAlternate;
                            font-weight: bold;
                            color: #150002;
                            line-height: 40rpx;
                        }
                        .desc{
                            display: flex;
                            align-items: center;
                            margin-left: 8px;
                            font-size: 14px;
                            color: #FF7043;
                            .success{
                                width: 20px;
                                height: 20px;
                                margin-right: 4px;
                            }
                        }
                    }
                    .right{
                        flex: 1;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        .comparePlan{
                            font-size: 24rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #a69e9f;
                            line-height: 36rpx;
                            white-space: nowrap;
                        }
                        .box2{
                            display: flex;
                            align-items: center;
                            .text{
                                font-size: 14px;
                                font-family: DINAlternate-Bold, DINAlternate;
                                color: #150002;
                                font-weight: bold;

                                line-height: 40rpx;
                            }
                            .addIcon {
                                width: 16px;
                                height: 16px;
                                margin-right: 2px;
                            }
                        }
                    }
                }

                .progressPlan{
                    width: 100%;
                    height: 8px;
                    border-radius: 5px;
                    background: #fff;
                    margin-top: 8px;
                    position: relative;
                    overflow: hidden;
                    .trans{
                        height: 8px;
                        position: absolute;
                        left: 0;top: 0;
                        border-top-right-radius: 4px;
                        border-bottom-right-radius: 4px;
                        background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
                    }
                    .transYear{
                        height: 8px;
                        position: absolute;
                        left: 0;top: 0;
                        border-top-right-radius: 4px;
                        border-bottom-right-radius: 4px;
                        background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
                    }
                    //.img{
                    //  width: 100%;
                    //  height: 100%;
                    //  position: absolute;
                    //  top: 0;
                    //  left: 0;
                    //  z-index:1;
                    //}
                    //.pro{
                    //  height: 100%;
                    //  position: absolute;
                    //  top: 0;right: 0;
                    //  background: #fff;
                    //  z-index:2;
                    //}

                }
            }
        }
        .bottom {
            display: flex;
            margin-top: 16px;
            padding-left: 48px;
            .success {
                .text {
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786b6c;
                    line-height: 40rpx;
                    margin-bottom: 2px;
                    .unit {
                        font-size: 28rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #a69e9f;
                        line-height: 40rpx;
                        margin-left: 2px;
                    }
                }
                .money {
                    font-size: 28rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: 600;
                    color: #160002;
                    line-height: 40rpx;
                }
            }
        }
    }
    .list{
      margin-top: 12px;
      padding-bottom: 12px;
        .item{
            width: 100%;
            box-sizing: border-box;
            padding: 12px;
            background: #F5F5F5;
            margin-bottom: 12px;
            border-radius: 8px;
            .bigTitle{
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #a69e9f;
                .name{
                    color: #150002;
                    font-size: 18px;
                }
            }
            .firstBox{
                margin-top: 8px;
              .valueBox{
                display: inline-block;
                text-align: right;
                .firstTitle{
                  display: inline-block;
                  width: 180px;
                  font-size: 16px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #160002;
                  line-height: 22px;
                  text-align: left;
                }
                .addBox{
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  .addIcon {
                    width: 16px;
                    height: 16px;
                    margin-right: 2px;
                  }
                  .type{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #a69e9f;
                    line-height: 18px;
                    white-space: nowrap;
                  }
                }
                .value{
                  font-size: 14px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  color: #160002;
                  line-height: 22px;
                  padding-left: 10px;
                  .type{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #a69e9f;
                    line-height: 18px;
                    white-space: nowrap;
                  }
                }
              }
              .firstTitle{
                display: inline-block;
                width: 180px;
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 22px;
              }
              .boxTop{
                display: flex;
                justify-content: space-between;
                .firstTitle{
                  display: inline-block;
                  width: 180px;
                  font-size: 16px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #160002;
                  line-height: 22px;
                }
                .amount{
                  display: inline-block;
                  text-align: right;
                  .addBox{
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    .addIcon {
                      width: 16px;
                      height: 16px;
                      margin-right: 2px;
                    }
                    .type{
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #a69e9f;
                      line-height: 18px;
                      white-space: nowrap;
                    }
                  }
                  .value{
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    color: #160002;
                    line-height: 22px;
                    padding-left: 10px;
                    .type{
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #a69e9f;
                      line-height: 18px;
                      white-space: nowrap;
                    }
                  }
                }
              }

                .valueBox{
                    display: inline-block;
                    text-align: right;
                    .addBox{
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        .addIcon {
                            width: 16px;
                            height: 16px;
                            margin-right: 2px;
                        }
                        .type{
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #a69e9f;
                            line-height: 18px;
                            white-space: nowrap;
                        }
                    }
                    .value{
                        font-size: 14px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        color: #160002;
                        line-height: 22px;
                        padding-left: 10px;
                        .type{
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #a69e9f;
                            line-height: 18px;
                            white-space: nowrap;
                        }
                    }
                }
                .subBox{
                    margin-top: 4px;
                  .valueBox{
                    display: inline-block;
                    text-align: right;
                    .subTitle{
                      font-size: 14px;
                      font-family: PingFangSC-Semibold, PingFang SC;
                      font-weight: 600;
                      color: #160002;
                      line-height: 22px;
                      padding-left: 10px;
                      display: inline-block;
                      width: 120px;
                      text-align: left;
                    }
                    .addBox{
                      display: flex;
                      align-items: center;
                      justify-content: flex-end;
                      .addIcon {
                        width: 16px;
                        height: 16px;
                        margin-right: 2px;
                      }
                      .type{
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #a69e9f;
                        line-height: 18px;
                        white-space: nowrap;
                      }
                    }
                    .value{
                      font-size: 14px;
                      font-family: PingFangSC-Semibold, PingFang SC;
                      color: #160002;
                      line-height: 22px;
                      padding-left: 10px;
                      .type{
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #a69e9f;
                        line-height: 18px;
                        white-space: nowrap;
                      }
                    }
                  }
                  .subTitle{
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 22px;
                    padding-left: 10px;
                    display: inline-block;
                    width: 120px;
                  }
                  .boxTop{
                    display: flex;
                    justify-content: space-between;
                    .subTitle{
                      font-size: 14px;
                      font-family: PingFangSC-Semibold, PingFang SC;
                      font-weight: 600;
                      color: #160002;
                      line-height: 22px;
                      padding-left: 10px;
                      display: inline-block;
                      width: 120px;
                    }

                  }

                    .thirdBox{
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 8px;
                      .thirdTitle{
                        font-size: 12px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #160002;
                        line-height: 22px;
                        padding-left: 30px;
                        display: inline-block;
                        width: 130px;
                      }
                      .boxTop{
                        display: flex;
                        justify-content: space-between;
                        .thirdTitle{
                          font-size: 12px;
                          font-family: PingFangSC-Semibold, PingFang SC;
                          font-weight: 600;
                          color: #160002;
                          line-height: 22px;
                          padding-left: 30px;
                          display: inline-block;
                          width: 130px;
                        }
                        .amount{
                          display: inline-block;
                          text-align: right;
                          .addBox{
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            .addIcon {
                              width: 16px;
                              height: 16px;
                              margin-right: 2px;
                            }
                            .type{
                              font-size: 12px;
                              font-family: PingFangSC-Regular, PingFang SC;
                              font-weight: 400;
                              color: #a69e9f;
                              line-height: 18px;
                              white-space: nowrap;
                            }
                          }
                          .value{
                            font-size: 14px;
                            font-family: PingFangSC-Semibold, PingFang SC;
                            color: #160002;
                            line-height: 22px;
                            padding-left: 10px;
                            .type{
                              font-size: 12px;
                              font-family: PingFangSC-Regular, PingFang SC;
                              font-weight: 400;
                              color: #a69e9f;
                              line-height: 18px;
                              white-space: nowrap;
                            }
                          }
                        }
                      }

                        .valueBox{
                            display: inline-block;
                            text-align: right;
                            .addBox{
                                display: flex;
                                align-items: center;
                                justify-content: flex-end;
                                .addIcon {
                                    width: 16px;
                                    height: 16px;
                                    margin-right: 2px;
                                }
                                .type{
                                    font-size: 12px;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #a69e9f;
                                    line-height: 18px;
                                    white-space: nowrap;
                                }
                            }
                            .value{
                                font-size: 14px;
                                font-family: PingFangSC-Semibold, PingFang SC;
                                color: #160002;
                                line-height: 22px;
                                padding-left: 10px;
                                .type{
                                    font-size: 12px;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #a69e9f;
                                    line-height: 18px;
                                    white-space: nowrap;
                                }
                            }
                        }
                        .top{
                            display: flex;
                            align-items: center;
                            .thirdTitle{
                                font-size: 12px;
                                font-family: PingFangSC-Semibold, PingFang SC;
                                font-weight: 600;
                                color: #160002;
                                line-height: 22px;
                                padding-left: 30px;
                            }
                            .right{
                                flex: 1;
                                display: flex;
                                justify-content: flex-end;
                                align-items: center;
                                .comparePlan{
                                    font-size: 24rpx;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #a69e9f;
                                    white-space: nowrap;
                                }
                                .box2{
                                    display: flex;
                                    align-items: center;
                                    .text{
                                        font-size: 14px;
                                        font-family: DINAlternate-Bold, DINAlternate;
                                        color: #150002;
                                        font-weight: bold;

                                        line-height: 40rpx;
                                    }
                                    .addIcon {
                                        width: 16px;
                                        height: 16px;
                                        margin-right: 2px;
                                    }
                                }
                            }
                        }
                        .progressPlan{
                            width: calc(100% - 30px);
                            box-sizing: border-box;
                            margin-left: 30px;
                            height: 8px;
                            border-radius: 5px;
                            background: #fff;
                            margin-top: 8px;
                            position: relative;
                            overflow: hidden;
                            .trans{
                                height: 8px;
                                position: absolute;
                                left: 0;top: 0;
                                border-top-right-radius: 4px;
                                border-bottom-right-radius: 4px;
                                background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
                            }
                            .transYear{
                                height: 8px;
                                position: absolute;
                                left: 0;top: 0;
                                border-top-right-radius: 4px;
                                border-bottom-right-radius: 4px;
                                background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
                            }
                        }
                    }
                }
            }
        }
    }
    .monthList{
        width: 100%;
        box-sizing: border-box;
        padding: 12px;
        background: #F5F5F5;
        margin-bottom: 12px;
        border-radius: 8px;
        .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                display: flex;
                align-items: center;
                .icon{
                    width: 20px;
                    height: 20px;
                    margin-right: 8px;
                }
                .title{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #a69e9f;
                    line-height: 18px;
                    .name{
                        color: #150002;
                        font-size: 18px;
                    }
                }
                .value{
                    font-size: 14px;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #FF6D40;
                    line-height: 16px;
                    margin-left: 4px;
                }
            }
            .right{
                display: flex;
                align-items: center;
                .comparePlan{
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #a69e9f;
                    line-height: 36rpx;
                    white-space: nowrap;
                }
                .box2{
                    display: flex;
                    align-items: center;
                    .text{
                        font-size: 14px;
                        font-family: DINAlternate-Bold, DINAlternate;
                        color: #150002;
                        font-weight: bold;

                        line-height: 40rpx;
                    }
                    .addIcon {
                        width: 16px;
                        height: 16px;
                        margin-right: 2px;
                    }
                }
            }

        }
        .progress{
            width: 100%;
            height: 8px;
            background: #fff;
            border-radius: 6px;
            margin: 8px 0 16px;
            position: relative;
            overflow: hidden;
            .have{
                position: absolute;
                height: 100%;
                border-radius: 6px;
                top: 0;left: 0;
                background:#778CFD;
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 16px;
            .success {
                width: calc(50% - 4px);
                display: flex;
                align-items: center;
                .text{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #a69e9f;
                    line-height: 20px;
                }
                .money {
                    margin-left: 8px;
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #a69e9f;
                    line-height: 20px;
                }
            }
        }
    }
}
</style>
