<template>
  <div class="revenueAnalysisMain">
    <div class="revenueAnalysis">
      <div class="revenueTop" @click="handleRevenueDetail">
        <div class="revenueTopLeft">
          <image class="revenueLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/managerLogo.svg"/>
          <div class="revenueTopMoney">
            <div class="moneyBox">
              <text class="text">{{dataInfo.CashPay}}</text>
              <image class="moneyIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/managerGood.svg"/>
            </div>
              <text class="labelText">实收总额<text class="labelUnit">/元</text></text>
          </div>
        </div>
        <div class="revenueTopRight" v-if="dataInfo.comparePlan">
          <span class="addText">{{dataInfo.comparePlan>0?'+'+dataInfo.comparePlan+'%':dataInfo.comparePlan<0?'-'+dataInfo.comparePlan+'%':'-'}}</span>
          <span class="addType">比计划</span>
        </div>
      </div>
      <div class="revenueDetailList">
        <div class="revenueDetailItem">
          <text class="itemValue">{{dataInfo.Different_Price_More}}</text>
          <text class="itemLabel">长款金额<text class="itemUnit">/元</text></text>
        </div>
        <div class="revenueDetailItem">
          <text class="itemValue">{{dataInfo.Different_Price_Less}}</text>
          <text class="itemLabel">短款金额<text class="itemUnit">/元</text></text>
        </div>
        <div class="revenueDetailItem">
          <text class="itemValue">{{dataInfo.TotalOffAmount}}</text>
          <text class="itemLabel">优惠金额<text class="itemUnit">/元</text></text>
        </div>
        <div class="revenueDetailItem" style="margin-top: 32rpx">
          <text class="itemValue">{{dataInfo.TicketCount}}</text>
          <text class="itemLabel">客单数量<text class="itemUnit">/笔</text></text>
        </div>
        <div class="revenueDetailItem" style="margin-top: 32rpx">
          <text class="itemValue">{{dataInfo.TotalCount}}</text>
          <text class="itemLabel">商品出售<text class="itemUnit">/件</text></text>
        </div>
        <div class="revenueDetailItem" style="margin-top: 32rpx">
          <text class="itemValue">{{dataInfo.average}}</text>
          <text class="itemLabel">商品均价<text class="itemUnit">/元</text></text>
        </div>
      </div>


<!--      <div class="item">-->
<!--        <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/agreement.svg"></image>-->
<!--        <div class="info" style="margin-bottom: 24px;">-->
<!--          <p class="title">合同总金额<text class="unit">/万元</text></p>-->
<!--          <p class="value">{{dataInfo.ContractProfitLoss}}</p>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="item" style="margin-bottom: 24px;">-->
<!--        <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/shopNumber.svg"></image>-->
<!--        <div class="info">-->
<!--          <p class="title">店铺数量<text class="unit">/个</text></p>-->
<!--          <p class="value">{{dataInfo.ShopCount}}</p>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="item">-->
<!--        <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/add.svg"></image>-->
<!--        <div class="info">-->
<!--          <p class="title">欠款金额<text class="unit">/万元</text></p>-->
<!--          <p class="value">{{dataInfo.SalesPerSquareMeter}}</p>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="item">-->
<!--        <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/overShop.svg"></image>-->
<!--        <div class="info">-->
<!--          <p class="title">半年到期合同<text class="unit">/个</text></p>-->
<!--          <p class="value">{{dataInfo.ExpiredShopCount}}</p>-->
<!--        </div>-->
<!--      </div>-->
    </div>
