<template>
  <view class="main">
<!--    新頂部-->
    <view class="header">
      <view class="headerBox" :style="{height: menu.bottom + 18 + 'px'}">
        <view class="arrowBox" :style="{paddingTop: menu.top + 'px',height: menu.height + 'px'}">
          <image @click="handleBack" class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"/>

          <view class="selectServiceBox">
            <image class="serviceIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/serviceIcon.png"/>
            <view class="nameBox">
              <span class="service">{{ detailObj.SERVERPART_NAME}}</span>
              <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
            </view>
          </view>
        </view>
      </view>
      <view class="headerDetail" :style="{paddingTop:  menu.bottom + 18 + 'px'}">
        <view class="detailContent">
          <view class="projectName" style="margin-bottom: 16rpx">{{detailObj.BUSINESSPROJECT_NAME || ''}}</view>
          <view class="projectItem">
            <view class="itemLabel">项目时间：</view>
            <view class="itemValue">{{detailObj.STARTDATE || ''}}-{{detailObj.ENDDATE || ''}}</view>
          </view>
          <view class="projectItem">
            <view class="itemLabel">经营商户：</view>
            <view class="itemValue">{{detailObj.MERCHANTS_NAME || ''}}</view>
          </view>
          <view style="display: flex;align-items: center;">
            <view class="projectItem" style="width: 50%">
              <view class="itemLabel">经营模式：</view>
              <view class="itemValue">{{detailObj.BUSINESS_TYPE?contractType[detailObj.BUSINESS_TYPE] : ''}}</view>
            </view>
            <view class="projectItem" style="width: 50%">
              <view class="itemLabel">结算模式：</view>
              <view class="itemValue">{{detailObj.SETTLEMENT_MODES?SETTLEMENT_MODESObj[detailObj.SETTLEMENT_MODES] : ''}}</view>
            </view>
          </view>

          <view class="projectItem">
            <view class="itemLabel">经营门店：</view>
            <view class="itemValue">{{detailObj.SERVERPARTSHOP_NAME || ''}}</view>
          </view>
        </view>
      </view>
    </view>




<!--    日结冲正信息表-->
    <view class="dailySettleBox" v-if="dailySettlementList && dailySettlementList.length>0">
      <view class="boxTop">
        <span class="topTitle">日结冲正信息</span>
        <view class="goDetail" @click="handleGoDailyDetail">
          查看明细
          <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourRight.png"/>
        </view>
      </view>

      <view class="detailBox">
        <view class="leftIcon">
          <image class="detailIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/dailyIcon.png"/>
        </view>
        <view class="rightBox">
          <view class="rightTop">
            <view class="detailTitle">冲正合计</view>
            <view class="detailValue">{{dailySettlementObj.CorrectAmount || ''}}</view>
          </view>
          <view class="rightBottom"></view>
        </view>
      </view>
    </view>


    <view class="tableBox" v-if="false">
      <view class="smallTitle">日结冲正信息表</view>
      <view class="tableRow" v-for="(item,index) in dailySettlementList" :key="index">

        <view class="rowItemBox">
          <view class="rowItem">
            <span class="label">结算日期：</span>
            <span class="value">{{item.StatisticsDate || ''}}</span>
          </view>
          <view class="rowItem">
            <span class="label">服务区名称：</span>
            <span class="value">{{item.ServerpartName || ''}}</span>
          </view>
        </view>

        <view class="rowItemBox">
          <view class="rowItem">
            <span class="label">门店名称：</span>
            <span class="value">{{item.ServerpartShopName || ''}}</span>
          </view>
          <view class="rowItem">
            <span class="label">冲正金额：</span>
            <span class="value">{{item.CorrectAmount? numeral($util.getMoney(item.CorrectAmount)).format('0,0.00'):''}}</span>
          </view>
        </view>

        <view class="rowItemBox">
          <view class="rowItem">
            <span class="label">冲正人员：</span>
            <span class="value">{{item.CorrectStaff || ''}}</span>
          </view>
          <view class="rowItem">
          </view>
        </view>

        <view class="rowItemBox">
          <view class="allRowItem">
            <span class="label">冲正说明：</span>
            <span class="value">{{item.CorrectDesc || ''}}</span>
          </view>
        </view>
        <view class="getMoreBox" v-if="item.children && item.children.length>0" @click="handleShowSupplementListChildren(item)">
          <image class="imgIcon" :style="{transform: item.showChildren?'rotate(-90deg)':'rotate(90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
        </view>

        <view v-if="item.children && item.children.length>0 && item.showChildren">
          <view class="line"></view>
          <view v-for="(subItem,subIndex) in item.children" :key="subIndex" style="padding-left: 32rpx">
            <view class="rowItemBox">
              <view class="rowItem">
                <span class="label">结算日期：</span>
                <span class="value">{{subItem.StatisticsDate || ''}}</span>
              </view>
              <view class="rowItem">
                <span class="label">服务区名称：</span>
                <span class="value">{{subItem.ServerpartName || ''}}</span>
              </view>
            </view>

            <view class="rowItemBox">
              <view class="rowItem">
                <span class="label">门店名称：</span>
                <span class="value">{{subItem.ServerpartShopName || ''}}</span>
              </view>
              <view class="rowItem">
                <span class="label">冲正金额：</span>
                <span class="value">{{subItem.CorrectAmount? numeral($util.getMoney(subItem.CorrectAmount)).format('0,0.00'):''}}</span>
              </view>
            </view>

            <view class="rowItemBox">
              <view class="rowItem">
                <span class="label">冲正人员：</span>
                <span class="value">{{subItem.CorrectStaff || ''}}</span>
              </view>
              <view class="rowItem">
              </view>
            </view>

            <view class="rowItemBox">
              <view class="allRowItem">
                <span class="label">冲正说明：</span>
                <span class="value">{{subItem.CorrectDesc || ''}}</span>
              </view>
            </view>

            <view class="line" v-if="subIndex!==item.children.length-1"></view>

          </view>
        </view>
        <view class="line" v-if="index!==yearDataList.length-1"></view>
      </view>
    </view>

<!--    合作商户合同期结算明细表-->
    <view class="renovationBox">
      <view v-for="(item,index) in yearDataList" :key="index">
        <view v-if="index!==yearDataList.length-1" style="width: calc(100% - 48rpx);margin-left: 24rpx;background-color: #F3F3F3;margin-bottom: 24rpx">
          <view class="renovationContent">
            <view class="renovationTop">
              <view class="topLeft">
                <image class="renovationIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/renovationIcon.png"/>
              </view>
              <view class="topRight">
                <view class="contentTitle">{{item.PeriodIndexStr ||''}}</view>
                <view style="display: flex;align-items: center;justify-content: space-between">
                  <view class="timeBox">{{item.StartDate || ''}} 至 {{item.EndDate || ''}}</view>
                  <view class="goMoreMonth" v-if="item.children && item.children.length>0" @click="handleGoMonthList(item)">
                    查看月度结算
                    <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourRight.png"/>
                  </view>
                </view>
              </view>
            </view>

            <view class="renovationMoney">
              <view class="itemTitle">营业额</view>
              <view class="revenueBox">
                <view class="revenueItem">
                  <view class="revenueValue">{{item.RevenueAmount?numeral(item.RevenueAmount).format('0,0.00'):'-'}}</view>
                  <view class="revenueLabel">合计</view>
                </view>
                <view class="revenueItem">
                  <view class="revenueValue">{{item.CashAmount?numeral(item.CashAmount).format('0,0.00'):'-'}}</view>
                  <view class="revenueLabel">现金</view>
                </view>
                <view class="revenueItem">
                  <view class="revenueValue">{{item.MobilePayAmount?numeral(item.MobilePayAmount).format('0,0.00'):'-'}}</view>
                  <view class="revenueLabel">微支付</view>
                </view>
              </view>
              <view class="line"></view>
              <view class="itemTitle">驿达收款</view>
              <view class="revenueBox">
                <view class="revenueItem">
                  <view class="revenueValue">{{item.RoyaltyAmount?numeral(item.RoyaltyAmount).format('0,0.00'):'-'}}</view>
                  <view class="revenueLabel">合计</view>
                </view>
              </view>
              <view class="line"></view>
              <view class="itemTitle">营收费用</view>
              <view class="revenueBox">
                <view class="revenueItem">
                  <view class="revenueValue">{{item.ReceivableAmount?numeral(item.ReceivableAmount).format('0,0.00'):'-'}}</view>
                  <view class="revenueLabel">合计</view>
                </view>
                <view class="revenueItem">
                  <view class="revenueValue">{{item.GuaranteeFee?numeral(item.GuaranteeFee).format('0,0.00'):'-'}}</view>
                  <view class="revenueLabel">租金</view>
                </view>
                <view class="revenueItem">
                  <view class="revenueValue">{{item.RefundSupplement?numeral(item.RefundSupplement).format('0,0.00'):'-'}}</view>
                  <view class="revenueLabel">退补款</view>
                </view>
              </view>
            </view>

            <view class="stateBox" v-if="detailObj.Approvalstate!==9">
              <image class="stateIcon" :src="detailObj.Approvalstate===0?'https://eshangtech.com/ShopICO/yxcl/settlementApproval/stateIcon.png':detailObj.Approvalstate===1?'https://eshangtech.com/ShopICO/yxcl/settlementApproval/pendIcon.png':''"/>
              <span class="stateText">{{detailObj.Approvalstate===0?'待结算':detailObj.Approvalstate===1?'审核中':''}}</span>
            </view>
            <view class="overBox" v-else>
              <image class="overIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/isPassIcon.png"/>
            </view>

          </view>
        </view>
        <view v-else>
          <view class="pageDetailBox">
            <view class="detailBoxTop">
              <span class="detailBoxTitle">合作商户合同期结算明细表</span>
              <view class="goMoreMonth" v-if="item.children && item.children.length>0"  @click="handleGoMonthList(item)">
                查看月度结算
                <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourRight.png"/>
              </view>
            </view>
            <view class="detailBoxTime">
              <image class="timeIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/timeIcon.png"/>
              <view class="endTime">结算时间：{{item.StartDate || ''}} 至 {{item.EndDate || ''}}</view>
            </view>

            <view class="table">
              <view class="tableHeader">
                <view class="firstTableTitle">数据类型</view>
                <view class="borderRight"></view>
                <view class="otherTableTitle">
