<template>
  <view class="main">
    <view class="meng" v-if="showMeng" @click="handleAllNotice"></view>
    <view class="header">
      <view class="headerTop" :style="{height:(menu.top+menu.height) + 'px'}">
        <image @click="handleBack" class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
        <text class="pageTitle">收入详情</text>
      </view>

      <view class="detailType" :style="{top:(menu.bottom + 18) + 'px'}">
        <picker :range="typeList" :value="typeValue" range-key="label" @change="handleChangeType">
          <span class="typeText">{{ typeList[typeValue].label }}</span>
          <image class="downIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/4stDownArrow.svg"/>
        </picker>
        <view class="timeBox" >
          <picker mode="date" fields="month" :value="single" :start="startDate" :end="endData" @change="bindDateChange" >
            <text class="timeText">{{single}}</text>
            <image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/4stDownArrow.svg"/>
          </picker>
        </view>
      </view>

      <view class="incomeTab" :style="{top:(menu.bottom + 60) + 'px'}">
        <view :class="selectTab===item.value?'selectItem incomeItem':'incomeItem'" v-for="(item,index) in pageTab" :key="index"
        @click="handleChangePageTab(item.value)">{{item.label}}</view>
      </view>
    </view>

    <view class="contentDetail">
      <view class="detailItem" v-for="(item,index) in pageList" :key="index">
        <view class="itemTop">
          <view class="titleTop">
            <view class="itemTitle">{{item.itemTitle}}</view>
            <view class="notice" @click="handleShowNotice(index)">?</view>
            <view class="noticeBox" v-if="firstIndex===index && item.list[typeValue].length>0" @click="handleCancelNotice">
              <view v-for="(subItem,subIndex) in item.list[typeValue]" :key="subIndex">
                <view class="noticeTitle">{{subItem.name}}</view>
                <view class="noticeItem">
                  <span class="noticeLabel">本月预算:</span>
                  <span class="noticeValue">{{subItem.budgetMonth?$util.fmoney(subItem.budgetMonth,2):'-'}}万元</span>
                </view>
                <view class="noticeItem">
                  <span class="noticeLabel">本月执行:</span>
                  <span class="noticeValue">{{subItem.monthExecute?$util.fmoney(subItem.monthExecute,2):'-'}}万元</span>
                </view>
                <view class="noticeItem">
                  <span class="noticeLabel">年度预算:</span>
                  <span class="noticeValue">{{subItem.budgetYear?$util.fmoney(subItem.budgetYear,2):'-'}}万元</span>
                </view>
                <view class="noticeItem">
                  <span class="noticeLabel">累计执行:</span>
                  <span class="noticeValue">{{subItem.accumulateExecute?$util.fmoney(subItem.accumulateExecute,2):'-'}}万元</span>
                </view>
              </view>
            </view>
          </view>
          <image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/allInCome.png"/>
          <view class="itemBox">
            <view class="progressBox">
              <view class="progressTop">
                <span class="progressLabel">本月占比:</span>
                <span class="progressValue">{{`${item.monthRate||'-'}`}}</span>
              </view>
              <view class="progress">
                <view class="have" :style="{width:item.monthRate}"></view>
              </view>
            </view>

            <view class="progressBox" style="margin-top: 12px">
              <view class="progressTop">
                <span class="progressLabel">累计完成进度占比:</span>
                <span class="progressValue">{{`${item.accumulateRate||'-'}`}}</span>
              </view>
              <view class="progress">
                <view class="have" :style="{width:item.accumulateRate>100?'100%':`${item.accumulateRate}`}"></view>
              </view>
            </view>
          </view>

          <view class="listBox">
            <view class="listBoxItem" v-for="(subItem,subIndex) in item.list[typeValue]" :key="subIndex">
              <view class="subItemTop">
                <view class="index" :style="{background:`url(${subIndex===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/secondBg.svg':subIndex===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherBg.svg'})`}">{{subIndex + 1}}</view>
                <span class="subItemName">{{subItem.name}}</span>
              </view>
              <view class="subItemBottom" v-if="subItem.monthRate || subItem.accumulateRate">
                <view class="bottomItem">
                  <span v-if="subItem.monthRate" class="bottomLabel">本月占比:</span>
                  <span v-if="subItem.monthRate" class="bottomValue">{{`${subItem.monthRate||'-'}`}}</span>
                </view>
                <view class="bottomItem" style="text-align: right">
                  <span v-if="subItem.accumulateRate" class="bottomLabel">累计占比:</span>
                  <span v-if="subItem.accumulateRate" class="bottomValue">{{`${subItem.accumulateRate||'-'}`}}</span>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>
