<template>
  <view class="main">
    <view class="header">
      <view class="headerTop" :style="{top: menu.top + 'px',height:menu.height + 'px'}">
        <image @click="handleBack" class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
      </view>

      <view class="pageTitle" :style="{top: (menu.bottom+18) +'px'}">收支预测</view>

      <view class="headerDetail" :style="{top: (menu.bottom+68) +'px'}">
        <view class="detailBox">
          <view class="detailPage">月度累计收支金额</view>

          <view class="moneyBox">
            <view class="moneyItem">
              <view class="itemTop">
                <view class="itemChart">
                  <YearCharts :success="number"/>
                </view>
                <view class="itemMessage">
                  <text class="itemRate">32.54%</text>
                  <text class="itemLabel">成本比</text>
                </view>
              </view>
              <view class="successBox">
                <text class="successNumber">119.01</text>
                <text class="successTime">2022年完成<text class="successUnit">/万元</text></text>
              </view>
            </view>

            <view class="moneyItem">
              <view class="itemTop">
                <view class="itemChart">
                  <YearCharts :success="number"/>
                </view>
                <view class="itemMessage">
                  <text class="itemRate">32.54%</text>
                  <text class="itemLabel">成本比</text>
                </view>
              </view>
              <view class="successBox">
                <text class="successNumber">119.01</text>
                <text class="successTime">2022年完成<text class="successUnit">/万元</text></text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="profitYear">
        <view class="itemBox">
          <view class="itemBoxTitle">年度累计利润</view>

          <view class="itemDetailBox">
            <view class="detailBoxTop">
              <text class="successLabel">完成率</text>
              <text class="successValue">34.63%</text>
            </view>

            <view class="progress">
              <view class="have" :style="{width:'36%'}"></view>
            </view>

            <view class="yearDetail">
              <view class="yearItem">
                <view class="itemValue">119.01</view>
                <text class="itemLabel">2022年完成<text class="itemUnit">/万元</text></text>
              </view>

              <view class="yearItem">
                <view class="itemValue">300.00</view>
                <text class="itemLabel">2023年预计<text class="itemUnit">/万元</text></text>
              </view>

              <view class="yearItem">
                <view class="itemValue">12.84%</view>
                <text class="itemLabel">计划比</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import YearCharts from "./component/yearCharts.vue";
export default {
  components:{YearCharts},
  data(){
    return {
      windowHeight: null,
      statusBarHeight: null,
      menu:{},
      number:0
    }
  },
  onLoad(){
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync()
    this.windowHeight = systemInfo.windowHeight
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()
    console.log('this.menu',this.menu)
    let _this = this
    setTimeout(()=>{
      _this.number = 40
    },100)
  },
  methods:{
    // 返回按钮的方法
    handleBack(){
      uni.switchTab({
        url: '/pages/index/index'
      })
      // if (this.come==='index'){
      //
      // }else{
      //   uni.switchTab({
      //     url: '/pages/userCenter/userCenter'
      //   })
      // }
    },
  }
}
</script>
<style scoped lang="scss">
@import '/static/public/font/stylesheet.css';
.main{
  width: 100%;
  min-height: 100vh;
  .header{
    width: 100%;
    height: 664rpx;
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png");
    background-repeat: no-repeat;
    background-size: 100% 560rpx;
    position: relative;
    .headerTop{
      width: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      .backIcon{
        width: 48rpx;
        height: 48rpx;
        margin-left: 32rpx;
      }
    }
    .pageTitle{
      position: absolute;
      left: 32rpx;
      font-size: 56rpx;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 68rpx;
    }

    .headerDetail{
      position: absolute;
      width: calc(100% - 64rpx);
      left: 32rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 4rpx;
      .detailBox{
        width: 100%;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        background: linear-gradient(180deg, #E9F5FA 0%,  #FBFDFE 100%);
        border-radius: 16rpx;
        .detailPage{
          font-size: 36rpx;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          color: #018ABD;
          line-height: 44rpx;
        }
        .moneyBox{
          width: 100%;
          height: 248rpx;
          background: #fff;
          margin-top: 22rpx;
          border-radius: 12rpx;
          box-sizing: border-box;
          padding: 32rpx;
          display: flex;
          .moneyItem{
            width: 50%;
            height: 100%;
            .itemTop{
              width: 100%;
              height: 68rpx;
              display: flex;
              box-sizing: border-box;
              .itemChart{
                margin-top: 8rpx;
                width: 68rpx;
                height: 68rpx;
              }
              .itemMessage{
                display: flex;
                flex-direction: column;
                margin-left: 16rpx;
                .itemRate{
                  font-size: 40rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #018ABD;
                  line-height: 48rpx;
                }
                .itemLabel{
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                }
              }
            }
            .successBox{
              margin-top: 32rpx;
              display: flex;
              flex-direction: column;
              .successNumber{
                font-size: 32rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #160002;
                line-height: 36rpx;
                margin-bottom: 4rpx;
              }
              .successTime{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 36rpx;
                .successUnit{
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #A69E9F;
                  line-height: 36rpx;
                  margin-left: 4rpx;
                }
              }
            }
          }
        }
      }
    }
  }

  .content{
    width: 100%;
    box-sizing: border-box;
    padding: 24rpx 36rpx 0;
    background: #F5F5F5;
    .profitYear{
      width: 100%;
      height: 368rpx;
      background: #fff;
      box-sizing: border-box;
      padding: 4rpx;
      border-radius: 16rpx;
      .itemBox{
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #EDEEFF 0%,  #F8F9FF 100%);;
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        .itemBoxTitle{
          font-size: 36rpx;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          color: #474EF4;
          line-height: 44rpx;
        }
        .itemDetailBox{
          width: 100%;
          height: 256rpx;
          background: #FFFFFF;
          border-radius: 12rpx;
          margin-top: 22rpx;
          box-sizing: border-box;
          padding: 32rpx;
          .detailBoxTop{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .successLabel{
              font-size: 28rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 40rpx;
            }
            .successValue{
              font-size: 40rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #575EF9;
              line-height: 48rpx;
            }
          }
          .progress{
            width: 100%;
            height: 24rpx;
            background: rgba(221, 223, 254, 0.2);
            border-radius: 12rpx;
            position: relative;
            margin-top: 12rpx;
            .have{
              position: absolute;
              top: 0;left: 0;
              height: 100%;
              background: #575EF9;
              border-radius: 12rpx;
            }
          }
          .yearDetail{
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 32rpx;
            .yearItem{
              .itemValue{
                font-size: 32rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #160002;
                line-height: 36rpx;
              }
              .itemLabel{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 36rpx;
                margin-top: 4rpx;
                .itemUnit{
                  margin-left: 4rpx;
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #A69E9F;
                  line-height: 36rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