<!--                  <image class="dataIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/settlementIcon.png"/>-->
                  结算数据
                </view>
                <view class="borderRight"></view>
                <view class="otherTableTitle">
<!--                  <image class="dataIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/successData.png"/>-->
                  精算数据
                </view>
              </view>
              <view class="tableBody">
                <view class="tableRow">
                  <view class="labelRow refundPay">退补款</view>
                  <view class="borderRight"></view>
                  <view class="valueRow refundPay">{{item.RefundSupplement?numeral(item.RefundSupplement).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow refundPay">{{yearDataListObj.RefundSupplement?numeral(yearDataListObj.RefundSupplement).format('0,0.00'):''}}</view>
                </view>

                <view class="tableRow tableRowGray">
                  <view class="labelRow">营业额合计</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.RevenueAmount?numeral(item.RevenueAmount).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">
                    {{yearDataListObj.RevenueAmountTEXT?yearDataListObj.RevenueAmountTEXT:''}}
                    <view style="color: red" v-if="yearDataListObj.CorrectAmount">({{yearDataListObj.CorrectAmount>0?'+':''}}{{yearDataListObj.CorrectAmountTEXT || ''}})</view>
                  </view>
                </view>

                <view class="tableRow">
                  <view class="labelRow beforeIcon" >现金</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.CashAmount?numeral(item.CashAmount).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{yearDataListObj.CashAmount?numeral(yearDataListObj.CashAmount).format('0,0.00'):''}}</view>
                </view>

                <view class="tableRow tableRowGray">
                  <view class="labelRow beforeIcon" >微支付</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.MobilePayAmount?numeral(item.MobilePayAmount).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{yearDataListObj.MobilePayAmount?numeral(yearDataListObj.MobilePayAmount).format('0,0.00'):''}}</view>
                </view>

                <view class="tableRow">
                  <view class="labelRow">驿达收款</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.RoyaltyAmount?numeral(item.RoyaltyAmount).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{yearDataListObj.RoyaltyAmount?numeral(yearDataListObj.RoyaltyAmount).format('0,0.00'):''}}</view>
                </view>

                <view class="tableRow tableRowGray">
                  <view class="labelRow">营收费用合计</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.ReceivableAmount?numeral(item.ReceivableAmount).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{yearDataListObj.ReceivableAmount?numeral(yearDataListObj.ReceivableAmount).format('0,0.00'):''}}</view>
                </view>

                <view class="tableRow">
                  <view class="labelRow beforeIcon" >租金</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.GuaranteeFee || item.GuaranteeFee===0?numeral(item.GuaranteeFee).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{yearDataListObj.GuaranteeFee?numeral(yearDataListObj.GuaranteeFee).format('0,0.00'):''}}</view>
                </view>

                <view class="tableRow tableRowGray">
                  <view class="labelRow beforeIcon">物业费</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.PropertyFee || item.PropertyFee===0?numeral(item.PropertyFee).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{yearDataListObj.PropertyFee || yearDataListObj.PropertyFee===0?numeral(yearDataListObj.PropertyFee).format('0,0.00'):''}}</view>
                </view>

                <view class="tableRow">
                  <view class="labelRow beforeIcon">房租</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.HouseRent || item.HouseRent===0?numeral(item.HouseRent).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{yearDataListObj.HouseRent || yearDataListObj.HouseRent===0?numeral(yearDataListObj.HouseRent).format('0,0.00'):''}}</view>
                </view>

                <view class="tableRow tableRowGray">
                  <view class="labelRow beforeIcon">罚款</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.BreachPenalty || item.BreachPenalty===0?numeral(item.BreachPenalty).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{yearDataListObj.BreachPenalty || yearDataListObj.BreachPenalty===0?numeral(yearDataListObj.BreachPenalty).format('0,0.00'):''}}</view>
                </view>

                <view class="tableRow">
                  <view class="labelRow beforeIcon">电费</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.ElectricityCharge || item.ElectricityCharge===0?numeral(item.ElectricityCharge).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{yearDataListObj.ElectricityCharge || yearDataListObj.ElectricityCharge===0?numeral(yearDataListObj.ElectricityCharge).format('0,0.00'):''}}</view>
                </view>

                <view class="tableRow tableRowGray">
                  <view class="labelRow beforeIcon">水费</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.WaterCharge || item.WaterCharge===0?numeral(item.WaterCharge).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{yearDataListObj.WaterCharge || yearDataListObj.WaterCharge===0?numeral(yearDataListObj.WaterCharge).format('0,0.00'):''}}</view>
                </view>

                <view class="tableRow">
                  <view class="labelRow beforeIcon" >其他</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{item.OtherFee || item.OtherFee===0?numeral(item.OtherFee).format('0,0.00'):'-'}}</view>
                  <view class="borderRight"></view>
                  <view class="valueRow">{{yearDataListObj.OtherFee || yearDataListObj.OtherFee===0?numeral(yearDataListObj.OtherFee).format('0,0.00'):''}}</view>
                </view>


              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="tableBoxs">
        <view class="amountBox">
          <div class="commodityContent">
            <input class="color1" type="number" v-model="correctionAmount"/>
            <div>
              <span class="ctitle">冲正金额</span>
            </div>
          </div>
          <view class="btn">
            <span class="btnItem" @click="handleRecalibrate">精算数据</span>
            <span class="btnItem" v-if="isSuccessRecalibrate" style="margin-left: 16rpx" @click="handleShowApplyForPop">发起申请</span>
          </view>
        </view>
      </view>
    </view>




    <view style="background: #fff" v-if="false">
      <view class="tableBox" >
        <view class="smallTitle">合作商户合同期结算明细表</view>
        <view class="smallTitle">结算数据</view>
        <view class="tableRow" v-for="(item,index) in yearDataList" :key="index">

          <view class="rowItemBox">
            <view class="rowItem" style="width: 60%">
              <span class="label">期限：</span>
              <span class="value">{{item.PeriodDesc ||''}}</span>
            </view>
            <view class="rowItem" style="width: 40%">
              <span class="label">结算状态：</span>
              <span class="value" :style="{color: detailObj.Approvalstate>0?'#faad14':'#1890ff'}">{{detailObj.Approvalstate>0?'已结算':'待结算'}}</span>
            </view>
          </view>

          <view class="rowItemBox">
            <view class="rowItem">
              <span class="label">现金：</span>
              <span class="value">{{item.CashAmount?numeral($util.getMoney(item.CashAmount)).format('0,0.00'):''}}</span>
            </view>
            <view class="rowItem">
              <span class="label">微支付：</span>
              <span class="value">{{item.MobilePayAmount?numeral($util.getMoney(item.MobilePayAmount)).format('0,0.00'):''}}</span>
            </view>
          </view>

          <view class="rowItemBox">
            <view class="rowItem">
              <span class="label">营业额合计：</span>
              <span class="value">{{item.RevenueAmount?numeral($util.getMoney(item.RevenueAmount)).format('0,0.00'):''}}</span>
            </view>
            <view class="rowItem">
              <span class="label">驿达收款：</span>
              <span class="value">{{item.RoyaltyAmount?numeral($util.getMoney(item.RoyaltyAmount)).format('0,0.00'):''}}</span>
            </view>
          </view>

          <view class="rowItemBox">
            <view class="rowItem">
              <span class="label">营收费用合计：</span>
              <span class="value">{{item.ReceivableAmount?numeral($util.getMoney(item.ReceivableAmount)).format('0,0.00'):''}}</span>
            </view>
            <view class="rowItem">
              <span class="label">租金：</span>
              <span class="value">{{item.GuaranteeFee?numeral($util.getMoney(item.GuaranteeFee)).format('0,0.00'):''}}</span>
            </view>
          </view>
          <view class="rowItemBox">
            <view class="rowItem">
              <span class="label">退补款：</span>
              <span class="value">{{item.RefundSupplement?numeral($util.getMoney(item.RefundSupplement)).format('0,0.00'):''}}</span>
            </view>
            <view class="rowItem">
              <span class="label"></span>
              <span class="value"></span>
            </view>
          </view>

          <view class="getMoreBox" v-if="item.children && item.children.length>0" @click="handleShowChildren(item)">
            <image class="imgIcon" :style="{transform: item.showChildren?'rotate(-90deg)':'rotate(90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
          </view>
          <view v-if="item.children && item.children.length>0 && item.showChildren">
            <view class="line"></view>
            <view v-for="(subItem,subIndex) in item.children" :key="subIndex" style="padding-left: 32rpx">
              <view class="rowItemBox">
                <view class="rowItem" style="width: 60%">
                  <span class="label">期限：</span>
                  <span class="value">{{subItem.PeriodDesc ||''}}</span>
                </view>
                <view class="rowItem" style="width: 40%">
                  <span class="label">结算状态：</span>
                  <span class="value" :style="{color: subItem.IsApplySuccess?'#faad14':'#1890ff'}">{{subItem.IsApplySuccess?'已结算':'待结算'}}</span>
                </view>
              </view>

              <view class="rowItemBox">
                <view class="rowItem">
                  <span class="label">现金：</span>
                  <span class="value">{{subItem.CashAmount?numeral($util.getMoney(subItem.CashAmount)).format('0,0.00'):''}}</span>
                </view>
                <view class="rowItem">
                  <span class="label">微支付：</span>
                  <span class="value">{{subItem.MobilePayAmount?numeral($util.getMoney(subItem.MobilePayAmount)).format('0,0.00'):''}}</span>
                </view>
              </view>

              <view class="rowItemBox">
                <view class="rowItem">
                  <span class="label">营业额合计：</span>
                  <span class="value">{{subItem.RevenueAmount?numeral($util.getMoney(subItem.RevenueAmount)).format('0,0.00'):''}}</span>
                </view>
                <view class="rowItem">
                  <span class="label">驿达收款：</span>
                  <span class="value">{{subItem.RoyaltyAmount?numeral($util.getMoney(subItem.RoyaltyAmount)).format('0,0.00'):''}}</span>
                </view>
              </view>

              <view class="rowItemBox">
                <view class="rowItem">
                  <span class="label">营收费用合计：</span>
                  <span class="value">{{subItem.ReceivableAmount?numeral($util.getMoney(subItem.ReceivableAmount)).format('0,0.00'):''}}</span>
                </view>
                <view class="rowItem">
                  <span class="label">租金：</span>
                  <span class="value">{{subItem.GuaranteeFee?numeral($util.getMoney(subItem.GuaranteeFee)).format('0,0.00'):''}}</span>
                </view>
              </view>
              <view class="rowItemBox">
                <view class="rowItem">
                  <span class="label">退补款：</span>
                  <span class="value">{{subItem.RefundSupplement?numeral($util.getMoney(subItem.RefundSupplement)).format('0,0.00'):''}}</span>
                </view>
                <view class="rowItem">
                  <span class="label"></span>
                  <span class="value"></span>
                </view>
              </view>

              <view class="line" v-if="subIndex!==item.children.length-1"></view>
            </view>
          </view>

          <view class="line" v-if="index!==yearDataList.length-1"></view>
        </view>
      </view>

      <view class="line" v-if="isSuccessRecalibrate"></view>

      <view class="tableBox" v-if="isSuccessRecalibrate">
        <view class="smallTitle">精算数据</view>
        <view class="tableRow" v-for="(item,index) in yearDataListAfter" :key="index">

          <view class="rowItemBox">
            <view class="rowItem" style="width: 60%">
              <span class="label">期限：</span>
              <span class="value">{{item.PeriodDesc ||''}}</span>
            </view>
            <view class="rowItem" style="width: 40%">
              <span class="label">结算状态：</span>
              <span class="value" :style="{color: detailObj.Approvalstate>0?'#faad14':'#1890ff'}">{{detailObj.Approvalstate>0?'已结算':'待结算'}}</span>
            </view>
          </view>

          <view class="rowItemBox">
            <view class="rowItem">
              <span class="label">现金：</span>
              <span class="value">{{item.CashAmount?numeral($util.getMoney(item.CashAmount)).format('0,0.00'):''}}</span>
            </view>
            <view class="rowItem">
              <span class="label">微支付：</span>
              <span class="value">{{item.MobilePayAmount?numeral($util.getMoney(item.MobilePayAmount)).format('0,0.00'):''}}</span>
            </view>
          </view>

          <view class="rowItemBox">
            <view class="rowItem" style="width: 60%">
              <span class="label">营业额合计：</span>
              <span class="value">{{item.RevenueAmount?numeral($util.getMoney(item.RevenueAmount)).format('0,0.00'):''}}{{item.addRevenueMoney?`(${item.addRevenueMoney>0?'+':''}${item.addRevenueMoney})`:''}}</span>
            </view>
            <view class="rowItem" style="width: 40%">
              <span class="label">驿达收款：</span>
              <span class="value">{{item.RoyaltyAmount?numeral($util.getMoney(item.RoyaltyAmount)).format('0,0.00'):''}}</span>
            </view>
          </view>

          <view class="rowItemBox">
            <view class="rowItem">
              <span class="label">营收费用合计：</span>
              <span class="value">{{item.ReceivableAmount?numeral($util.getMoney(item.ReceivableAmount)).format('0,0.00'):''}}</span>
            </view>
            <view class="rowItem">
              <span class="label">租金：</span>
              <span class="value">{{item.GuaranteeFee?numeral($util.getMoney(item.GuaranteeFee)).format('0,0.00'):''}}</span>
            </view>
          </view>
          <view class="rowItemBox">
            <view class="rowItem">
              <span class="label">退补款：</span>
              <span class="value">{{item.RefundSupplement?numeral($util.getMoney(item.RefundSupplement)).format('0,0.00'):''}}</span>
            </view>
            <view class="rowItem">
              <span class="label"></span>
              <span class="value"></span>
            </view>
          </view>
        </view>
      </view>

      <view class="tableBox">
        <view class="amountBox">
          <div class="commodityContent">
            <input class="color1" type="number" v-model="correctionAmount"/>
            <div>
              <span class="ctitle">冲正金额</span>
            </div>
          </div>
          <view class="btn">
            <span class="btnItem" @click="handleRecalibrate">精算数据</span>
          </view>
        </view>
      </view>
    </view>

    <!--    顶部-->
    <view style="background: #fff" v-if="false">
      <view class="pageTitle">{{detailObj.BUSINESSPROJECT_NAME || ''}}</view>
      <!--  顶部详情-->
      <view class="detailBox">
        <view class="detailRow">
          <view class="detailItem">
            <span class="label">开始日期：</span>
            <span class="value">{{detailObj.STARTDATE || ''}}</span>
          </view>
          <view class="detailItem">
            <span class="label">截止日期：</span>
            <span class="value">{{detailObj.ENDDATE || ''}}</span>
          </view>
        </view>

        <view class="detailRow">
          <view class="detailAllItem">
            <span class="label">经营商户：</span>
            <span class="value">{{detailObj.MERCHANTS_NAME || ''}}</span>
          </view>
        </view>

        <view class="detailRow">
          <view class="detailItem">
            <span class="label">经营模式：</span>
            <span class="value">{{detailObj.BUSINESS_TYPE?contractType[detailObj.BUSINESS_TYPE] : ''}}</span>
          </view>
          <view class="detailItem">
            <span class="label">结算模式：</span>
            <span class="value">{{detailObj.SETTLEMENT_MODES?SETTLEMENT_MODESObj[detailObj.SETTLEMENT_MODES] : ''}}</span>
          </view>
        </view>

        <view class="detailRow">
          <view class="detailAllItem">
            <span class="label">经营门店：</span>
            <span class="value">{{detailObj.SERVERPARTSHOP_NAME || ''}}</span>
          </view>
        </view>

      </view>
    </view>