<!--    <div class="list" v-if="id">-->
<!--&lt;!&ndash;      <p class="bigTitle" v-if="dataInfo.ContractList.length>0">即将到期合同列表: </p>&ndash;&gt;-->
<!--      <div class="item" v-for="(item,index) in dataInfo.ContractList" :key="index">-->
<!--        <div class="title">{{item.name}}</div>-->
<!--        <div class="value">{{item.value}}到期</div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
    name: "revenueAnalysis",
    data() {
        return {
          dataInfo:{},
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        },
        id:{
          type:String,
          default:''
        }
    },
    watch: {
        data: {
            handler(value) {
              this.dataInfo = JSON.parse(JSON.stringify(value))
              this.dataInfo.CashPay = this.$util.fmoney(this.dataInfo.CashPay,2)
              this.dataInfo.Different_Price_More = this.$util.fmoney(this.dataInfo.Different_Price_More,2)
              this.dataInfo.Different_Price_Less = this.$util.fmoney(this.dataInfo.Different_Price_Less,2)
              this.dataInfo.TotalOffAmount = this.$util.fmoney(this.dataInfo.TotalOffAmount,2)
              this.dataInfo.TicketCount = this.$util.fmoney(this.dataInfo.TicketCount,2)
              this.dataInfo.TotalCount  = this.$util.fmoney(this.dataInfo.TotalCount,2)
              this.dataInfo.average = value.TicketCount? this.$util.fmoney((Number(value.CashPay) / Number(value.TicketCount)),2):'0.00'
              // this.dataInfo.ContractProfitLoss = this.$util.fmoney(this.dataInfo.ContractProfitLoss)
              // this.dataInfo.SalesPerSquareMeter = this.$util.fmoney(this.dataInfo.SalesPerSquareMeter)
            }
        },
        deep:true
    },
    methods: {
      handleRevenueDetail() {
        let lastDay = uni.getStorageSync('lastDay')
        let date = new Date(lastDay)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        if (m < 10) {
          m = '0' + m
        }
        console.log('lastDay',lastDay)
        let currentService = uni.getStorageSync('currentService')
        this.$util.toNextRoute('navigateTo',`/pages/operatingStatements/detail?BusinessTypeValue=0&SettlementModeValue=0&et=${lastDay}&id=${currentService.Serverpart_ID}&pcode=340000&searchKey=MerchantName,Brand,Shop,Serverpart&searchValue=&st=${y}-${m}-01`)
        // BusinessTypeValue: "0"
        // SettlementModeValue: "0"
        // et: "2023-12-18"
        // id: "489"
        // pcode: "340000"
        // searchKey: "MerchantName,Brand,Shop,Serverpart"
        // searchValue: ""
        // st: "2023-12-01"

      }
    }
}
</script>

<style scoped lang="scss">
.revenueAnalysisMain{
  .revenueAnalysis{
    width: 100%;
    background: #FAF9FC;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
    box-sizing: border-box;
    display: flex;
    flex-flow: wrap;
    margin-top: 12px;
    .revenueTop{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .revenueTopLeft{
        display: flex;
        height: 88rpx;
        .revenueLogo{
          width: 88rpx;
          height: 88rpx;
          margin-right: 16rpx;
        }
        .revenueTopMoney{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 88rpx;
          .moneyBox{
            height: 48rpx;
            .text{
              font-size: 40rpx;
              font-family: DINAlternate, DINAlternate;
              font-weight: bold;
              color: #160002;
              line-height: 48rpx;
            }
            .moneyIcon{
              width: 32rpx;
              height: 32rpx;
              margin-left: 12rpx;
            }
          }
          .labelText{
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 40rpx;
            .labelUnit{
              font-size: 28rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #A69E9F;
              line-height: 40rpx;
              margin-left: 4rpx;
            }
          }
        }
      }
      .revenueTopRight{
        height: 88rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        .addText{
          font-size: 40rpx;
          font-family: DINAlternate, DINAlternate;
          font-weight: bold;
          color: #E83944;
          line-height: 48rpx;
        }
        .addType{
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #A69E9F;
          line-height: 40rpx;
        }
      }
    }
    .revenueDetailList{
      width: 100%;
      margin-top: 48rpx;
      .revenueDetailItem{
        display: inline-block;
        width: calc(100% / 3);
        .itemValue{
          font-size: 28rpx;
          font-family: DINAlternate, DINAlternate;
          font-weight: bold;
          color: #341D00;
          line-height: 40rpx;
        }
          .itemLabel{
            display: block;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 40rpx;
            .itemUnit{
              font-size: 28rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #A69E9F;
              line-height: 40rpx;
              margin-left: 4rpx;
            }
          }
      }
    }
    .item{
      width: 50%;
      display: flex;
      .icon{
        width: 20px;
        height: 20px;
        margin-right: 8px;
        margin-top: 4px;
      }
      .info{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 20px;
        .unit{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #A69E9F;
          line-height: 20px;
          margin-left: 2px;
        }
      }
      .value{
        font-size:16px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #341D00;
        line-height: 20px;
        margin-top: 8px;
      }
    }
  }
  .list{
    margin-top: 12px;
    .bigTitle{
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      color: #160002;
    }
    .item{
      width: 100%;
      display: flex;
      .title{
        flex: 1;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 20px;
      }
      .value{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 20px;
        text-align: right;
      }
    }
  }
}
</style>