<script>
import OtherCharts from './component/otherCharts.vue'
import inComeData from './data'
import request from '@/util/index.js'
export default {
  components:{OtherCharts},
  data(){
    return {
      windowHeight: null,
      statusBarHeight: null,
      menu:{},
      number:0,
      pageTab:[{label:'自营收入',value:1},{label:'其他收入',value:2}],
      selectTab: 0,
      typeList:[{label:'按告警情况排序',value:0},
        {label:'按累计完成进度占比数排序',value:1},
        {label:'按本月完成进度占比数排序',value:2},
        {label:'按年度计划预算数值排序',value:3}],
      typeValue: 3,
      pageData: {},// 页面数据
      pageList: [],// 页面遍历的数据
      single:'', // 时间选择器选择的时间
      month:'',// 当前月份
      startDate:'',// 开始时间
      endData:'', // 结束时间
      firstIndex: null,// 第一层索引
      secondIndex: null,// 第二层索引
      showMeng: false,// 页面最大的蒙层
      // selectType:0,// 1是自营 2是其他
    }
  },
  onLoad(query){
    console.log('query',query)
    this.selectTab = Number(query.type)

    const date = new Date()
    let y = date.getFullYear()
    let m = date.getMonth()+1
    this.thisYear = y
    this.startDate = `${y}-07`
    this.endData = `${y}-10`
    this.single =  `${y}-${Number(query.month)}`

    if (query.month){
      this.month = Number(query.month)
      this.handleGetPageData()
      // inComeData.forEach(item=>{
      //   if (item.month === Number(query.month)){
      //     this.pageData = item
      //     this.pageList = this.selectTab===1?item.supportList:item.otherList
      //   }
      // })
    }
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync()
    this.windowHeight = systemInfo.windowHeight
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()
    let _this = this
    setTimeout(()=>{
      _this.number = 40
    },100)
  },
  methods:{
    // 返回按钮的方法
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    handleChangePageTab(value){
      this.selectTab = value
      this.pageList = this.selectTab===1?this.pageData.supportList:this.pageData.otherList
      console.log('this.pageList',this.pageList)
    },
    // 改变类型的方法
    handleChangeType(e){
      this.typeValue = Number(e.detail.value)
    },
    // 修改时间的事件
    bindDateChange(e){
      this.single = e.detail.value
      const date = new Date(this.single)
      const y = date.getMonth() + 1
      this.month = y
      this.handleGetPageData()
    },
    // 显示提示框
    handleShowNotice(index){
      this.firstIndex = index
      this.showMeng = true
    },
    // 取消显示提示框
    handleCancelNotice(){
      this.firstIndex = null
      this.showMeng = false
    },
    // 关闭页面最大的蒙层
    handleAllNotice(){
      this.showMeng = false
      this.firstIndex = null
    },
    // 拿到页面数据的方法
    async handleGetPageData(){
      uni.showLoading({
        title:'正在加载'
      })
      const date = new Date(this.single)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      if (m<10){
        m = '0'+m
      }
      const req = {
        Month:`${y}${m}`
      }
      const data = await request.$webGetTest('EShangApiMain/Budget/GetbudgetProjectReportInDynamic',req)
      console.log('data',data)
      this.pageData = data.Result_Data
      this.pageList = this.selectTab===1?data.Result_Data.supportList:data.Result_Data.otherList
      console.log('this.pageList',this.pageList)
      uni.hideLoading()
    }
  }
}
</script>

