<template>
  <view class="main">
    <view class="header">
      <view class="top" :style="{height:(menu.bottom + 6)+'px'}">
        <image :style="{top:(menu.top + ((menu.height - 24)/2))+'px'}" @click="handleBack" class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
      </view>
      <view class="message">
        <view class="left">
          <p class="pageTitle">片区月度计划</p>
          <div class="picker">
            <div class="selectService" @click="handleShowPopup">
              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/fixed.svg"></image>
              <view class="select">
                <view class="name">{{selectAreaName}}</view>
                <p class="area">片区</p>
                <div style="width: 24px;height: 12px"></div>
                <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/orangeArrow.svg"></image>
              </view>
            </div>
          </div>
        </view>
        <view class="right">
          <image class="month" :src="monthImgList[selectMonth - 1]"></image>
        </view>
      </view>
    </view>
    <view class="serviceList">
      <view class="tabs">
        <view :class="selectTab===item.value?'tabItem selectItem':'tabItem'" v-for="(item,index) in tabList" :key="index" @click="changeTab(item.value)">{{item.label}}</view>
      </view>
      <view class="list">
          <scroll-view v-if="serviceDetailShowList.length>0"  scroll-y="true" style="width: 100%;height: 100%">
            <view class="listItem" v-for="(item,index) in serviceDetailShowList" :key="index" @click="goPage(item)">
              <view>
                <view class="top">
                  <view class="left">
                    <p class="title">{{item.Serverpart_Name}}</p>
                    <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/orangeArrow.svg"></image>
                  </view>
                  <view class="right">
                    <image class="imgType" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/store.svg"></image>
                    <image class="imgType" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/luggage.svg"></image>
                    <image class="imgType" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/food.svg"></image>
                  </view>
                </view>
                <view class="detail">
                  <view class="left">
                    <p class="money">{{item.Revenue_Amount}}</p>
                    <span class="monthSuccess">本月已完成<span class="unit">/元</span></span>
                  </view>
                  <view class="right">
                    <p class="add" :style="{color:item.Growth_Rate>0?'#E83944':'#049E77'}">{{item.Growth_Rate>0?'+':''}}{{item.Growth_Rate}}%</p>
                    <span class="text">比计划</span>
                  </view>
                </view>
                <view class="progress">
                  <view class="have" :style="{width:item.Budget_Degree + '%'}"></view>
                </view>
                <view class="other">
                  <span class="success">计划完成<span class="unit">/元</span></span>
                  <span class="money">{{item.Budget_Amount}}</span>
                </view>
              </view>
            </view>
          </scroll-view>
          <view class="noData" v-else>
            <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>
            <text>暂无数据</text>
          </view>
      </view>
    </view>
    <uniPopup type="bottom" :round="true" :show="showPop" @hidePopup="hidePopup">
      <view class="popup" :style="{height:selectTab!==2?'60vh':'78vh'}">
        <view class="top">
          <text class="popupTitle">选择片区</text>
          <image @click="hidePopup" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
        </view>
        <view class="areaList">
          <view @click="handleChangeArea(item)" :class="selectAreaValue===item.value?'selectItem item':'item'" v-for="(item,index) in areaList" :key="index">{{item.label}}<text class="unit">片区</text></view>
        </view>
      </view>
    </uniPopup>
  </view>
</template>

