<template>
  <view class="main">
    <view class="listBox" v-if="dataList && dataList.length>0">
      <view class="listItem" v-for="(item,index) in dataList" :key="index" @click="handleGoMonthDetail(item)">
        <view class="itemTop">
          <view class="topLeft">
            <image class="leftIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/monthIcon.png"/>
            <span class="leftTime">{{ item.StartDate || '' }} 至 {{item.EndDate || ''}}  </span>
          </view>
          <view class="topRight">
            <span class="itemState">{{item.IsApplySuccess?'已结算':item.BusinessApprovalId?'结算中':'待结算'}}</span>
          </view>
        </view>

        <view class="itemContent">
          <view class="sumBox">
            <view class="bigMoney">{{item.RevenueAmount?numeral(item.RevenueAmount).format('0,0.00'):'-'}}</view>
            <view class="bigText">营业额合计<span class="unit">/万元</span></view>
          </view>

          <view class="contentList">
            <view class="contentItem">
              <view class="value">{{item.CashAmount?numeral(item.CashAmount).format('0,0.00'):'-'}}</view>
              <view class="label">现金</view>
            </view>
            <view class="contentItem">
              <view class="value">{{item.MobilePayAmount?numeral(item.MobilePayAmount).format('0,0.00'):'-'}}</view>
              <view class="label">微支付</view>
            </view>
            <view class="contentItem">
              <view class="value">{{item.RoyaltyAmount?numeral(item.RoyaltyAmount).format('0,0.00'):'-'}}</view>
              <view class="label">驿达收款</view>
            </view>
            <view class="contentItem">
              <view class="value">{{item.ReceivableAmount?numeral(item.ReceivableAmount).format('0,0.00'):'-'}}</view>
              <view class="label">营收费用合计</view>
            </view>
            <view class="contentItem">
              <view class="value">{{item.GuaranteeFee?numeral(item.GuaranteeFee).format('0,0.00'):'-'}}</view>
              <view class="label">租金</view>
            </view>
            <view class="contentItem">
              <view class="value">{{item.RefundSupplement?numeral(item.RefundSupplement).format('0,0.00'):'-'}}</view>
              <view class="label">退补款</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import numeral from "numeral";

export default {
  name: "monthList",
  data() {
    return {
      dataList: [],
      detailObj:{}
    }
  },
  onLoad(query){
    console.log('query',query)
    if(query.list){
      this.dataList = JSON.parse(query.list)
      console.log('this.dataList',this.dataList)
    }
    if(query.detailObj){
      this.detailObj = JSON.parse(query.detailObj)
      console.log('this.detailObj',this.detailObj)
    }
  },
  onUnload() {
    this.$util.addUserBehaviorNew()
  },
  methods:{
    numeral,
    handleGoMonthDetail(obj){
      console.log('this.detailObj',this.detailObj)
      console.log('obj',obj)
      let id = obj.BUSINESSPROJECT_ID ? obj.BUSINESSPROJECT_ID : ''
      let res = {
        ...obj,
        STARTDATE: obj.StartDate ? this.$moment(obj.StartDate.replace('.', '-').replace('.', '-')).format('YYYY-MM-DD') : '',
        ENDDATE: obj.EndDate ? this.$moment(obj.EndDate.replace('.', '-').replace('.', '-')).format('YYYY-MM-DD') : '',
        BUSINESSPROJECT_ID: this.detailObj.BUSINESSPROJECT_ID || '',
        SERVERPARTSHOP_ID: this.detailObj.SERVERPARTSHOP_ID || '',
        SERVERPART_ID: this.detailObj.SERVERPART_ID || '',
        SERVERPART_NAME: this.detailObj.SERVERPART_NAME || '',
        Approvalstate: obj.SETTLEMENT_STATE===1?9:obj.BusinessApprovalId?1:0,
        SHOPROYALTY_ID: obj.ShopRoyalty_Id
      }
      res.thisMonth = this.$moment(res.ENDDATE).format('YYYY/MM')
      let staticMonth = this.$moment(res.ENDDATE).endOf('months').format('YYYYMM')
      this.$util.toNextRoute('navigateTo', `/pages/settlementApproval/monthDetail?obj=${JSON.stringify(res)}&staticMonth=${staticMonth}&id=${id}`)
    }
  }
}
</script>

<style  scoped lang="scss">
.main{
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 26rpx 0 ;
  background-color: #F3F3F3;
  .listBox{
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;
    .listItem{
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 16rpx;
      margin-bottom: 24rpx;
      .itemTop{
        box-sizing: border-box;
        padding: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient( 180deg, #FFF7F2 0%, #FFFFFF 100%);
        border-radius: 14rpx 14rpx 0rpx 0rpx;
        border-bottom: 2rpx solid #F7F7F7;
        .topLeft{
          display: flex;
          align-items: center;
          .leftIcon{
            width: 40rpx;
            height: 40rpx;
            margin-right: 12rpx;
          }
          .leftTime{
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: 400;
            font-size: 28rpx;
            color: #242729;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
        }
        .topRight{
          .itemState{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #C27424;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }

      .itemContent{
        width: 100%;
        box-sizing: border-box;
        padding: 0 24rpx;
        .sumBox{
          margin-top: 40rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .bigMoney{
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            font-size: 28rpx;
            color: #9A3D1A;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
          .bigText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #786B6C;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            .unit{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #A69E9F;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
        .contentList{
          margin-top: 32rpx;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          padding-bottom: 8rpx;
          .contentItem{
            width: calc(100% / 3);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin-bottom: 24rpx;
            .value{
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              font-size: 24rpx;
              color: #483E3A;
              line-height: 32rpx;
              text-align: right;
              font-style: normal;
              height: 32rpx;
            }
            .label{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #786B6C;
              line-height: 36rpx;
              text-align: right;
              font-style: normal;
              height: 36rpx;
            }
          }
        }
      }
    }
  }
}
</style>