<!--发起结算的按钮-->
<!--    <view class="btnBox" v-if="isSuccessRecalibrate">-->
<!--      <view class="btnList">-->
<!--        <view class="btnItem" @click="handleShowApplyForPop">-->
<!--          <view class="iconBox">-->
<!--            <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/yj-btn.png"/>-->
<!--          </view>-->
<!--          <span>发起申请</span>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->

    <!-- 年度申请 -->
    <UniPop :show="isShowYearApplyFor" @hidePopup="closeYearApplyFor" type="middle" @touchmove.prevent round="true">
      <view class="uniPopupYearApplyFor">
        <view class="uniPopupTop">
          <text class="uniPopupTitle">年度申请</text>
          <image @click="closeYearApplyFor" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
        </view>

        <view class="uniPopupContent">
          <view class="contentItem">
            <view class="label">请选择下一阶段审批人</view>
            <picker class="pick" :value="nextPersonIndex" :range="nextPerson" range-key="label" @change="handleChangePerson">
              {{nextPersonValue? showLabel:'--请选择--'}}
            </picker>
          </view>

          <view class="contentItem" style="margin-top: 8px">
            <view class="label">审核意见</view>
            <view class="text-area-box">
              <textarea placeholder="请输入您的意见" v-model="approveDesc"/>
            </view>
          </view>

          <view class="btn">
            <span class="btnItem" @click="handleCreate">确认结算</span>
          </view>
        </view>


      </view>
    </UniPop>
  </view>