<script>
import request from '@/util/index.js'
import uniPopup from '@/components/uni-popup'
import Store from "../../store/store";
export default {
  components:{
    uniPopup
  },
  data(){
    return{
      menu:{},
      monthImgList:[
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month1.svg",
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month2.svg",
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month3.svg",
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month4.svg",
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month5.svg",
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month6.svg",
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month7.svg",
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month8.svg",
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month9.svg",
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month10.svg",
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month11.svg",
          "https://eshangtech.com/ShopICO/ahyd-BID/plan/month12.svg",
      ],// 月份图片数组
      selectMonth:'',
      searchTime:'',// 搜索的时间
      lastDay:'',// 首页时间
      tabList:[{label:'全部服务区',value:1},{label:'高于预期',value:2},{label:'低于预期',value:3}],
      selectTab:1,// 选中的tab
      serviceDetailList:[{},{},{},{},{},{}],
      showPop:false,// 是否显示popup
      selectAreaValue:'',// 选择的片区value
      selectAreaName:'',// 选择的片区名字
      areaList:[],// 片区选择列表
      serviceDetailShowList:[],// 显示在页面上的列表
    }
  },
  onLoad(query){
    // query 里面有片区id  和 searchTime
    console.log('query',query)
    //  获取手机参数对页面进行适配
    this.menu = uni.getMenuButtonBoundingClientRect()
    // 先拿到首页的时间 作为调用接口的统一时间  存的lastDay存当前月份的具体日期切换回本月的日期判断有用
    // 如果有传入的时间 优先使用传入时间 反之用首页的时间
    if (query.search){
      this.searchTime = query.search
    }else{
      this.searchTime = uni.getStorageSync('lastDay')
    }
    this.lastDay = uni.getStorageSync('lastDay')
    const date = new Date(this.searchTime)
    let m = date.getMonth() + 1
    // 设置初始时间
    this.selectMonth = m
    this.selectAreaValue = query.id
    // 拿到片区列表
    this.getAreaList()
    // 获取片区下面的服务区详情
    this.handleAreaMonthPlan()
  },
  methods:{
    // tab选项卡的改变触发筛选数据
    changeTab(value){
      this.selectTab = value
      if (value===1){
        this.serviceDetailShowList = this.serviceDetailList
      }else if (value===2){
        this.serviceDetailShowList = this.serviceDetailList.filter(item=>item.Growth_Rate>0)
      }else if (value===3){
        this.serviceDetailShowList = this.serviceDetailList.filter(item=>item.Growth_Rate<0)
      }
    },
    // 拿到列表数据
    async handleAreaMonthPlan(){
      uni.showLoading({title:'正在加载'})
      const req = {
        StatisticsDate:this.searchTime,
        ProvinceCode:'340000',
        StatisticsType:4,
        SPRegionTypeID:this.selectAreaValue
      }
      const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
      this.serviceDetailList = data.Result_Data.RegionBudgetList
      // 对数组中的实际营收额和计划营收额进行格式化处理
      this.serviceDetailList.forEach(item=>{
        for (let key in item){
          for (let key in item){
            if (key==='Budget_Amount' || key==='Revenue_Amount'){
              item[key] = this.$util.fmoney(item[key])
            }
          }
        }
      })
      // 因为会有筛选 所以要有一个全部的数组 和一个显示的数组
      this.serviceDetailShowList = this.serviceDetailList
      uni.hideLoading()
    },
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    // 是否显示弹出框
    handleShowPopup(){
      this.showPop = true
    },
    // 弹出框点击蒙层关闭
    hidePopup(){
      this.showPop = false
    },
    // 修改当前选中的片区 改变片区之后 重新调用拿到列表的数据
    handleChangeArea(item){
      // 选择的片区名称和片区id
      this.selectAreaValue = item.value
      this.selectAreaName = item.label
      //  切换片区之后 选项卡变为第一项
      this.handleAreaMonthPlan()
      this.selectTab = 1
      // 关闭弹出框方法
      this.hidePopup()
    },
    // 片区列表
    async getAreaList(){
      uni.showLoading({
        title: '正在加载...'
      })
      const total = await request.$webGet(`CommercialApi/BaseInfo/GetSPRegionList`,{Province_Code:Store.state.userData.ProvinceCode})
      uni.hideLoading()
      if (total.Result_Code===100){
        let list = []
        total.Result_Data.List.forEach(item=>{
          list.push({label:item.name.split('片区')[0],value:item.value})
        })
        this.areaList = list
        this.areaList.forEach(item=>{
          if (item.value === this.selectAreaValue){
            this.selectAreaValue = item.value
            this.selectAreaName = item.label
          }
        })
      }
    },
    // 点击跳转详情页
    goPage(item){
      this.$util.toNextRoute('navigateTo', '/pages/plan/servicePlanMonth?id='+item.Serverpart_ID+'&search='+this.searchTime+'&obj=' + JSON.stringify(item) +'&selectAreaValue='
      +this.selectAreaValue)
    }
  }
}
</script>