<style scoped lang="scss">
//@import '/static/public/font/stylesheet.css';
.main{
  width: 100%;
  min-height: 100vh;
  .meng{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;left: 0;
    z-index: 20;
  }
  .header{
    width: 100%;
    height: 420rpx;
    background: linear-gradient(180deg, #FFE6C2 0%, rgba(255,230,194,0) 100%);
    .headerTop{
      width: 100%;
      position: fixed;
      display: flex;
      align-items: flex-end;
      z-index: 99;
      background: linear-gradient(180deg, #FFE6C2 0%, #FAECD9 100%);
      .backIcon{
        width: 48rpx;
        height: 48rpx;
        margin-left: 32rpx;
      }
      .pageTitle{
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #202020;
        line-height: 56rpx;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .detailType{
      width: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 32rpx;
      .typeText{
        font-size: 32rpx;
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        color: #783F0F;
        line-height: 68rpx;
      }
      .downIcon{
        width: 12px;
        height: 12px;
        margin-left: 8px;
      }
      .timeBox{
        display: flex;
        align-items: center;
        .timeText{
          font-size: 32rpx;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          color: #783F0F;
          line-height: 68rpx;
        }
        .timeIcon{
          margin-left: 6px;
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
    .incomeTab{
      width: 100%;
      position: absolute;
      left: 0;
      box-sizing: border-box;
      padding-left: 24rpx;
      .incomeItem{
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 40rpx;
        padding: 24rpx 26rpx;
        background: #FFFFFF;
        border: 1rpx solid #FFD4AF;
        display: inline-block;
        border-radius: 8rpx;
        margin-right: 16rpx;
      }
      .selectItem{
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #DC6500;
        line-height: 40rpx;
        background: linear-gradient(360deg, #FFEFDC 0%, #FEFFFE 100%);
        box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(235,190,152,0.3);
        border: 1rpx solid #FFD4AF;
        position: relative;
      }
      .selectItem:after{
        content:'';
        width: 32rpx;
        height: 32rpx;
        background: #FFF0DF;
        position: absolute;
        bottom: -18rpx;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        border-right: 1rpx solid #FFD4AF;
        border-bottom: 1rpx solid #FFD4AF;
      }
    }
  }
  .contentDetail{
    width: calc(100% - 64rpx);
    margin-left: 32rpx;
    .detailItem{
      width: 100%;
      background: #FEFFFF;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 4rpx;
      margin-bottom: 24rpx;
      .itemTop{
        width: 100%;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        background: linear-gradient(180deg, #FEF4E6 0%,  #FDFAF4 100%);
        border-radius: 12rpx 12rpx 0rpx 0rpx;
        position: relative;
        .titleTop{
          display: flex;
          align-items: center;
          .notice{
            margin-left: 8rpx;
            width: 12px;
            height: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #A69E9F;
            border-radius: 50%;
            color: #A69E9F;
            font-size: 12px;
            font-weight: 500;
            position: relative;
            z-index: 9;
          }
          .noticeBox{
            position: absolute;
            top: 10px;
            z-index: 9;
            background: #fff;
            border-radius: 12rpx;
            box-sizing: border-box;
            padding: 12rpx 0;
            display: block;
            width: 320px;
            box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
            .noticeTitle{
              font-size: 28rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #160002;
              line-height: 40rpx;
              margin-left: 8px;
            }
            .noticeItem{
              display: inline-block;
              width: 150px;
              color: #A69E9F;
              font-size: 12px;
              font-weight: 500;
              box-sizing: border-box;
              padding-left: 24rpx;
            }
          }
          .itemTitle{
            font-size: 36rpx;
            font-family: Alimama ShuHeiTi;
            font-weight: bold;
            color: #EC6C00;
            line-height: 44rpx;
          }
        }
        .monthSumBg{
          position: absolute;
          width: 320rpx;
          height: 320rpx;
          right: 0;top: 0;
          z-index: 1;
        }
        .itemBox{
          position: relative;
          z-index:2;
          width: 100%;
          background: #fff;
          border-radius: 12rpx;
          box-sizing: border-box;
          padding: 16rpx 32rpx;
          margin-top: 22rpx;
          .progressBox{
            width: 100%;
            .progressTop{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .progressLabel{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 40rpx;
              }
              .progressValue{
                font-size: 36rpx;
                font-family: Alimama ShuHeiTi;
                font-weight: bold;
                color: #EC6C00;
                line-height: 44rpx;
              }
            }
            .progress{
              margin-top: 8px;
              width: 100%;
              height: 12px;
              border-radius: 6px;
              background: #FEE4CE;
              position: relative;
              overflow: hidden;
              .have{
                position: absolute;
                top: 0;left: 0;
                border-radius: 6px;
                background: #FC7909;
                height: 100%;
              }
            }
          }
        }

        .listBox{
          width: 100%;
          margin-top: 12px;
          .listBoxItem{
            position: relative;
            margin-bottom: 12rpx;
            .subItemTop{
              display: flex;
              align-items: center;
              .index{
                display: inline-block;
                width: 36rpx;
                height: 32rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FEFFFF;
                line-height: 32rpx;
                text-align: center;
                box-sizing: border-box;
                padding-right: 4rpx;
              }
              .subItemName{
                font-size: 28rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 40rpx;
                margin-left: 8px;
              }
            }
            .subItemBottom{
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .bottomItem{
                width: 50%;
                .bottomLabel{
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 32rpx;
                }
                .bottomValue{
                  font-size: 30rpx;
                  font-family: Alimama ShuHeiTi;
                  font-weight: bold;
                  color: #EC6C00;
                  line-height: 32rpx;
                  margin-left: 4rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
