<template>
  <div class="main">
      <div class="thisMonth" v-if="type==='month'">
          <div class="titleTop">
              <p class="title">本月自营计划</p>
              <div class="question" @click="handleShowNotice">
                  <image src="/static/images/index/noticeQuestion.svg"></image>
              </div>
              <div v-if="showNotice" class="titleTopNotice">{{monthNoticeText}}</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 ?info.Growth_Rate + '%':'-'}}</p>
                              </view>
                          </view>
                      </view>
                      <div class="progressPlan">
                          <div class="trans" :style="{width: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="thisYear" style="margin-top: 0px" v-if="type==='year'">
          <div class="titleTop">
              <p class="title">年度自营计划</p>
              <div class="question" @click="handleShowNoticeYear">
                  <image src="/static/images/index/noticeQuestion.svg"></image>
              </div>
              <div v-if="showNoticeYear" class="titleTopNotice">{{yearNoticeText}}</div>
              <div v-if="showNoticeYear" class="meng" @click="handleNoShowNoticeYear"></div>
          </div>
          <view class="box">
              <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">{{info.Budget_Degree?info.Budget_Degree + '%':'-'}}</p>
                              <p v-if="info.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(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>
                          </view>
                      </view>
                      <div class="progressPlan">
                          <div class="transYear" :style="{width:info.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">{{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="listBox">
          <div class="list" v-for="(item,index) in dataList" :key="index" @click="handleGoDetail(item)">
              <div class="top">
                  <div class="left">
                      <p class="title" v-if="type==='month'"><text class="name">{{item.name}}</text>{{item.unit}}</p>
                      <p class="title" v-if="type==='year'"><text class="name">{{item.Statistics_Month}}</text>月</p>
                      <div class="value" :style="{color:type==='year'?'#4962FF':''}">{{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  + '%',background: type==='month'?'#FF8E5B':'#778CFD'}"></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>
</template>

<script>
import request from '@/util/index.js'
export default {
    name: "planMonth",
    data(){
        return {
            plan:{},
            monthAdd:'',
            yearAdd:'',
            lastDay:'',
            type:'month',
            showNotice:false,
            showNoticeYear:false,
            dataList:[],
            info:{
                Budget_Degree:0,
                Growth_Rate:0,
                Budget_Amount:'',
                Revenue_Amount:''
            },
          monthNoticeText:'',
          yearNoticeText:''
        }
    },

    onLoad(option){
        // 拿到点进来的时间
        this.lastDay = option.lastDay
        // 判断是从年份还是月份点进
        this.type = option.type
        if (this.type==='month'){
            uni.setNavigationBarTitle({
                title: '本月自营计划',
            })
        }else if(this.type==='year'){
            uni.setNavigationBarTitle({
                title: '年度自营计划',
            })
        }
        uni.showLoading({
            title: '正在加载...'
        })
        // 方法传入type用于结果的判断
        this.getPlanListData(option.type)
        // 问号显示的内容
        this.handleNoticeMonth()
        this.handleNoticeYear()
    },
    methods:{
      async handleNoticeMonth(){
        let date = new Date(this.lastDay)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        if(m<10){
          m = '0'+m
        }
        //本月的
        let req = {
          SearchParameter:{
            STATISTICS_DATE:`${y}-${m}`,
            ANALYSISINS_TYPE:'1011',
            ANALYSISINS_FORMAT:'3000'
          },
          PageIndex:1,
          PageSize:10
        }
        const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
        this.monthNoticeText = data.Result_Data.List[0].ANALYSIS_CONTENT


      },
      async handleNoticeYear(){
        let date = new Date(this.lastDay)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        if(m<10){
          m = '0'+m
        }
        //本年
        let reqYear = {
          SearchParameter:{
            STATISTICS_DATE:`${y}`,
            ANALYSISINS_TYPE:'1012',
            ANALYSISINS_FORMAT:'3000'
          },
          PageIndex:1,
          PageSize:10
        }
        const totalData = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',reqYear)
        this.yearNoticeText =  totalData.Result_Data.List[0].ANALYSIS_CONTENT
      },
        //跳转到详情页
        handleGoDetail(item){
            console.log('item',item)
            if (this.type==='year'){
                uni.navigateTo({
                    url:`/pages/commercialBI/planDetail?type=${this.type}&month=${item.Statistics_Month}`
                })
            }else{
                uni.navigateTo({
                    url:`/pages/commercialBI/planDetail?type=${this.type}&item=${JSON.stringify(item)}&id=${item.Serverpart_ID}`
                })
            }

        },
        async getPlanListData(type){
            let req = {
                StatisticsDate:this.lastDay,
                ProvinceCode:'340000',
                StatisticsType:type==='month'?1:type==='year'?2:''
            }
            const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
            console.log('data',data)
            uni.hideLoading()
            data.Result_Data.RegionBudgetList.forEach(item=>{
                if (type==='month'){
                    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
        },
        handleShowNotice(){
            this.showNotice = true
        },
        handleNoShowNotice(){
            this.showNotice = false
        },
        handleShowNoticeYear(){
            this.showNoticeYear = true
        },
        handleNoShowNoticeYear(){
            this.showNoticeYear = false
        },
    }
}
</script>

<style scoped lang="scss">
.main{
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
    .thisMonth,.thisYear{
        width: 100%;
        margin-top: 12px;
        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;
                    }
                }
            }
        }
    }
    .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;
                    .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;
                }
            }
            .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>
