<template>
  <div class="main">
      <div class="listBox" v-if="type==='year'">
          <div class="list">
              <div class="top">
                  <div class="left">
                      <p class="title"><text class="name">{{month}}</text>月</p>

                      <div class="value" >{{info.Budget_Degree}}%</div>
                  </div>
                  <div class="right">
                      <text class="comparePlan">比计划： </text>
                      <div class="box2">
                          <image class="addIcon" :src="Number(info.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">{{info.Growth_Rate ?info.Growth_Rate + '%':''}}</p>
                      </div>
                  </div>
              </div>
              <div class="progress">
                  <div class="have" :style="{width:info.Budget_Degree  + '%'}"></div>
              </div>
              <div class="bottom">
                  <div class="success">
                      <p>已完成:</p>
                      <text class="money">{{info.Revenue_Amount}}</text>
                  </div>
                  <div class="success">
                      <p>计划: </p>
                      <text class="money">{{info.Budget_Amount}}</text>
                  </div>
              </div>
          </div>
          <div class="list" v-for="(item,index) in dataList" :key="index">
              <div class="top">
                  <div class="left">
                      <p class="title" v-if="type==='year'"><text class="name">{{item.name}}</text>{{item.unit}}</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?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>已完成:</p>
                      <text class="money">{{item.Revenue_Amount}}</text>
                  </div>
                  <div class="success">
                      <p>计划: </p>
                      <text class="money">{{item.Budget_Amount }}</text>
                  </div>
              </div>
          </div>
      </div>
      <div class="listBox" v-if="type==='month'">
          <div class="list">
              <div class="top">
                  <div class="left">
                      <p class="title"><text class="name">{{item.name}}</text>{{item.unit}}</p>
                      <div class="value" >{{info.Budget_Degree}}%</div>
                  </div>
                  <div class="right">
                      <text class="comparePlan">比计划： </text>
                      <div class="box2">
                          <image class="addIcon" :src="Number(info.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">{{info.Growth_Rate ?info.Growth_Rate + '%':''}}</p>
                      </div>
                  </div>
              </div>
              <div class="progress">
                  <div class="have" :style="{width:info.Budget_Degree  + '%'}"></div>
              </div>
              <div class="bottom">
                  <div class="success">
                      <p>已完成:</p>
                      <text class="money">{{info.Revenue_Amount}}</text>
                  </div>
                  <div class="success">
                      <p>计划: </p>
                      <text class="money">{{info.Budget_Amount}}</text>
                  </div>
              </div>
          </div>
          <div class="list" v-for="(item,index) in dataList" :key="index">
              <div class="top">
                  <div class="left">
                      <p class="title" ><text class="name">{{item.name}}</text>{{item.unit}}</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?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>已完成:</p>
                      <text class="money">{{item.Revenue_Amount}}</text>
                  </div>
                  <div class="success">
                      <p>计划: </p>
                      <text class="money">{{item.Budget_Amount }}</text>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import request from '@/util/index.js'
export default {
    name: "planDetail",
    data(){
        return{
            date:'', //时间
            type:'', //类别
            dataList:[],
            id:'',
            info:{},
            month:0,//传入的月份
            item:{}//月份的时候传入的整个片区信息
        }
    },
    onLoad(option){
        console.log('option',option)
        this.type = option.type
        if (option.id){
            this.id =option.id
        }
        this.month = Number(option.month)
        let date = new Date()
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        let d = date.getDate()
        if (m<10){
            m = '0'+m
        }
        if (d<10){
            d = '0' + d
        }
        if (option.month){
            if (m === Number(option.month)){
                this.date = `${y}-${m}-${d}`
            }else{
                //月份不是当前月
                let mayDate = `${y}-${option.month}`
                let addDay = this.$util.getThisMonthDay(mayDate)
                this.date = `${y}-${option.month}-${addDay}`
            }
        }
        if (option.item){
            this.item = JSON.parse(option.item)
        }

        this.getDateList()
    },
    onShow(){
        if (this.type==='year'){
            //每个月片区的列表
            uni.setNavigationBarTitle({
                title: `${this.month}月自营计划`,
            })
        }else{
            //片区进来服务区的列表
            uni.setNavigationBarTitle({
                title: `${this.item.Serverpart_Name}本月自营计划`,
            })
        }

    },
    methods:{
        async getDateList(){
            if (this.type==='year'){
                let req = {
                    StatisticsDate:this.date,
                    ProvinceCode:'340000',
                    StatisticsType:1
                }
                const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
                data.Result_Data.RegionBudgetList.forEach(item=>{
                    let num = item.Serverpart_Name.indexOf('片区')
                    console.log(num)
                    if (num!==-1){
                        item.name = item.Serverpart_Name.slice(0,num)
                        item.unit = item.Serverpart_Name.slice(num,100)
                    }else{
                        item.name = item.Serverpart_Name
                    }
                    item.Revenue_Amount = this.$util.fmoney(item.Revenue_Amount)
                    item.Budget_Amount = this.$util.fmoney(item.Budget_Amount)
                })
                this.info = data.Result_Data
                this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
                this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
                this.dataList = data.Result_Data.RegionBudgetList

                console.log('data',data)
            }else{
                let time = uni.getStorageSync('lastDay')
                let req = {
                    StatisticsDate:time,
                    ProvinceCode:'340000',
                    StatisticsType:4,
                    SPRegionTypeID:this.id
                }
                const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
                data.Result_Data.RegionBudgetList.forEach(item=>{
                    let num = item.Serverpart_Name.indexOf('服务区')
                    console.log(num)
                        if (num!==-1){
                            item.name = item.Serverpart_Name.slice(0,num)
                            item.unit = item.Serverpart_Name.slice(num,100)
                        }else{
                            item.name = item.Serverpart_Name
                        }
                        item.Revenue_Amount = this.$util.fmoney(item.Revenue_Amount)
                        item.Budget_Amount = this.$util.fmoney(item.Budget_Amount)
                })
                this.info = data.Result_Data
                this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
                this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
                this.dataList = data.Result_Data.RegionBudgetList

                console.log('data',data)
            }
        }
    }
}
</script>

<style scoped lang="scss">
.main{
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 0 16px;
  .listBox{
    width: 100%;
    box-sizing: border-box;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) ;
    .list{
      width: 100%;
      box-sizing: border-box;
      padding: 12px;
      background: #F5F5F5;
      margin-bottom: 12px;
      .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: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #150002;
            line-height: 20px;
            .name{
              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:#FF8E5B
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        .success {
          width: calc(50% - 4px);
          display: flex;
          p{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #a69e9f;
            line-height: 18px;
          }
          .money {
            margin-left: 8px;
            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #160002;
            line-height: 20px;

          }
        }
      }
    }

  }
}
</style>