</template>
<script>
import {wrapTreeNode} from "../../util/dateTime";
import request from '@/util/index.js'
import UniPop from '@/components/uni-popup.vue'
import numeral from "numeral";
import moment from "moment";
import {mapGetters} from "vuex";
export default {
  name: "yearSettlement",
  components: {UniPop},
  data() {
    return {
      detailObj:{},
      SETTLEMENT_MODESObj:{
        1000:"营收回款",
        2000: "资金返款",
        3000: "营收分润",
        4000: "组合分润",
        9998: "阶段提成",
        9999: "分段提成",
      },// 写死的枚举
      contractType:{
        1000: '合作经营',
        2000: '固定租金',
        3000: '保底采购',
        4000: '业主自营',
      },// 写死的枚举
      yearDataList:[],
      yearDataListAfter:[],// 精算之后的数据
      otherDataObj: {},
      dailySettlementList:[],//日结信息冲正表数据
      dailySettlementObj:{},// 日结信息冲正数据第一个的数据展示 合计
      correctionAmount:'0',// 冲正金额
      isSuccessRecalibrate: false,// 完成了精算数据
      isShowYearApplyFor: false,// 显示年度申请悬浮框
      nextPersonIndex:'',// 选择审核人的索引
      nextPerson:'',// 审核人列表
      nextPersonValue:'',// 审核人的value
      showLabel:'',// 审核人名称
      approveDesc:'',// 意见
      yearId:'',// 年度id
      yearAfterData:[],// 年度精算之后的数据
      menu:{},//
      yearDataListObj:{}
    }
  },
  computed: {
    ...mapGetters({'users':'getUser'}),
  },
  async onLoad(query){
    this.menu = uni.getMenuButtonBoundingClientRect()
    console.log('query',query)
    if(query.obj){
      this.detailObj = JSON.parse(query.obj)
    }

    await this.handleGetYearSettlement()
    await this.handleGetSupplementList()
    await this.handleGetPersonList()

    // 判断是不是二次的申请 如果是要拿到新的结算数据
    if(query.yearId){
      this.yearId = query.yearId
      await this.handleGetYearSettlementRight()
    }
  },
  onUnload() {
    this.$util.addUserBehaviorNew()
  },
  methods:{
    numeral,
    // 跳转到日结冲正明细页面
    handleGoDailyDetail(){
      let obj = this.dailySettlementList[0]
      console.log('obj',obj)
      let res = ''
      if (obj.children && obj.children.length>0){
        res = JSON.stringify(obj.children)
      }
      this.$util.toNextRoute('navigateTo', `/pages/settlementApproval/dailyList?res=${res}`)
    },
    // 跳转到查看月份结算列表的页面
    handleGoMonthList(obj){
      console.log('obj',obj)
      let list = JSON.stringify(obj.children)
      this.$util.toNextRoute('navigateTo', `/pages/settlementApproval/monthList?list=${list}&detailObj=${JSON.stringify(this.detailObj)}`)
    },
    // 返回按钮
    handleBack(){
      this.$util.toNextRoute('navigateBack',{ delta: 1})
    },
    // 打开年度申请的悬浮框
    handleShowApplyForPop(){
      this.isShowYearApplyFor = true
    },
    // 关闭年度申请悬浮框
    closeYearApplyFor(){
      this.isShowYearApplyFor = false
    },
    // 拿到合作商户合同期结算明细表的数据
    async handleGetYearSettlement(){
      const req = {
        BUSINESSPROJECT_ID: this.detailObj.BUSINESSPROJECT_ID,
        SHOPROYALTY_ID: this.detailObj.SHOPROYALTY_ID
      }
      uni.showLoading({
        title: '请求数据...'
      })
      const data = await request.$webGet('EShangApiMain/Finance/GetReconciliation',req)
      this.otherDataObj = data.Result_Data.OtherData
      let res = data.Result_Data.List[0]
      console.log('res',res)
      // 页面显示的结算数据
      let resList = wrapTreeNode(res.ProjectPeriodList.children)
      if(resList && resList.length>0){
        resList.forEach(item=>{
          item.level = 1
          if(item.children && item.children.length>0){
            item.showChildren = false
            item.children.forEach(subItem=>{
              subItem.level = 2
            })
          }
        })
      }
      this.yearDataList = resList
      console.log('this.yearDataList',this.yearDataList )
      uni.hideLoading()
    },
    // 请求年度的精算数据
    async handleGetYearSettlementRight() {
      const req = {
        BUSINESSPROJECT_ID: this.detailObj.BUSINESSPROJECT_ID,
        SHOPROYALTY_ID: this.detailObj.SHOPROYALTY_ID
      }
      uni.showLoading({
        title: '请求精算数据...'
      })
      const data = await request.$webGet('EShangApiMain/Finance/GetProjectPeriodAccount',req)
      let res = data.Result_Data
      // 页面显示的结算数据
      let resList = wrapTreeNode(res.ProjectPeriodList)
      console.log('resList222222', resList)
      this.yearAfterData = resList
      uni.hideLoading()
    },
    // 显示子级
    handleShowChildren(obj){
      let list = JSON.parse(JSON.stringify(this.yearDataList))
      list.forEach(item=>{
        if(item.ShopRoyalty_Id === obj.ShopRoyalty_Id && item.PeriodIndex === obj.PeriodIndex){
          item.showChildren = !item.showChildren
        }
      })
      this.yearDataList = list
    },
    // 拿日结信息冲正表的记录
    async handleGetSupplementList(){
      // 拿最小的开始  最大的结束
      let startTime = ''
      let endTime = ''
      let ShopRoyaltyIdStr = ''
      if (this.yearDataList && this.yearDataList.length > 0) {
        this.yearDataList.forEach((item, index) => {
          if (ShopRoyaltyIdStr) {
            ShopRoyaltyIdStr += `,${item.ShopRoyalty_Id}`
          } else {
            ShopRoyaltyIdStr = `${item.ShopRoyalty_Id}`
          }

          let stareDate = new Date(item.StartDate.replace('.','/').replace('.','/'))
          const startY = stareDate.getFullYear()
          console.log('startY',startY)
          let startM = stareDate.getMonth() + 1 <10?'0' + (stareDate.getMonth() + 1) : stareDate.getMonth() + 1
          let startD = stareDate.getDate() + 1 <10?'0' + stareDate.getDate() : stareDate.getDate()
          let stareTime = `${startY}-${startM}-${startD}`

          let endDate = new Date(item.EndDate.replace('.','/').replace('.','/'))
          const endY = endDate.getFullYear()
          let endM = endDate.getMonth() + 1 <10?'0' + (endDate.getMonth() + 1) : endDate.getMonth() + 1
          let endD = endDate.getDate() + 1 <10?'0' + endDate.getDate() : endDate.getDate()
          let endTimeText = `${endY}-${endM}-${endD}`
          console.log('stareTime',stareTime)
          console.log('endTimeText',endTimeText)
          if (index === 0) {
            startTime = moment(stareTime).format('YYYY-MM-DD')
            endTime = moment(endTimeText).format('YYYY-MM-DD')
          } else {
            if (new Date(moment(stareTime).format('YYYY-MM-DD')).getTime() < new Date(startTime).getTime()) {
              startTime = moment(stareTime).format('YYYY-MM-DD')
            }
            if (new Date(moment(endTimeText).format('YYYY-MM-DD')).getTime() > new Date(endTime).getTime()) {
              endTime = moment(endTimeText).format('YYYY-MM-DD')
            }
          }
        })
      }
      const req = {
        BusinessProjectId: this.otherDataObj.BUSINESSPROJECT_ID,
        ShopRoyaltyId: ShopRoyaltyIdStr,
        ServerpartShopId: this.otherDataObj.SERVERPARTSHOP_ID,
        StartDate: startTime,
        EndDate: endTime,
      }
      console.log('req',req)
      uni.showLoading({
        title: '请求数据...'
      })
      const data = await  request.$webGet('EShangApiMain/Finance/GetPeriodSupplementList',req)
      let res = wrapTreeNode(data.Result_Data.List)
      if(res && res.length>0){
        res.forEach(item=>{
          item.level = 1
          if(item.children && item.children.length>0){
            item.showChildren = false
            item.children.forEach(subItem=>{
              subItem.level = 2
            })
          }
        })
      }
      console.log('res222',res)
      this.dailySettlementList = res
      this.dailySettlementObj = res[0]
      if(res && res.length>0){
        this.correctionAmount = res[0].CorrectAmount
      }
      uni.hideLoading()
    },
    handleShowSupplementListChildren(obj){
      let list = JSON.parse(JSON.stringify(this.dailySettlementList))
      list.forEach(item=>{
        if(item.StatisticsDate === obj.StatisticsDate && item.level === obj.level){
          item.showChildren = !item.showChildren
        }
      })
      this.dailySettlementList = list
    },
    // 精算数据
    handleRecalibrate(){
      let newReqList = []
      console.log('this.yearDataList',this.yearDataList)
      this.yearDataList.forEach((item) => {
        if (item.PeriodDesc !== '精算数据') {
          newReqList.push(item)
        }
      })
      // 最近的一条数据
      let newObj = JSON.parse(JSON.stringify(newReqList[newReqList.length - 1]))
      newObj.RevenueAmount = newObj.RevenueAmount + (Number(this.correctionAmount) || 0)
      newObj.addRevenueMoney = (Number(this.correctionAmount) || 0)
      let isBig = false
      // 判断现在新的小计乘以提升比率 是否大于租金
      if ((newObj.RevenueAmount * (newObj.GuaranteeRatio / 100)) > newObj.GuaranteeFee) {
        isBig = true
      }
      // 如果新小计大于租金 那么租金就变成小计乘以比率 反之就是原本的值
      newObj.GuaranteeFee = isBig ? (newObj.RevenueAmount * (newObj.GuaranteeRatio / 100)) : newObj.GuaranteeFee
      if (isBig) {
        // 算出合计
        newObj.ReceivableAmount = newObj.GuaranteeFee + newObj.PropertyFee + newObj.HouseRent + newObj.BreachPenalty + newObj.ElectricityCharge + newObj.WaterCharge + newObj.OtherFee
        // 算出退补款
        newObj.RefundSupplement = newObj.RoyaltyAmount - newObj.ReceivableAmount
      }
      let list = []
      newObj.PeriodDesc = '精算数据'
      newObj.children = null
      console.log('newObj',newObj)
      list.push(newObj)
      this.yearDataListAfter = list
      list.forEach(item => {
        item.level = 1
        item.CorrectAmount = this.correctionAmount
        item.showChildren = false
        item.CashAmountTEXT = numeral(item.CashAmount).format('0,0.00')
        item.MobilePayAmountTEXT = numeral(item.MobilePayAmount).format('0,0.00')
        item.RevenueAmountTEXT = numeral(item.RevenueAmount).format('0,0.00')
        // numeral(this.$util.getMoney(item.RevenueAmount)).format('0,0.00') + (item.CorrectAmount ? ('(' + (item.CorrectAmount > 0 ? '+' : '') + item.CorrectAmount + ')') : '')
        item.CorrectAmountTEXT = numeral(item.CorrectAmount).format('0,0.00')
        item.RoyaltyAmountTEXT = numeral(item.RoyaltyAmount).format('0,0.00')
        item.ReceivableAmountTEXT = numeral(item.ReceivableAmount).format('0,0.00')
        item.GuaranteeFeeTEXT = numeral(item.GuaranteeFee).format('0,0.00')
        item.RefundSupplementTEXT = numeral(item.RefundSupplement).format('0,0.00')
        item.children = null
      })
      this.yearDataListObj = list[0]
      console.log('this.yearDataListAfter',this.yearDataListAfter)
      this.isSuccessRecalibrate = true
    },
    // 选择的审核人
    handleChangePerson(e){
      console.log('e',e)
      this.nextPersonIndex = Number(e.detail.value)
      let obj = this.nextPerson[this.nextPersonIndex].value
      let [name,value] = obj.split('-')
      this.nextPersonValue = value
      this.showLabel = name
      console.log('obj',obj)
    },
    // 拿到审核人列表
    async handleGetPersonList(){
      const req = {
        OperationType: 11,
        CurState: 1000,
        IsValid: 1,
        ShowApprovalUser: true,
        ServerpartIds: this.detailObj.SERVERPART_ID || '',
        ShopIds: this.detailObj.SERVERPARTSHOP_ID || ''
      }
      uni.showLoading({
        title: '请求审批人列表...'
      })
      const data = await request.$webGet('EShangApiMain/BusinessProcess/GetAPPROVALROUTEDetail', req)
      console.log('data',data)
      let res = data.Result_Data
      if (res.UserList && res.UserList.length > 0) {
        let list = []
        res.UserList.forEach((item) => {
          list.push({ label: item.USER_NAME, value: `${item.USER_NAME}-${item.USER_ID}` })
        })
        this.nextPerson = list
        console.log('this.nextPerson',this.nextPerson)
      }
      uni.hideLoading()
    },
    // 确认结算
    async handleCreate(){
      if(!this.nextPersonValue){
        uni.showToast({
          icon:'error',
          duration: 2000,
          title: '请选择审批人',
        });
        return
      }
      if(!this.approveDesc){
        uni.showToast({
          icon:'error',
          duration: 2000,
          title: '请输入审核意见',
        });
        return
      }
      console.log('this.detailObj',this.detailObj)
      uni.showLoading({
        title: '提交申请...'
      })
      let allList = []
      let resObj = this.yearDataListAfter[0]
      if(resObj){
        resObj.CORRECT_AMOUNT = resObj.CORRECT_AMOUNT || 0
      }

      if(this.yearDataList && this.yearDataList.length>0){
        let newList = []
        let reqList = JSON.parse(JSON.stringify(this.yearDataList))
        console.log('reqList',reqList)
        console.log('this.yearAfterData',this.yearAfterData)
        if(this.yearAfterData && this.yearAfterData.length>0){
          reqList.forEach(item=>{
            this.yearAfterData.forEach(subItem=>{
              if(moment(item.EndDate.replace('.','-').replace('.','-')).format('YYYY-MM-DD')  === moment(subItem.EndDate).format('YYYY-MM-DD') && moment(item.StartDate.replace('.','-').replace('.','-')).format('YYYY-MM-DD')  === moment(subItem.StartDate).format('YYYY-MM-DD')){
                console.log(subItem)
                item.RevenueConfirmId = subItem.RevenueConfirmId
              }
            })
            let childrenList = []
            if(this.yearAfterData && this.yearAfterData.length>0){
              let obj = this.yearAfterData[0]
              if(obj.children && obj.children.length>0){
                childrenList = obj.children
              }
            }
            if(item.children && item.children.length>0){
              if(childrenList && childrenList.length>0){
                item.children.forEach(subItem=>{
                  childrenList.forEach(childrenItem=>{
                    if(moment(childrenItem.EndDate).format('YYYY-MM-DD')  === moment(subItem.EndDate.replace('.','-').replace('.','-')).format('YYYY-MM-DD') && moment(childrenItem.StartDate).format('YYYY-MM-DD')  === moment(subItem.StartDate.replace('.','-').replace('.','-')).format('YYYY-MM-DD')){
                      subItem.RevenueConfirmId = childrenItem.RevenueConfirmId
                      subItem.PeriodIndexStr = childrenItem.PeriodIndexStr
                      subItem.PeriodIndex = childrenItem.PeriodIndex
                    }
                  })
                })
              }
            }
          })
        }


        console.log('reqList231231231',reqList)

        reqList.forEach((item) => {
          if (item.PeriodIndex === resObj.PeriodIndex) {
            newList.push({
              ...resObj,
              RevenueConfirmId: item.RevenueConfirmId,
              children: item.children
            })
          } else {
            newList.push(item)
          }
        })
        console.log('newList',newList)

        newList.forEach((item, index) => {
          if (item.children && item.children.length > 0) {
            const childrenList = item.children
            // 传给接口的list
            const modalList= []
            if (childrenList && childrenList.length > 0) {
              childrenList.forEach((subItem) => {
                modalList.push({
                  BUSINESSPROJECT_ID: this.detailObj.BUSINESSPROJECT_ID,
                  BUSINESSPROJECT_NAME: this.detailObj.BUSINESSPROJECT_NAME,
                  SHOPROYALTY_ID: subItem.ShopRoyalty_Id,
                  SERVERPARTSHOP_ID: this.detailObj.SERVERPARTSHOP_ID,
                  BUSINESS_STARTDATE: subItem.StartDate,
                  BUSINESS_ENDDATE: subItem.EndDate,
                  REVENUECONFIRM_ID: subItem.RevenueConfirmId,
                  GUARANTEE_AMOUNT: subItem.MinturnOver,
                  GUARANTEERATIO: subItem.GuaranteeRatio,
                  ACTUAL_REVENUE: subItem.RevenueAmount,
                  PARTYA_SHAREPROFIT: subItem.RoyaltyTheory,
                  PARTYB_SHAREPROFIT: subItem.SubroyaltyTheory,
                  LIQUIDATION_AMOUNT: subItem.RefundSupplement,
                  ACTUAL_ACCOUNTS: subItem.GuaranteeFee,
                  ROYALTY_PRICE: subItem.RoyaltyAmount,
                  SUBROYALTY_PRICE: subItem.SubroyaltyAmount,
                  MOBILEPAY_AMOUNT: subItem.MobilePayAmount,
                  CASHPAY_AMOUNT: subItem.CashAmount,
                  MERCHANTS_ID: this.detailObj.MERCHANTS_ID,
                  MERCHANTS_NAME: this.detailObj.MERCHANTS_NAME,
                  BUSINESS_PERIOD: subItem.PeriodIndexStr,
                  PERIOD_INDEX: subItem.PeriodIndex,
                  PROPERTYFEE: subItem.PropertyFee,
                  HOUSERENT: subItem.HouseRent,
                  BREACHPENALTY: subItem.BreachPenalty,
                  ELECTRICITYCHARGE: subItem.ElectricityCharge,
                  WATERCHARGE: subItem.WaterCharge,
                  OTHERFEE: subItem.OtherFee
                })
              })
            }
            if (index + 1 === newList.length) {
              allList.push({
                node: {
                  BUSINESSPROJECT_ID: this.detailObj.BUSINESSPROJECT_ID,
                  BUSINESSPROJECT_NAME: this.detailObj.BUSINESSPROJECT_NAME,
                  SHOPROYALTY_ID: item.ShopRoyalty_Id,
                  SERVERPARTSHOP_ID: this.detailObj.SERVERPARTSHOP_ID,
                  BUSINESS_STARTDATE: item.StartDate,
                  BUSINESS_ENDDATE: item.EndDate,
                  GUARANTEE_AMOUNT: item.MinturnOver,
                  GUARANTEERATIO: item.GuaranteeRatio,
                  REVENUECONFIRM_ID: item.RevenueConfirmId,
                  ACTUAL_REVENUE: item.RevenueAmount,
                  PARTYA_SHAREPROFIT: item.RoyaltyTheory,
                  PARTYB_SHAREPROFIT: item.SubroyaltyTheory,
                  LIQUIDATION_AMOUNT: item.RefundSupplement,
                  ACTUAL_ACCOUNTS: item.GuaranteeFee,
                  ROYALTY_PRICE: item.RoyaltyAmount,
                  SUBROYALTY_PRICE: item.SubroyaltyAmount,
                  MOBILEPAY_AMOUNT: item.MobilePayAmount,
                  CASHPAY_AMOUNT: item.CashAmount,
                  MERCHANTS_ID: this.detailObj.MERCHANTS_ID,
                  MERCHANTS_NAME: this.detailObj.MERCHANTS_NAME,
                  BUSINESS_PERIOD: item.PeriodIndexStr,
                  PERIOD_INDEX: item.PeriodIndex,
                  PROPERTYFEE: item.PropertyFee,
                  HOUSERENT: item.HouseRent,
                  BREACHPENALTY: item.BreachPenalty,
                  ELECTRICITYCHARGE: item.ElectricityCharge,
                  WATERCHARGE: item.WaterCharge,
                  OTHERFEE: item.OtherFee,
                  CORRECT_AMOUNT: this.correctionAmount
                },
                children: modalList
              })
            } else {
              allList.push({
                node: {
                  BUSINESSPROJECT_ID: this.detailObj.BUSINESSPROJECT_ID,
                  BUSINESSPROJECT_NAME: this.detailObj.BUSINESSPROJECT_NAME,
                  SHOPROYALTY_ID: item.ShopRoyalty_Id,
                  SERVERPARTSHOP_ID: this.detailObj.SERVERPARTSHOP_ID,
                  BUSINESS_STARTDATE: item.StartDate,
                  BUSINESS_ENDDATE: item.EndDate,
                  GUARANTEE_AMOUNT: item.MinturnOver,
                  GUARANTEERATIO: item.GuaranteeRatio,
                  ACTUAL_REVENUE: item.RevenueAmount,
                  REVENUECONFIRM_ID: item.RevenueConfirmId,
                  PARTYA_SHAREPROFIT: item.RoyaltyTheory,
                  PARTYB_SHAREPROFIT: item.SubroyaltyTheory,
                  LIQUIDATION_AMOUNT: item.RefundSupplement,
                  ACTUAL_ACCOUNTS: item.GuaranteeFee,
                  ROYALTY_PRICE: item.RoyaltyAmount,
                  SUBROYALTY_PRICE: item.SubroyaltyAmount,
                  MOBILEPAY_AMOUNT: item.MobilePayAmount,
                  CASHPAY_AMOUNT: item.CashAmount,
                  MERCHANTS_ID: this.detailObj.MERCHANTS_ID,
                  MERCHANTS_NAME: this.detailObj.MERCHANTS_NAME,
                  BUSINESS_PERIOD: item.PeriodIndexStr,
                  PERIOD_INDEX: item.PeriodIndex,
                  PROPERTYFEE: item.PropertyFee,
                  HOUSERENT: item.HouseRent,
                  BREACHPENALTY: item.BreachPenalty,
                  ELECTRICITYCHARGE: item.ElectricityCharge,
                  WATERCHARGE: item.WaterCharge,
                  OTHERFEE: item.OtherFee
                },
                children: modalList
              })
            }
          }
        })
      }

      // 年度
      const req = {
        BusinessapprovalModel:{
          OPERATION_TYPE: '11',
          BUSINESSPROCESS_ID: this.detailObj.BUSINESSPROJECT_ID,
          PROINST_ID: this.detailObj.SHOPROYALTY_ID,
          SERVERPART_ID: this.detailObj.SERVERPART_ID,
          SERVERPART_IDS: this.detailObj.SERVERPART_ID,
          BUSINESSPROCESS_NAME: `${this.detailObj.BUSINESSPROJECT_NAME}【${this.detailObj.STARTDATE}-${this.detailObj.ENDDATE}】年度结算`,
          BUSINESS_STARTDATE:moment().format('YYYY-MM-DD'),
          BUSINESSAPPROVAL_STATE: 1000,
          BUSINESSAPPROVAL_DESC: this.approveDesc,
          STAFF_NAME: this.users.UserName,
          STAFF_ID: this.users.UserId,
          Serverpart_Name: this.detailObj.SERVERPART_NAME,
          SERVERPARTSHOP_ID: this.detailObj.SERVERPARTSHOP_ID,
          SERVERPARTSHOP_NAME: this.detailObj.SERVERPARTSHOP_NAME,
          CORRECT_AMOUNT: this.correctionAmount,
          APPOVED_IDS: this.nextPersonValue,
          APPOVED_NAME: this.showLabel,
          BUSINESSAPPROVAL_ID: this.detailObj.BUSINESSAPPROVAL_ID
        },
        RevenueconfirmModel: allList,
        SourcePlatform: 'minProgram'
      }
      console.log('req',req)
      const data = await request.$webPost('EShangApiMain/Finance/ApplyAccountProinst', req)
      if (data.Result_Code === 100) {
        uni.showToast({
          icon:'success',
          duration: 2000,
          title: data.Result_Desc || '发起申请成功',
        });
        setTimeout(()=>{
          uni.redirectTo({
            url: '/pages/settlementApproval/index'
          });
        },2000)

      }else{
        uni.showToast({
          icon:'error',
          duration: 2000,
          title: data.Result_Desc,
        });
      }
      uni.hideLoading()
    }
  }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  height: 100vh;
  .header{
    width: 100%;
    background-image: url("https://eshangtech.com/ShopICO/yxcl/settlementApproval/pageBg.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 24rpx;
    .headerBox{
      width: 100%;
      box-sizing: border-box;
      padding: 0 32rpx;
      position: fixed;
      top: 0;left: 0;
      z-index: 9;
      background-image: url("https://eshangtech.com/ShopICO/yxcl/settlementApproval/pageBg.png");
      background-repeat: no-repeat;
      background-size: cover;
      .arrowBox{
        width: 100%;
        display: flex;
        align-items: center;
        .img{
          width: 48rpx;
          height: 48rpx;
        }
        .selectServiceBox{
          margin-left: 16rpx;
          display: flex;
          align-items: center;
          .serviceIcon{
            width: 80rpx;
            height: 80rpx;
            position: relative;
            z-index: 2;
          }
          .nameBox{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 28rpx;
            color: #160002;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            padding: 12rpx 34rpx 12rpx 48rpx;
            display: inline-block;
            border-top-right-radius: 200rpx;
            border-bottom-right-radius:  200rpx;
            background: #fff;
            transform: translateX(-20px);
            .moreIcon{
              width: 24rpx;
              height: 24rpx;
              margin-left: 14rpx;
            }
          }
        }
      }
    }
    .headerDetail{
      width: calc(100% - 48rpx);
      margin-left: 24rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 1px;
      position: relative;
      .detailContent{
        width: 100%;
        background: linear-gradient( 180deg, #FFEBE0 0%, #FFFFFF 30%);
        border-radius: 14rpx 14rpx 0rpx 0rpx;
        box-sizing: border-box;
        padding: 24rpx;
        .projectName{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 32rpx;
          color: #160002;
          line-height: 44rpx;
          text-align: left;
          font-style: normal;
        }
        .projectItem{
          display: flex;
          align-items: center;
          .itemLabel{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #786B6C;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            margin-right: 8rpx;
          }
          .itemValue{
            font-family: DINAlternate, DINAlternate;
            font-size: 26rpx;
            color: #160002;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
        }

      }
      .stateBox{
        position: absolute;
        right: 0;top: 0;
        display: flex;
        align-items: center;
        padding: 10rpx 16rpx;
        background: linear-gradient( 48deg, #FF9762 0%, #FF8C8C 100%);
        border-radius: 0rpx 16rpx 0rpx 38rpx;
        .stateIcon{
          width: 28rpx;
          height: 28rpx;
          margin-right: 6rpx;
        }
        .stateText{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .overBox{
        position: absolute;
        right: 30rpx;top: 30rpx;
        .overIcon{
          width: 134rpx;
          height: 134rpx;
        }
      }
    }
  }

  .dailySettleBox{
    margin-top: 24rpx;
    background-color: #fff;
    box-sizing: border-box;
    padding: 32rpx;
    .boxTop{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 24rpx;
      .topTitle{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #212226;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }
      .goDetail{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #FA8B39;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        .rightArrow{
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
    .detailBox{
      width: 100%;
      background: #F7F8FA;
      border-radius: 8rpx;
      border: 2rpx solid #EEEEF0;
      box-sizing: border-box;
      padding: 32rpx 24rpx;
      display: flex;
      align-items: center;
      .leftIcon{
        width: 80rpx;
        height: 80rpx;
        background: #FFEFE7;
        border-radius: 8rpx;
        margin-right: 16rpx;
        .detailIcon{
          width: 80rpx;
          height: 80rpx;
        }
      }
      .rightBox{
        flex: 1;
        .rightTop{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          .detailTitle{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #160002;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
          .detailValue{
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 36rpx;
            color: #160002;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
          }
        }
        .rightBottom{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #786B6C;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }

  .renovationBox{
    width: 100%;
    //width: calc(100% - 48rpx);
    //margin-left: 24rpx;
    box-sizing: border-box;
    padding: 2rpx;
    border-radius: 16rpx;
    .renovationContent{
      width: 100%;
      background: linear-gradient( 180deg, #FFF7F2 0%, #FFFFFF 20%);
      box-sizing: border-box;
      border-radius: 16rpx;
      padding: 22rpx;
      position: relative;
      .renovationTop{
        display: flex;
        align-items: center;
        margin-bottom: 40rpx;
        .topLeft{
          margin-right: 16rpx;
          width: 80rpx;
          height: 80rpx;
          border-radius: 8rpx;
          overflow: hidden;
          .renovationIcon{
            width: 80rpx;
            height: 80rpx;
          }
        }
        .topRight{
          flex: 1;
          .contentTitle{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #160002;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
          }
          .timeBox{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #786B6C;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
          .goMoreMonth{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 28rpx;
            color: #FA8B39;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            .rightArrow{
              width: 24rpx;
              height: 24rpx;
            }
          }
        }
      }
      .renovationMoney{
        .itemTitle{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #786B6C;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
        .revenueBox{
          margin-top: 16rpx;
          display: flex;
          .revenueItem{
            width: calc(100% / 3);
            .revenueValue{
              font-family: DINAlternate, DINAlternate;
              font-weight: bold;
              font-size: 36rpx;
              color: #160002;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;
            }
            .revenueLabel{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #786B6C;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              marginTop: 4rpx;
            }
          }
        }
        .line{
          width: 100%;
          height: 2rpx;
          background: #F5F5F5;
          border-radius: 11rpx;
          margin: 24rpx 0;
        }
      }
      .pageDetailBox{
        width: 100%;
        box-sizing: border-box;
        padding: 32rpx;
        background-color: #fff;
        border-radius: 32rpx 32rpx 0rpx 0rpx;
        .detailBoxTop{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .detailBoxTitle{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #212226;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
          }
          .goMoreMonth{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 28rpx;
            color: #FA8B39;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            .rightArrow{
              width: 24rpx;
              height: 24rpx;
            }
          }
        }
        .detailBoxTime{
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          margin-top: 8rpx;
          .timeIcon{
            width: 28rpx;
            height: 28rpx;
            margin-right: 8rpx;
          }
          .endTime{
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: 400;
            font-size: 24rpx;
            color: #786B6C;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
        }
        .table{
          width: calc(100% - 4rpx);
          border-radius: 12rpx;
          border: 2rpx solid #EEEEF0;
          .tableHeader{
            display: flex;
            align-items: center;
            width: 100%;
            height: 80rpx;
            background-color: #F7F8FA;
            .firstTableTitle{
              width: 30%;
              box-sizing: border-box;
              padding-left: 24rpx;
              font-size: 24rpx;
            }
            .borderRight{
              width: 2rpx;
              height: 100%;
              background-color: #F1F1F1;
            }
            .otherTableTitle{
              width: 35%;
              display: flex;
              flex-direction: column;
              align-items: center;
              font-size: 24rpx;
              .dataIcon{
                width: 60rpx;
                height: 60rpx;
                margin-bottom: 8rpx;
              }
            }
          }
          .tableBody{
            .tableRow{
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              .labelRow{
                width: 30%;
                box-sizing: border-box;
                padding: 22rpx 0 22rpx 22rpx;
                font-size: 24rpx;
              }
              .beforeIcon{
                padding-left: 42rpx;
                position: relative;
              }
              .beforeIcon:before{
                content:'';
                width: 12rpx;
                height: 12rpx;
                background: #b2b2bd;
                border-radius: 50%;
                position: absolute;
                left: 22rpx;
                top: 50%;
                transform: translateY(-50%);
              }
              .refundPay{
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 24rpx;
                color: #9A3D1A;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }
              .borderRight{
                width: 2rpx;
                min-height: 80rpx;
                background-color: #F1F1F1;
              }
              .valueRow{
                width: 35%;
                box-sizing: border-box;
                padding: 22rpx 24rpx 22rpx 0;
                text-align: right;
                font-size: 24rpx;
              }
            }
            .tableRowGray{
              background-color: #F9F9FA!important;
            }
          }
        }
        .progressList{
          width: 100%;
          margin-top: 48rpx;
          .progressTitle{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #212226;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
          }
          .listBox{
            margin-top: 24rpx;
            width: 100%;
            .listItem{
              .itemLeft{
                .nameIcon{
                  width: 72rpx;
                  height: 72rpx;
                  background: #FFA35F;
                  border-radius: 40rpx;
                  position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  .successIcon{
                    position: absolute;
                    width: 32rpx;
                    height: 32rpx;
                    right: 0;
                    bottom: 0;
                  }
                  .name{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #FFFFFF;
                    line-height: 32rpx;
                    text-align: left;
                    font-style: normal;
                  }
                  .defaultPerson{
                    width: 32rpx;
                    height: 36rpx;
                  }
                }
              }
              .itemRight{
                .nameBox{
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .name{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #242729;
                    line-height: 40rpx;
                    text-align: left;
                    font-style: normal;
                  }
                  .time{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #9FA3A8;
                    line-height: 40rpx;
                    text-align: left;
                    font-style: normal;
                  }
                }
                .desc{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #9FA3A8;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                }
              }
            }
          }
        }
      }
      .stateBox{
        position: absolute;
        right: 0;top: 0;
        display: flex;
        align-items: center;
        padding: 10rpx 16rpx;
        background: linear-gradient( 48deg, #FF9762 0%, #FF8C8C 100%);
        border-radius: 0rpx 16rpx 0rpx 38rpx;
        .stateIcon{
          width: 28rpx;
          height: 28rpx;
          margin-right: 6rpx;
        }
        .stateText{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .overBox{
        position: absolute;
        right: 30rpx;top: 30rpx;
        .overIcon{
          width: 134rpx;
          height: 134rpx;
        }
      }
    }
    .pageDetailBox{
      width: 100%;
      box-sizing: border-box;
      padding: 32rpx;
      background-color: #fff;
      border-radius: 32rpx 32rpx 0rpx 0rpx;
      .detailBoxTop{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .detailBoxTitle{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 32rpx;
          color: #212226;
          line-height: 44rpx;
          text-align: left;
          font-style: normal;
        }
        .goMoreMonth{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #FA8B39;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          .rightArrow{
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
      .detailBoxTime{
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        margin-top: 8rpx;
        .timeIcon{
          width: 28rpx;
          height: 28rpx;
          margin-right: 8rpx;
        }
        .endTime{
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: 400;
          font-size: 24rpx;
          color: #786B6C;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .table{
        width: calc(100% - 4rpx);
        border-radius: 12rpx;
        border: 2rpx solid #EEEEF0;
        .tableHeader{
          display: flex;
          align-items: center;
          width: 100%;
          height: 80rpx;
          background-color: #F7F8FA;
          .firstTableTitle{
            width: 30%;
            box-sizing: border-box;
            padding-left: 24rpx;
            font-size: 24rpx;
          }
          .borderRight{
            width: 2rpx;
            height: 100%;
            background-color: #F1F1F1;
          }
          .otherTableTitle{
            width: 35%;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 24rpx;
            .dataIcon{
              width: 60rpx;
              height: 60rpx;
              margin-bottom: 8rpx;
            }
          }
        }
        .tableBody{
          .tableRow{
            width: 100%;
            height: 100%;
            display: flex;
            .labelRow{
              width: 30%;
              box-sizing: border-box;
              padding: 22rpx 0 22rpx 22rpx;
              font-size: 24rpx;
            }
            .beforeIcon{
              padding-left: 42rpx;
              position: relative;
            }
            .beforeIcon:before{
              content:'';
              width: 12rpx;
              height: 12rpx;
              background: #b2b2bd;
              border-radius: 50%;
              position: absolute;
              left: 22rpx;
              top: 50%;
              transform: translateY(-50%);
            }
            .refundPay{
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 24rpx;
              color: #9A3D1A;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }
            .borderRight{
              width: 2rpx;
              min-height: 80rpx;
              background-color: #F1F1F1;
            }
            .valueRow{
              width: 35%;
              box-sizing: border-box;
              padding: 22rpx 24rpx 22rpx 0;
              text-align: right;
              font-size: 24rpx;
            }
          }
          .tableRowGray{
            background-color: #F9F9FA!important;
          }
        }
      }
      .progressList{
        width: 100%;
        margin-top: 48rpx;
        .progressTitle{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 32rpx;
          color: #212226;
          line-height: 44rpx;
          text-align: left;
          font-style: normal;
        }
        .listBox{
          margin-top: 24rpx;
          width: 100%;
          .listItem{
            .itemLeft{
              .nameIcon{
                width: 72rpx;
                height: 72rpx;
                background: #FFA35F;
                border-radius: 40rpx;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                .successIcon{
                  position: absolute;
                  width: 32rpx;
                  height: 32rpx;
                  right: 0;
                  bottom: 0;
                }
                .name{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #FFFFFF;
                  line-height: 32rpx;
                  text-align: left;
                  font-style: normal;
                }
                .defaultPerson{
                  width: 32rpx;
                  height: 36rpx;
                }
              }
            }
            .itemRight{
              .nameBox{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .name{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #242729;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                }
                .time{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #9FA3A8;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                }
              }
              .desc{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #9FA3A8;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }
        }
      }
    }
    .tableBoxs{
      background-color: #fff;
      padding-bottom: 32rpx;
      .amountBox{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .commodityContent {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          width: 180rpx;
          justify-content: center;
          /* padding-top: 6rpx; */
          box-shadow: 0px 1rpx 8rpx 0.4rpx #ccc;
          flex-direction: column;
          border-radius: 4rpx;
          .color1{

          }
        }
        .btn{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .btnItem{
            display: inline-block;
            padding: 6rpx 24rpx;
            margin-top: 24rpx;
            border-radius: 8rpx;
            background: #FA8B39;
            color: #fff;
          }
        }
      }
    }
  }







  .pageTitle{
    width: 100%;
    box-sizing: border-box;
    padding: 16rpx 16rpx 0;
    font-size: 32rpx;
  }
  .detailBox{
    width: 100%;
    box-sizing: border-box;
    padding: 0 16rpx 16rpx;
    margin-top: 16rpx;
    background: #fff;
    .detailRow{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .detailItem{
        width: 50%;
        display: flex;
        justify-content: flex-start;
        .label{
          color: #ADB2BF;
          font-size: 26rpx;
        }
        .value{
          font-size: 26rpx;
        }
      }
      .detailAllItem{
        width: 100%;
        .label{
          color: #ADB2BF;
          font-size: 26rpx;
        }
      }
    }
  }
  .tableBox{
    margin-top: 24rpx;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    padding: 16rpx;
    .smallTitle{
      font-size: 26rpx;
      font-weight: 600;
      margin-bottom: 16rpx;
    }
    .line{
      height: 2rpx;
      width: 100%;
      background-color: #eee;
      margin-bottom: 18rpx;
      margin-top: 16rpx;
    }
    .rowItemBox{
      display: flex;
      .allRowItem{
        width: 100%;
        .label{
          color: #ADB2BF;
          font-size: 26rpx;
        }
        .value{
          font-size: 26rpx;
        }
      }
      .rowItem{
        width: 50%;
        display: flex;
        justify-content: flex-start;
        .label{
          color: #ADB2BF;
          font-size: 26rpx;
        }
        .value{
          font-size: 26rpx;
        }
      }
    }
    .getMoreBox{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .imgIcon{
        width: 50rpx;
        height: 32rpx;
        border-radius: 50%;
        transform: rotate(90deg);
      }
    }
    .amountBox{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .commodityContent {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: 180rpx;
        justify-content: center;
        /* padding-top: 6rpx; */
        box-shadow: 0px 1rpx 8rpx 0.4rpx #ccc;
        flex-direction: column;
        border-radius: 4rpx;
        .color1{

        }
      }
      .btn{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .btnItem{
          display: inline-block;
          padding: 6rpx 24rpx;
          margin-top: 24rpx;
          border-radius: 8rpx;
          background: #FA8B39;
          color: #fff;
        }
      }
    }
  }




  .line{
    height: 2rpx;
    width: 100%;
    background-color: #eee;
    margin-bottom: 18rpx;
    margin-top: 16rpx;
  }
  .btnBox{
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 16rpx;
    margin-top: 24rpx;
    .detailTopBox{
      width: 100%;
      box-sizing: border-box;
      padding: 0 16rpx;
      display: flex;
      justify-content: space-between;
      .leftTop,.rightTop{
        display: flex;
        align-items: center;
        .label{
          color: #888;
        }
        .value{
          margin-left: 8rpx;
        }
      }
    }
    .detailBox{
      width: calc(100% - 32rpx);
      box-shadow: 0px 0 6rpx 2rpx rgb(234, 234, 234);
      background-color: #fff;
      border-radius: 8rpx;
      margin-left: 16rpx;
      box-sizing: border-box;
      padding: 16rpx;
      .detailItem{
        margin-bottom: 16rpx;
        .label{
          color: #888;
        }
        .value{

        }
      }
    }
    .btnList{
      width: 100%;
      box-sizing: border-box;
      padding: 32rpx 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .btnItem{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .iconBox{
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          overflow: hidden;
          .itemIcon{
            width: 100%;
            height: 100%;
          }
        }

      }
    }
  }
  .uniPopupYearApplyFor{
    width: calc(100vw - 140rpx);
    height: 380px;
    box-sizing: border-box;
    padding: 32rpx 0;
    .uniPopupTop{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .uniPopupTitle{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #160002;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }
      .close{
        width: 40rpx;
        height: 40rpx;
      }
    }

    .uniPopupContent{
      .contentItem{
        .label{
          font-size: 16px;
          font-weight: 600;
        }
        .text-area-box{
          width: 100%;
          background: #F2F4F5;
          border-radius: 8rpx;
          box-sizing: border-box;
          padding: 24rpx;
        }
      }
      .btn{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .btnItem{
          display: inline-block;
          padding: 6rpx 24rpx;
          margin-top: 24rpx;
          border-radius: 8rpx;
          background: #FA8B39;
          color: #fff;
        }
      }
    }
  }
}
</style>
