<template>
  <div class="main">
      <div class="listBox" v-if="type==='year'">
        <div class="thisMonth">
          <div class="titleTop">
            <p class="title">{{month}}月自营计划</p>
            <div class="question" @click="handleShowNotice">
              <image src="/static/images/index/noticeQuestion.svg"></image>
            </div>
            <div v-if="showNotice" class="titleTopNotice">{{monthText}}</div>
            <div v-if="showNotice" class="meng" @click="handleNoShowNotice"></div>
          </div>
          <view class="box">
            <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">{{info.Budget_Degree?info.Budget_Degree + '%':'-'}}</p>
                    <p v-if="info.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(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 ?Math.abs(info.Growth_Rate) + '%':'-'}}</p>
                    </view>
                  </view>
                </view>
                <div class="progressPlan">
                  <div class="trans" :style="{width:info.Budget_Degree > 100 ? '100%' : info.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">{{info.Revenue_Amount ?info.Revenue_Amount :'-'}}</p>
              </view>
              <view class="success">
                <p class="text">本月计划<text class="unit">/元</text></p>
                <p class="money">{{info.Budget_Amount ?info.Budget_Amount :'-'}}</p>
              </view>
            </view>
          </view>
        </div>
          <div class="list" v-for="(item,index) in dataList" :key="index" @click="handleDetail(item)">
              <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?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">
                      <text class="text">已完成:</text>
                      <text class="money">{{item.Revenue_Amount}}</text>
                  </div>
                  <div class="success">
                      <text class="text">计划: </text>
                      <text class="money">{{item.Budget_Amount }}</text>
                  </div>
              </div>
          </div>
      </div>
      <div class="listBox" v-if="type==='month'">
        <div class="thisMonth">
          <div class="titleTop">
            <p class="title">{{item.Serverpart_Name}}自营计划</p>
            <div class="question" @click="handleShowNotice">
              <image src="/static/images/index/noticeQuestion.svg"></image>
            </div>
            <div v-if="showNotice" class="titleTopNotice">{{itemText}}</div>
            <div v-if="showNotice" class="meng" @click="handleNoShowNotice"></div>
          </div>
          <view class="box">
            <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">{{info.Budget_Degree?info.Budget_Degree + '%':'-'}}</p>
                    <p v-if="info.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(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 ?Math.abs(info.Growth_Rate) + '%':'-'}}</p>
                    </view>
                  </view>
                </view>
                <div class="progressPlan">
                    <div class="trans" :style="{width:info.Budget_Degree > 100 ? '100%' : info.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">{{info.Revenue_Amount ?info.Revenue_Amount :'-'}}</p>
              </view>
              <view class="success">
                <p class="text">本月计划<text class="unit">/元</text></p>
                <p class="money">{{info.Budget_Amount ?info.Budget_Amount :'-'}}</p>
              </view>
            </view>
          </view>
        </div>
          <div class="list" v-for="(item,index) in dataList" :key="index" @click="handleToServiceDetail(item)">
              <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?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: "planDetail",
    data(){
        return{
            date:'', //时间
            type:'', //类别
            dataList:[],
            id:'',
            showNotice:false,
            showNoticeYear:false,
            info:{},
            month:0,//传入的月份
            item:{},//月份的时候传入的整个片区信息
            itemText:'',//片区显示的文字
            monthText:'',//月份显示的文字
            lastDay:'',
            second:false
        }
    },
    onLoad(option){
      // 从缓存中拿到选中的时间
      this.lastDay = uni.getStorageSync('lastDay')
      // 判断是否是第二次进入页面，因为月份的片区 再点进去展示的月份的服务区 需要的参数会不一样
      if (option.second==='true'){
        this.second = true
      }
      // 拿到上一个页面带来的参数
      this.type = option.type
      if (option.id){
         this.id =option.id
      }
      // 拿到传入的月份
        this.month = Number(option.month)
        // 取全局的时间
        let date = new Date(this.lastDay)
        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 (Number(m) === Number(option.month)){
                this.date = `${y}-${m}-${d}`
            }else{
                let month
                if (this.month<10){
                    month = '0' + this.month
                }else{
                    month = this.month
                }
                //月份不是当前月
                let mayDate = `${y}-${month}`
                let addDay = this.$util.getThisMonthDay(mayDate)
                this.date = `${mayDate}-${addDay}`
            }
        }
        // 直接把上一个页面点进的片区属性全部拿来
      if (option.item){
          this.item = JSON.parse(option.item)
      }
      // 如果是第二次进入 那么调用的方法也不一样 做个判断 因为显示的列表类型会不一样
      if (option.second==='true'){
        this.getDateSecond()
      }else{
        this.getDateList()
      }
      // 拿到问号里面的文字
      this.handleNoticeText()
    },
    onShow(){
        // 判断让小程序页面标题展示相应的名字
      if (this.second){
        uni.setNavigationBarTitle({
          title: `${this.month}月${this.item.Serverpart_Name}自营计划`,
        })
      }else{
        if (this.type==='year'){
          //每个月片区的列表
          uni.setNavigationBarTitle({
            title: `${this.month}月自营计划`,
          })
        }else{
          //片区进来服务区的列表
          uni.setNavigationBarTitle({
            title: `${this.item.Serverpart_Name}本月自营计划`,
          })
        }
      }
    },
    onUnload() {
        this.$util.addUserBehavior()
    },
    methods:{
        // 跳转到服务区详情
      handleToServiceDetail(item){
          uni.navigateTo({
              url:`/pages/commercialBI/serviceDetail?serviceInfo=${JSON.stringify(item)}&month=${this.month?this.month:''}&type=month&select=true`
          })
      },
      async getDateSecond(){
        let req = {
          StatisticsDate:this.date,
          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('服务区')
          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
      },
        // 当从年份点进来的时候 片区列表的每一项都可以再次点击 进入到当月的 这个片区下的服务区的列表数据
      handleDetail(item){
        uni.navigateTo({
          url:`/pages/commercialBI/planDetail?type=month&item=${JSON.stringify(item)}&id=${item.Serverpart_ID}&second=${true}&month=${this.month}`
        })
      },
      async handleNoticeText(){
        let date = new Date(this.lastDay)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        if(m<10){
          m = '0'+m
        }
        let req = {}
        if (this.type==='year'){
          req = {
            SearchParameter:{
              STATISTICS_DATE:`${m}`,
              ANALYSISINS_TYPE:'1012',
              ANALYSISINS_FORMAT:'3000'
            },
            PageIndex:1,
            PageSize:10
          }
        }else{
          req = {
            SearchParameter:{
              STATISTICS_DATE:`${y}-${m}`,
              ANALYSISINS_TYPE:'1011',
              ANALYSISINS_FORMAT:'3000',
              SPREGIONTYPE_ID:this.item.Serverpart_ID
            },
            PageIndex:1,
            PageSize:10
          }
        }
        const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
        this.monthText = data.Result_Data.List[0].ANALYSIS_CONTENT
        this.itemText = data.Result_Data.List[0].ANALYSIS_CONTENT
      },
      handleShowNotice(){
        this.showNotice = true
      },
      handleNoShowNotice(){
        this.showNotice = false
      },
      handleShowNoticeYear(){
        this.showNoticeYear = true
      },
      handleNoShowNoticeYear(){
        this.showNoticeYear = false
      },
      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('片区')
                  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
          }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('服务区')
                  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
          }
      }
    }
}
</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)) ;
    .thisMonth{
      margin-bottom: 12px;
      .titleTop{
        display: flex;
        align-items: center;
        position: relative;
        .title {
          font-size: 32rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #160002;
          line-height: 44rpx;
        }
        .question{
          width: 16px;
          height: 16px;
          margin-left: 4px;
          display: flex;
          align-items: center;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .titleTopNotice{
          position: absolute;
          padding: 12px;
          left:35%;
          top: 0;
          width: 50vw;
          background: #FFFFFF;
          box-shadow: 0 10px 10px 0 rgba(22,0,2,0.1);
          z-index: 9999;
        }
        .meng{
          width: 100vw;
          height: 100vh;
          position: fixed;
          top: 0;left: 0;
        }
      }
      .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{
      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:#FF8E5B
        }
      }
      .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>