<style scoped lang="scss">
@import '/static/public/font/stylesheet.css';
.main{
  width: 100%;
  height: 100vh;
  .header{
    width: 100%;
    height: 222px;
    background: linear-gradient(180deg, #FF6D40 0%, rgba(255,132,91,0.84) 44%, #FFEDBE 100%);;
    .top{
      width: 100%;
      position: relative;
      .img{
        width: 24px;
        height: 24px;
        position: absolute;
        left: 16px;
      }
    }
    .message{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .left{
        .pageTitle{
          font-family: Alimama ShuHeiTi;
          color: #160002;
          font-size: 28px;
          line-height: 39px;
          text-shadow: 0 4px 8px rgba(129,36,7,0.2);
          background: linear-gradient(180deg, #ffffff 40%, #FFBEAA 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin: 12px 0 0 16px;
        }
        .picker{
          margin: 20px 0 0 16px;
          .selectService{
            display: flex;
            align-items: center;
            .img{
              width: 40px;
              height: 40px;
              z-index: 2;
            }
            .select{
              height: 32px;
              min-width: 110px;
              background: #F8F8FA;
              border-radius: 0 16px 16px 0;
              transform: translateX(-20px);
              box-sizing: border-box;
              padding-left: 25px;
              display: flex;
              align-items: center;
              position: relative;
              .name{
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
              }
              .area{
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                margin-left: 2px;
              }
              .rightArrow{
                position: absolute;
                right: 2px;
                width: 24px;
                height: 12px;
              }

            }
          }
        }
      }
      .right{
        height: 100%;
        margin: 0 16px 0 0;
        .month{
          width: 110px;
          height: 98px;
        }
      }
    }

  }
  .serviceList{
    width: 100%;
    height: calc(100vh - 212px);
    background: #fff;
    transform: translateY(-16px);
    border-radius: 16px 16px 2px 2px;
    box-sizing: border-box;
    padding: 16px 16px 0 16px;
    .tabs{
      width: 100%;
      height: 38px;
      background: #F4F2F2;
      border-radius: 4px;
      display: flex;
      box-sizing: border-box;
      padding: 4px;
      .tabItem{
        width: calc((100vw - 16px) / 3);
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #786B6C;
      }
      .selectItem{
        color: #FF6D40;
        background: #fff;
        border-radius: 4px;
      }
    }
    .list{
      width: 100%;
      height: calc(100% - 66px);
      margin-top: 12px;
      ::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}
      .listItem{
        width: 100%;
        background: linear-gradient(314deg, #FFF7E4 0%, #F5F2FF 32%, #FFFAFA 54%, #FFF6F3 70%, #FFE4D9 100%);
        border-radius: 8px;
        margin-bottom: 12px;
        box-sizing: border-box;
        padding: 16px;
        .top{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left{
            display: flex;
            align-items: center;
            .title{
              font-size: 18px;
              font-family: Alimama ShuHeiTi;
              color: #611A04;
              line-height: 26px;
            }
            .icon{
              width: 14px;
              height: 14px;
              margin-left: 7px;
            }
          }
          .right{
            display: flex;
            align-items: center;
            .imgType{
              width: 24px;
              height: 24px;
              margin-right: 8px;
            }
            .imgType:last-child{
              margin-right: 0;
            }
          }
        }
        .detail{
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          .left{
            .money{
              font-size: 20px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #160002;
              line-height: 24px;
            }
            .monthSuccess{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 20px;
              .unit{
                color: #A69E9F;
                margin-left: 2px;
              }
            }
          }
          .right{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .add{
              font-size: 24px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #049E77;
              line-height: 24px;
              margin-bottom: 2px;
            }
            .text{
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #A69E9F;
              line-height: 18px;
            }
          }
        }
        .progress{
          width: 100%;
          height: 10px;
          border-radius: 5px;
          margin-top: 18px;
          background: #FBD9CD;
          position: relative;
          overflow: hidden;
          .have{
            height: 100%;
            position: absolute;
            left: 0;top: 0;
            background: #FF6D40;
            border-radius: 5px;
          }
        }
        .other{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 4px;
          .success{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 20px;
            .unit{
              color: #A69E9F;
              margin-left: 2px;
            }
          }
          .money{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 20px;
          }
        }
      }
      .noData{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .img{
          width: 80px;
          height: 80px;
        }
      }
    }
  }
  .popup{
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    .top{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .popupTitle{
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 22px;
      }
      .close{
        width: 20px;
        height: 20px;
      }
    }
    .areaList{
      width: 100%;
      height: calc(60vh - 70px);
      margin-top: 12px;
      overflow-y: scroll;
      .item{
        width: 100%;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 20px;
        text-align: left;
        padding:9px 12px;
        box-sizing: border-box;
        .unit{
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #786B6C;
          line-height: 18px;
        }
      }
      .selectItem{
        background: RGBA(243, 235, 255, 0.5);
      }
    }
    .serviceList{
      .tab{
        width: 100%;
        height: 38px;
        background: #F3F1F5;
        border-radius: 4px;
        margin-top: 16px;
        box-sizing: border-box;
        padding: 4px;
        .tabItem{
          display: inline-block;
          width: 50%;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #786B6C;
          line-height: 30px;
        }
        .selectTabItem{
          background: #fff;
          border-radius: 4px;
        }
      }
      .list{
        margin-top: 12px;
        height: calc(78vh - 130px);
        overflow-y: scroll;
        .item{
          display: flex;
          justify-content: space-between;
          .person{
            margin-top: 12px;
            text-align: left;
            .value{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #160002;
              line-height: 20px;
              margin-bottom: 2px;
            }
            .label{
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 18px;
            }
            .icon{
              margin-bottom:-2px;
              width: 16px;
              height: 19px;
            }
          }
        }
      }
    }
    .meetList{
      margin-top: 16px;
      height: calc(60vh - 80px);
      overflow-y: scroll;
      .message{
        display: flex;
        align-items: flex-start;
        .icon{
          width: 16px;
          height: 16px;
          margin-top: 2px;
        }
        .value{
          display: inline-block;
          text-align: left;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #160002;
          line-height: 20px;
          margin-left: 8px;
          width: 90%;
        }
      }
    }
  }
}
</style>
