<template>
  <view class="main">
    <view class="top">
      <view class="header" :style="{height: menu.bottom + 5 +'px'}">
        <view class="headerContent" :style="{height: (menu.bottom - menu.top) + 'px'}">
          <image class="leftIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"/>
          <view class="headerTimeBox">
            <picker mode="date" fields="month" :value="searchText"  :end="lastDay" @change="bindDateChange" >
              <view class="time">
                <image class="timeIcon" src="/static/images/newIndex2/timeIcon.svg"/>
                <view class="text">{{ searchText }}</view>
                <image class="icon" src="/static/images/newIndex2/timeUpDown.svg"></image>
              </view>
            </picker>
          </view>
        </view>
      </view>
      <view class="pageTitle" :style="{top: menu.bottom + 5 + 12 +'px'}">营收统计</view>
    </view>

    <view class="content">

      <view class="revenueBox ydRevenue">
        <view class="revenueBoxHeader">
          <view class="headerTitle">驿达营收</view>
          <image class="revenueImg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/revenueItemBg.png"/>
          <view class="revenueContent">
            <view class="sumBox">
              <image class="sumLogo" src="/static/images/newIndex2/sumLogo.svg"/>
              <view class="sumText">
                <view class="sumMoney">15,583.9</view>
                <view class="sumUnit">总计<span class="unit">/元</span></view>
              </view>
            </view>

            <view class="revenueAmount">
              <view class="amountItem">
                <view class="itemTop">
                  <view class="itemTopLeft">
                    <image class="leftIcon" src="/static/images/newIndex2/amountReceived.svg"/>
                    <view class="itemTitle">到账合计</view>
                    <view class="itemUnit">/元</view>
                  </view>
                  <view class="itemTopRight">7126.85</view>
                </view>
                <view class="itemBottom">
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">业主自营</view>
                    <view class="bottomItemValue">3178</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">自营提成</view>
                    <view class="bottomItemValue">241.84</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">合租经营</view>
                    <view class="bottomItemValue">2586.45</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">固定租金</view>
                    <view class="bottomItemValue">1120.56</view>
                  </view>
                </view>
              </view>
              <view class="amountItem" style="margin-top: 56rpx">
                <view class="itemTop">
                  <view class="itemTopLeft">
                    <image class="leftIcon" src="/static/images/newIndex2/amountEntry.svg"/>
                    <view class="itemTitle">入账合计</view>
                    <view class="itemUnit">/元</view>
                  </view>
                  <view class="itemTopRight">7126.85</view>
                </view>
                <view class="itemBottom">
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">业主自营</view>
                    <view class="bottomItemValue">3178</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">自营提成</view>
                    <view class="bottomItemValue">241.84</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">合租经营</view>
                    <view class="bottomItemValue">2586.45</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">固定租金</view>
                    <view class="bottomItemValue">1120.56</view>
                  </view>
                </view>
              </view>
              <view class="amountItem"  style="margin-top: 56rpx">
                <view class="itemTop">
                  <view class="itemTopLeft">
                    <image class="leftIcon" src="/static/images/newIndex2/receivable.svg"/>
                    <view class="itemTitle">应收合计</view>
                    <view class="itemUnit">/元</view>
                  </view>
                  <view class="itemTopRight">7126.85</view>
                </view>
                <view class="itemBottom">
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">业主自营</view>
                    <view class="bottomItemValue">3178</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">自营提成</view>
                    <view class="bottomItemValue">241.84</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">合租经营</view>
                    <view class="bottomItemValue">2586.45</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">固定租金</view>
                    <view class="bottomItemValue">1120.56</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="revenueBox merchantRevenue" style="margin-top: 24rpx">
        <view class="revenueBoxHeader">
          <view class="headerTitle">商家营收</view>
          <image class="revenueImg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/entryAdd.png"/>
          <view class="revenueContent">
            <view class="sumBox">
              <image class="sumLogo" src="/static/images/newIndex2/merchantsSum.svg"/>
              <view class="sumText">
                <view class="sumMoney">4,930.12</view>
                <view class="sumUnit">总计<span class="unit">/元</span></view>
              </view>
            </view>

            <view class="revenueAmount">
              <view class="amountItem">
                <view class="itemTop">
                  <view class="itemTopLeft">
                    <image class="leftIcon" src="/static/images/newIndex2/merchantsAmount.svg"/>
                    <view class="itemTitle">到账合计</view>
                    <view class="itemUnit">/元</view>
                  </view>
                  <view class="itemTopRight">7126.85</view>
                </view>
                <view class="itemBottom">
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">业主自营</view>
                    <view class="bottomItemValue">3178</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">自营提成</view>
                    <view class="bottomItemValue">241.84</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">合租经营</view>
                    <view class="bottomItemValue">2586.45</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">固定租金</view>
                    <view class="bottomItemValue">1120.56</view>
                  </view>
                </view>
              </view>
              <view class="amountItem" style="margin-top: 56rpx">
                <view class="itemTop">
                  <view class="itemTopLeft">
                    <image class="leftIcon" src="/static/images/newIndex2/merchantsEntry.svg"/>
                    <view class="itemTitle">入账合计</view>
                    <view class="itemUnit">/元</view>
                  </view>
                  <view class="itemTopRight">7126.85</view>
                </view>
                <view class="itemBottom">
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">业主自营</view>
                    <view class="bottomItemValue">3178</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">自营提成</view>
                    <view class="bottomItemValue">241.84</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">合租经营</view>
                    <view class="bottomItemValue">2586.45</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">固定租金</view>
                    <view class="bottomItemValue">1120.56</view>
                  </view>
                </view>
              </view>
              <view class="amountItem"  style="margin-top: 56rpx">
                <view class="itemTop">
                  <view class="itemTopLeft">
                    <image class="leftIcon" src="/static/images/newIndex2/merchantsReceivable.svg"/>
                    <view class="itemTitle">应收合计</view>
                    <view class="itemUnit">/元</view>
                  </view>
                  <view class="itemTopRight">7126.85</view>
                </view>
                <view class="itemBottom">
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">业主自营</view>
                    <view class="bottomItemValue">3178</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">自营提成</view>
                    <view class="bottomItemValue">241.84</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">合租经营</view>
                    <view class="bottomItemValue">2586.45</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">固定租金</view>
                    <view class="bottomItemValue">1120.56</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="revenueBox otherData" style="margin-top: 24rpx">
        <view class="revenueBoxHeader">
          <view class="headerTitle">其他数据</view>
          <image class="revenueImg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/expenditure.png"/>
          <view class="revenueContent">


            <view class="revenueAmount">
              <view class="amountItem">
                <view class="itemTop">
                  <view class="itemTopLeft">
                    <image class="leftIcon" src="/static/images/newIndex2/itemQuantity.svg"/>
                    <view class="itemTitle">项目数量</view>
                    <view class="itemUnit">/个</view>
                  </view>
                  <view class="itemTopRight">499</view>
                </view>
                <view class="itemBottom">
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">业主自营</view>
                    <view class="bottomItemValue">102</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">自营提成</view>
                    <view class="bottomItemValue">44</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">合租经营</view>
                    <view class="bottomItemValue">220</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">固定租金</view>
                    <view class="bottomItemValue">123</view>
                  </view>
                </view>
              </view>
              <view class="amountItem" style="margin-top: 56rpx">
                <view class="itemTop">
                  <view class="itemTopLeft">
                    <image class="leftIcon" src="/static/images/newIndex2/itemRate.svg"/>
                    <view class="itemTitle">项目占比</view>
                    <view class="itemUnit">/%</view>
                  </view>
                  <view class="itemTopRight">100%</view>
                </view>
                <view class="itemBottom">
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">业主自营</view>
                    <view class="bottomItemValue">12%</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">自营提成</view>
                    <view class="bottomItemValue">9%</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">合租经营</view>
                    <view class="bottomItemValue">45%</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">固定租金</view>
                    <view class="bottomItemValue">25%</view>
                  </view>
                </view>
              </view>
              <view class="amountItem"  style="margin-top: 56rpx">
                <view class="itemTop">
                  <view class="itemTopLeft">
                    <image class="leftIcon" src="/static/images/newIndex2/customersRate.svg"/>
                    <view class="itemTitle">对客占比</view>
                    <view class="itemUnit">/%</view>
                  </view>
                  <view class="itemTopRight">100%</view>
                </view>
                <view class="itemBottom">
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">业主自营</view>
                    <view class="bottomItemValue">44.59%</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">自营提成</view>
                    <view class="bottomItemValue">3.41%</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">合租经营</view>
                    <view class="bottomItemValue">36%</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">固定租金</view>
                    <view class="bottomItemValue">16%</view>
                  </view>
                </view>
              </view>
              <view class="amountItem"  style="margin-top: 56rpx">
                <view class="itemTop">
                  <view class="itemTopLeft">
                    <image class="leftIcon" src="/static/images/newIndex2/comprehensive.svg"/>
                    <view class="itemTitle">综合提成</view>
                    <view class="itemUnit">/%</view>
                  </view>
                  <view class="itemTopRight">100%</view>
                </view>
                <view class="itemBottom">
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">业主自营</view>
                    <view class="bottomItemValue">0%</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">自营提成</view>
                    <view class="bottomItemValue">0%</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">合租经营</view>
                    <view class="bottomItemValue">32.4%</view>
                  </view>
                  <view class="itemBottomItem">
                    <view class="bottomItemTitle">固定租金</view>
                    <view class="bottomItemValue">77.6%</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data(){
    return {
      statusBarHeight:'',
      menu:{},
      lastDay:'',
      searchText:''
    }
  },
  onLoad(option){
    console.log('option',option)
    // 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    uni.setStorageSync('phoneInfo',systemInfo)
    this.menu = uni.getMenuButtonBoundingClientRect()
    console.log('statusBarHeight',this.statusBarHeight)
    console.log('menu',this.menu)
    if (option.time){
      const date = new Date(option.time)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      if (m<10){
        m = '0'+m
      }
      this.lastDay = option.time
      this.searchText = `${y}-${m}`
    }

  }
}
</script>
<style scoped lang="scss">
@import '/static/public/revenueStatistics/stylesheet.css';
.main{
  height: 100%;
  background: #f5f5f5;
  .top{
    width: 100%;
    height: 560rpx;
    position: relative;
    background: linear-gradient(#FF7F37 0%, #FDA03E 60%, #F5F5F5 100%);;
    .header{
      position: fixed;
      top: 0;left: 0;
      width: 100%;
      z-index: 9999;
      background: linear-gradient(#FF9434 0%,#FE9139 100%);
      box-sizing: border-box;
      .headerContent{
        width: 100%;
        box-sizing: border-box;
        padding: 0 32rpx;
        position: absolute;
        bottom: 5px;
        display: flex;
        align-items: center;
        .leftIcon{
          width: 24px;
          height: 24px;
        }
        .headerTimeBox{
          margin-left: 24rpx;
          .time{
            display: flex;
            align-items: center;
            .timeIcon{
              width: 40rpx;
              height: 40rpx;
              margin-right: 8rpx;
            }
            .text{
              font-size: 32rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              color: #FFFFFF;
              line-height: 44rpx;
            }
            .icon{
              width: 24rpx;
              height: 24rpx;
              margin-left: 16rpx;
            }
          }
        }
      }

    }
    .pageTitle{
      font-size: 56rpx;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 68rpx;
      position: absolute;
      left: 32rpx;
    }
  }
  .content{
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx 48rpx;
    transform: translateY(-260rpx);
    .revenueBox{
      width: 100%;
      background:#fff;
      border-radius: 24rpx;
      box-sizing: border-box;
      padding: 4rpx;
      .revenueBoxHeader{
        width: 100%;
        height: 500px;
        border-radius: 12rpx 12rpx 0 0;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        position: relative;
        overflow: hidden;
        .headerTitle{
          font-size: 36rpx;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          line-height: 44rpx;
        }
        .revenueImg{
          position: absolute;
          right: 0;top: 0;
          width: 266rpx;
          height: 208rpx;

        }
        .revenueContent{
          position: absolute;
          z-index: 2;
          width: calc(100% - 48rpx);
          .sumBox{
            width: 100%;
            box-sizing: border-box;
            padding: 32rpx 24rpx;
            background: #fff;
            border-radius: 12rpx;
            margin-top: 22rpx;
            display: flex;
            justify-content: space-between;
            .sumLogo{
              width: 96rpx;
              height: 96rpx;
            }
            .sumText{
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              .sumMoney{
                font-size: 40rpx;
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                color: #160002;
                line-height: 48rpx;
              }
              .sumUnit{
                margin-top: 8rpx;
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 40rpx;
                .unit{
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #A69E9F;
                  line-height: 40rpx;
                  margin-left: 4rpx;
                }
              }
            }
          }
          .revenueAmount{
            width: 100%;
            margin-top: 62rpx;
            .amountItem{
              .itemTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .itemTopLeft{
                  display: flex;
                  align-items: center;
                  .leftIcon{
                    width: 72rpx;
                    height: 72rpx;
                    margin-right: 16rpx;
                  }
                  .itemTitle{
                    font-size: 32rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 44rpx;
                  }
                  .itemUnit{
                    font-size: 28rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    margin-left: 4rpx;
                    line-height: 40rpx;
                  }
                }
                .itemTopRight{
                  font-size: 40rpx;
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 40rpx;
                }
              }
              .itemBottom{
                margin-top: 24rpx;
                .itemBottomItem{
                  width: 25%;
                  display: inline-block;
                  .bottomItemTitle{
                    font-size: 28rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 40rpx;
                    margin-bottom: 4rpx;
                  }
                  .bottomItemValue{
                    font-size: 32rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #160002;
                    line-height: 40rpx;
                  }
                }
              }
            }
          }
        }
      }

    }

    .ydRevenue{
      .revenueBoxHeader{
        background: linear-gradient(#FCF3E5 0%, #FDF6EC 22%,#FFFFFF 30%, #FFFFFF 100%);
        .headerTitle{
          color: #EC6C00;
        }
      }
    }
    .merchantRevenue{
      .revenueBoxHeader{
        background: linear-gradient(#E9F5F9 0%, #E9F5F9 22%,#FFFFFF 30%, #FFFFFF 100%);
        .headerTitle{
          color: #018ABD;
        }
      }
    }
    .otherData{
      .revenueBoxHeader{
        height: 530px;
        background: linear-gradient(#F1F7FF 0%, #FFFFFF 20% , #FFFFFF 100%);
      }
    }
  }
}
</style>
