<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="contentTop">
              <view class="topLeft">
                <image class="detailIcon" :src="projectObj.Project_ICO"/>
              </view>
              <view class="topRight">
                <view class="detailTitle">{{topDetail.Name || ''}}</view>
                <view class="typeBox">
                  <view class="typeItem" v-if="topDetail.SettlementModes">{{ settlementModes[topDetail.SettlementModes] || '' }}</view>
                  <view class="indexItem" v-if="topDetail.IndexStr">{{  topDetail.IndexStr || '' }}</view>
                </view>
              </view>
            </view>

            <view class="contentMoney">
              <view class="moneyItem">
                <view class="redMoney">{{ topDetail.RENTFEE ? $util.getMoney(topDetail.RENTFEE  / 10000):'' }}</view>
                <view class="label">
                  合同总金额
                  <span class="unit">/万元</span>
                </view>
              </view>

              <view class="moneyItem">
                <view class="moneyValue">{{topDetail.MINTURNOVER ? `${$util.getMoney(topDetail.MINTURNOVER / 10000)}` : ''}}</view>
                <view class="label">
                  期除税收入
                  <span class="unit">/万元</span>
                </view>
              </view>
            </view>

            <view class="otherMessage">
              <view class="otherItem">
                <view class="value">{{topDetail.TaxRate ? `${topDetail.TaxRate}%` : '-'}}</view>
                <view class="label">税率</view>
              </view>
              <view class="otherItem">
                <view class="value">{{topDetail.GUARANTEERATIO ? `${topDetail.GUARANTEERATIO}%` : '-'}}</view>
                <view class="label">提成比例</view>
              </view>
              <view class="otherItem">
                <view class="value">{{topDetail.SECURITYDEPOSIT ? $util.getMoney(topDetail.SECURITYDEPOSIT  / 10000):'-'}}</view>
                <view class="label">履约保证金<span class="unit">/万元</span></view>
              </view>

            </view>
          </view>
          <view class="stateBox" v-if="detailObj.Approvalstate!==9" :style="{top: menu.bottom + 18 + 'px'}">
            <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"  :style="{top: menu.bottom + 33 + 'px'}" v-else>
            <image class="overIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/isPassIcon.png"/>
          </view>
        </view>
      </view>
<!--流程-->
    <view class="progressList" v-if="detailObj.Approvalstate>0">
      <view class="progressTitle">审批流程</view>

<!--      <view class="detailTopBox"  v-if="">-->
<!--        <view class="leftTop">-->
<!--          <span class="label" style="color: red">待审核：</span>-->
<!--          <span class="value">{{progressDetail.APPOVED_NAME || ''}}</span>-->
<!--        </view>-->
<!--      </view>-->

      <view class="listBox"  v-if="isShowProgress">
        <view class="listItem" v-for="(item,index) in progressList" :key="index">
          <view class="listItemTop">
            <view class="itemLeft">
              <view class="nameIcon">
                <span class="name" v-if="item.STAFF_NAME.length===3 || item.STAFF_NAME==='待审核'">{{item.STAFF_NAME === '待审核'?'待审核':item.STAFF_NAME.slice(1,3)}}</span>
                <image v-else class="defaultPerson"  src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/defaultPersonIcon.png"/>
                <image v-if="item.STAFF_NAME !== '待审核'" class="successIcon" :src="item.APPLYAPPROVE_TYPE===3000?'https://eshangtech.com/ShopICO/yxcl/settlementApproval/errorIcon.png':'https://eshangtech.com/ShopICO/yxcl/settlementApproval/passIcon.png'"/>
              </view>
            </view>
            <view class="itemRight">
              <view class="nameBox">
                <view class="name">{{item.STAFF_NAME === '待审核'?item.APPLYAPPROVE_NAME:`【${item.APPLYAPPROVE_NAME}】`}}</view>
                <view class="time">{{`${item.APPLYAPPROVE_DATE}`}}</view>
              </view>
              <view class="desc" v-if="item.STAFF_NAME!=='待审核'" @click="handleShowAllNotice(item.APPLYAPPROVE_DATE,true)" >
                {{item.STAFF_NAME}}:{{`${item.APPLYAPPROVE_INFO}`}}
              </view>
              <view class="noticeBox" v-if="item.showNotice" @click.stop="handleShowAllNotice(item.APPLYAPPROVE_DATE,false)">
                {{item.STAFF_NAME}}:{{`${item.APPLYAPPROVE_INFO}`}}
              </view>
            </view>
          </view>

          <view class="lineBox"  v-if="index < progressList.length-1">
            <view class="line"></view>
          </view>
        </view>
      </view>
    </view>
<!--    年度-->
    <view class="renovationBox" v-if="detailObj.SETTLEMENT_TYPE===1">
      <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 && (index ===yearDataList.length-1)">
              <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-if="detailObj.Approvalstate ===9 && (index ===yearDataList.length-1)">
              <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" style="padding-left: 44rpx">现金</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" style="padding-left: 44rpx">微支付</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" style="padding-left: 44rpx">租金</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" style="padding-left: 44rpx">物业费</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" style="padding-left: 44rpx">房租</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" style="padding-left: 44rpx">罚款</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" style="padding-left: 44rpx">电费</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" style="padding-left: 44rpx">水费</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" style="padding-left: 44rpx">其他</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>

<!--    月度-->
    <view class="renovationMonthBox" v-if="detailObj.SETTLEMENT_TYPE!==1">

        <view class="detailBoxTop">
          <span class="detailBoxTitle">月度结算详情</span>
        </view>

        <view class="detailBoxTime">
          <image class="timeIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/timeIcon.png"/>
          <view class="endTime">结算时间：{{detailObj.SETTLEMENT_DATE || ''}}</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">{{actuaryData.CurMonthRevenue?`${$util.getMoney(actuaryData.CurMonthRevenue)}`:'-'}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{monthNewCalibration.CurMonthRevenueTEXT?monthNewCalibration.CurMonthRevenueTEXT:'-'}}</view>
            </view>

            <view class="tableRow tableRowGray">
              <view class="labelRow">累计营业额</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.REVENUEDAILY_AMOUNTTotal?`${$util.getMoney(actuaryData.REVENUEDAILY_AMOUNTTotal)}`:'-'}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{monthNewCalibration.REVENUEDAILY_AMOUNTTotalTEXT?monthNewCalibration.REVENUEDAILY_AMOUNTTotalTEXT:'-'}}</view>
            </view>

            <view class="tableRow ">
              <view class="labelRow beforeIcon">移动支付</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.MOBILEPAY_AMOUNT?`${$util.getMoney(actuaryData.MOBILEPAY_AMOUNT)}`:'-'}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{monthNewCalibration.MOBILEPAY_AMOUNTTEXT || ''}}
                <view v-if="monthNewCalibration.MOBILEPAY_CORRECT" style="color: red">({{monthNewCalibration.MOBILEPAY_CORRECT>0?'+':''}}{{monthNewCalibration.MOBILEPAY_CORRECTTEXT || ''}})</view></view>
            </view>

            <view class="tableRow tableRowGray">
              <view class="labelRow beforeIcon">移动冲正</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.MOBILEPAY_CORRECT?`${$util.getMoney(actuaryData.MOBILEPAY_CORRECT)}`:'-'}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{monthNewCalibration.MOBILEPAY_CORRECTTEXT || ''}}</view>
            </view>

            <view class="tableRow ">
              <view class="labelRow beforeIcon">现金交易</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.CASHPAY_AMOUNT?`${$util.getMoney(actuaryData.CASHPAY_AMOUNT)}`:'-'}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">
                {{monthNewCalibration.CASHPAY_AMOUNTTEXT || ''}}
                <view v-if="monthNewCalibration.CASHPAY_CORRECT" style="color: red">({{ monthNewCalibration.CASHPAY_CORRECT > 0 ? '+' : '' }}{{ monthNewCalibration.CASHPAY_CORRECTTEXT || '' }})</view>
              </view>
            </view>

            <view class="tableRow tableRowGray">
              <view class="labelRow beforeIcon">现金冲正</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.CASHPAY_CORRECT?`${$util.getMoney(actuaryData.CASHPAY_CORRECT)}`:'-'}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{monthNewCalibration.CASHPAY_CORRECTTEXT || '0'}}</view>
            </view>

            <view class="tableRow ">
              <view class="labelRow">提成金额</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.GUARANTEERATIOAMOUNT?`${$util.getMoney(actuaryData.GUARANTEERATIOAMOUNT)}`:'-'}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{monthNewCalibration.GUARANTEERATIOAMOUNTTEXT || ''}}</view>
            </view>

            <view class="tableRow tableRowGray">
              <view class="labelRow">提成收入</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.GUARANTEERATIOINCOME?`${$util.getMoney(actuaryData.GUARANTEERATIOINCOME)}`:'-'}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{monthNewCalibration.GUARANTEERATIOINCOMETEXT || ''}}</view>
            </view>
          </view>
        </view>
    </view>

    <view class="payableFeesBox" v-if="detailObj.SETTLEMENT_TYPE!==1">
<!--      经营商户应交费用明细表-->
      <view class="payableFeesBoxTitle">经营商户应交费用明细表</view>
      <view class="detailBoxTime">
        <image class="timeIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/timeIcon.png"/>
        <view class="endTime">结算时间：{{detailObj.SETTLEMENT_DATE || ''}}</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">合计</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{ExpenseObj.SHOPEXPENSE_AMOUNT ||'-'}}</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{ExpenseObj.PAID_AMOUNT ||'-'}}</view>
          </view>

          <view class="tableRow tableRowGray" >
            <view class="labelRow beforeIcon">水费</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{ExpenseObj.SHOPEXPENSE_AMOUNT_1000 ||'-'}}</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{ExpenseObj.PAID_AMOUNT_9010 ||'-'}}</view>
          </view>

          <view class="tableRow">
            <view class="labelRow beforeIcon">电费</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{ExpenseObj.SHOPEXPENSE_AMOUNT_2000 ||'-'}}</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{ExpenseObj.PAID_AMOUNT_9020 ||'-'}}</view>
          </view>

          <view class="tableRow tableRowGray">
            <view class="labelRow beforeIcon">物业费</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{ExpenseObj.SHOPEXPENSE_AMOUNT_5000 ||'-'}}</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{ExpenseObj.PAID_AMOUNT_9050 ||'-'}}</view>
          </view>

          <view class="tableRow">
            <view class="labelRow beforeIcon">就餐费</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{ExpenseObj.SHOPEXPENSE_AMOUNT_4000 ||'-'}}</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{'-'}}</view>
          </view>

          <view class="tableRow tableRowGray">
            <view class="labelRow beforeIcon">住宿费</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{ExpenseObj.SHOPEXPENSE_AMOUNT_3000 ||'-'}}</view>
            <view class="borderRight"></view>
            <view class="valueRow">{{ExpenseObj.PAID_AMOUNT_9030 ||'-'}}</view>
          </view>
        </view>

      </view>
    </view>



    <view style="width: 100%;height: 196rpx"  v-if="(detailObj.Approvalstate===0 || (detailObj.Approvalstate>0 && progressDetail.BUSINESSAPPROVAL_STATE===1000)) || (detailObj.Approvalstate>0 && progressDetail.BUSINESSAPPROVAL_STATE!==9000 && isShowBtn && !detailObj.APPLY_PROCCESS)">
    </view>

<!--    改变按钮的判断 要吧allBtnBox的判断和上面那个占位方框的判断都要修改-->
    <view class="allBtnBox" v-if="((detailObj.Approvalstate===0 && detailObj.PEND_STATE!==-1) || (detailObj.Approvalstate>0 && progressDetail.BUSINESSAPPROVAL_STATE===1000 && detailObj.PEND_STATE!==-1)) || (detailObj.Approvalstate>0 && detailObj.PEND_STATE!==-1 && progressDetail.BUSINESSAPPROVAL_STATE!==9000 && isShowBtn && !detailObj.APPLY_PROCCESS)">
      <view class="createBtn" v-if="(detailObj.Approvalstate===0 && detailObj.PEND_STATE===0) || (detailObj.Approvalstate>0 && progressDetail.BUSINESSAPPROVAL_STATE===1000 && detailObj.PEND_STATE===0)"  @click="handleShowApplyForPop">发起审批</view>
      <view class="threeBtnBox">
<!--        <view class="goRight" v-if="progressDetail.BUSINESSAPPROVAL_STATE!==1000">-->
<!--          <image class="goRightIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/goRightIcon.png"/>-->
<!--          <span class="goRightText">冲正</span>-->
<!--        </view>-->
        <view class="rejectBtn"  v-if="detailObj.Approvalstate>0 && progressDetail.BUSINESSAPPROVAL_STATE!==9000 && isShowBtn && !detailObj.APPLY_PROCCESS" @click="handleShowPop(2)">驳回</view>
        <view class="agreeBtn"  v-if="detailObj.Approvalstate>0 && progressDetail.BUSINESSAPPROVAL_STATE!==9000 && isShowBtn && !detailObj.APPLY_PROCCESS" @click="handleShowPop(1)">同意</view>
      </view>
    </view>

    <!--    驳回和审批的-->
    <UniPop :show="showPop" @hidePopup="closePop" type="middle" @touchmove.prevent round="true">
      <view class="uniPopup">
        <view class="uniPopupTop">
          <text class="uniPopupTitle">{{ showType===1?'审核':showType===2?'驳回':'' }}</text>
          <image @click="closePop" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
        </view>

        <view class="detailBox">
          <view class="detailItem" style="display: flex;align-items: center" v-if="showType===1 && progressObjDetail.NEXT_STATE!==9000">
            <span class="label">下一环节审批人：</span>
            <picker mode="selector" @change="changeNextPerson" :value="nextPersonIndex" range-key="label" :range="nextPerson">
              <view class="uni-ellipsis">{{nextPersonLabel?nextPersonLabel:'请选择'}}</view>
            </picker>
          </view>

          <view class="detailItem" style="display: flex;align-items: center" v-if="showType===2">
            <span class="label">回退状态：</span>
            <picker mode="selector" @change="changeReject" :value="rejectSelectIndex" range-key="label" :range="rejectDataList">
              <view class="uni-ellipsis">{{showRejectText?showRejectText:'请选择'}}</view>
            </picker>
          </view>

          <view class="detailItem">
            <span class="label">审核意见：</span>
            <textarea placeholder="请输入您的意见" v-model="approveDesc" style="height: 60px"/>
          </view>
        </view>

        <view class="btn">
          <span class="btnItem" @click="handleExamine(showType)">{{showType===1?'审核通过':showType===2?'驳回':''}}</span>
        </view>

      </view>
    </UniPop>
    <!--    发起申请的-->
    <UniPop :show="isShowApplyFor" @hidePopup="closeApplyFor" type="middle" @touchmove.prevent round="true">
      <view class="uniPopupApplyFor">
        <view class="uniPopupTop">
          <text class="uniPopupTitle">发起申请</text>
          <image @click="closeApplyFor" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
        </view>

        <view class="detailBoxTime">
          <image class="timeIcon" src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/timeIcon.png"/>
          <view class="endTime">结算时间：{{detailObj.STARTDATE || ''}} 至 {{detailObj.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 tableRowGray">-->
<!--              <view class="labelRow">本月营收</view>-->
<!--              <view class="borderRight"></view>-->
<!--              <view class="valueRow">{{actuaryData.CurMonthRevenue?`${$util.getMoney(actuaryData.CurMonthRevenue)}`:'-'}}</view>-->
<!--              <view class="borderRight"></view>-->
<!--              <view class="valueRow">{{monthNewCalibration.CurMonthRevenueTEXT?monthNewCalibration.CurMonthRevenueTEXT:'-'}}</view>-->
<!--            </view>-->

            <view class="tableRow">
              <view class="labelRow">累计营业额</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.REVENUEDAILY_AMOUNTTotal?`${numeral(actuaryData.REVENUEDAILY_AMOUNTTotal).format('0,0.00')}`:''}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{newCalibration.REVENUEDAILY_AMOUNTTotal?`${numeral(newCalibration.REVENUEDAILY_AMOUNTTotal).format('0,0.00')}`:''}}</view>
            </view>

            <view class="tableRow tableRowGray">
              <view class="labelRow">移动支付</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.MOBILEPAY_AMOUNT?`${numeral(actuaryData.MOBILEPAY_AMOUNT).format('0,0.00')}`:''}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{newCalibration.MOBILEPAY_AMOUNT?`${numeral(newCalibration.MOBILEPAY_AMOUNT + (newCalibration.MOBILEPAY_CORRECT || 0)).format('0,0.00')}` + `${newCalibration.MOBILEPAY_CORRECT?`(${newCalibration.MOBILEPAY_CORRECT>0?'+':''}${newCalibration.MOBILEPAY_CORRECT})`:''}` :''}}
              </view>
            </view>

            <view class="tableRow">
              <view class="labelRow">移动冲正</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.MOBILEPAY_CORRECT?`${numeral(actuaryData.MOBILEPAY_CORRECT).format('0,0.00')}`:'0'}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{newCalibration.MOBILEPAY_CORRECT?`${numeral(newCalibration.MOBILEPAY_CORRECT).format('0,0.00')}`:'0'}}</view>
            </view>

            <view class="tableRow tableRowGray">
              <view class="labelRow">现金交易</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.CASHPAY_AMOUNT?`${numeral(actuaryData.CASHPAY_AMOUNT).format('0,0.00')}`:''}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{newCalibration.CASHPAY_AMOUNT?`${numeral(newCalibration.CASHPAY_AMOUNT + (newCalibration.CASHPAY_CORRECT || 0)).format('0,0.00')}` + `${newCalibration.CASHPAY_CORRECT?`(${newCalibration.CASHPAY_CORRECT>0?'+':''}${newCalibration.CASHPAY_CORRECT})`:'' }` :''}}
              </view>
            </view>

            <view class="tableRow">
              <view class="labelRow">现金冲正</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.CASHPAY_CORRECT?`${numeral(actuaryData.CASHPAY_CORRECT).format('0,0.00')}`:'0'}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{newCalibration.CASHPAY_CORRECT?`${numeral(newCalibration.CASHPAY_CORRECT).format('0,0.00')}`:'0'}}</view>
            </view>

            <view class="tableRow tableRowGray">
              <view class="labelRow">提成金额</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.GUARANTEERATIOAMOUNT?`${numeral(actuaryData.GUARANTEERATIOAMOUNT).format('0,0.00')}`:''}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{newCalibration.GUARANTEERATIOAMOUNT?`${numeral(newCalibration.GUARANTEERATIOAMOUNT).format('0,0.00')}`:''}}</view>
            </view>

            <view class="tableRow">
              <view class="labelRow">提成收入</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{actuaryData.GUARANTEERATIOINCOME?`${numeral(actuaryData.GUARANTEERATIOINCOME).format('0,0.00')}`:''}}</view>
              <view class="borderRight"></view>
              <view class="valueRow">{{newCalibration.GUARANTEERATIOINCOME?`${numeral(newCalibration.GUARANTEERATIOINCOME).format('0,0.00')}`:''}}</view>
            </view>
          </view>
        </view>

        <view class="goRightBox">
          <div class="commodityContent">
            <input class="color1" type="number" v-model="MobilePayCorrect"/>
            <div>
              <span class="ctitle">移动支付差额</span>
            </div>
          </div>
          <div class="commodityContent">
            <input class="color1" type="number" v-model="CashPayCorrect"/>
            <div>
              <span class="ctitle">现金支付差额</span>
            </div>
          </div>
        </view>

        <view class="btn">
          <span class="btnItem" @click="handleRecalibrate">重新校准</span>
          <span class="btnItem" style="margin-left: 16rpx" v-if="afterCalibration" @click="openShowSelect">发起申请</span>
        </view>

      </view>
    </UniPop>
    <!--    -->
    <UniPop :show="isShowSelect" @hidePopup="closeShowSelect" :showIndex="6" type="middle" @touchmove.prevent round="true">
      <view class="uniPopupShowSelect">
        <view class="uniPopupTop">
          <text class="uniPopupTitle"></text>
          <image @click="closeShowSelect" 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 request from '@/util/index.js'
import UniPop from '@/components/uni-popup.vue'
import Store from "../../store/store";
import {mapGetters} from "vuex";
import {wrapTreeNode} from "../../util/dateTime";
import numeral from "numeral";
export default {
  name: "detail",
  components: {UniPop},
  data() {
    return {
      detailObj:{},// 传入的详情数据
      staticMonth:'',// 外面查询时间的结束时间
      SETTLEMENT_MODESObj:{
        1000:"营收回款",
        2000: "资金返款",
        3000: "营收分润",
        4000: "组合分润",
        9998: "阶段提成",
        9999: "分段提成",
      },// 写死的枚举
      topDetail:{},// 顶部详情数据
      actuaryData:{},// 精算数据
      approveDesc:'已核对，拟同意！',// 审批意见
      nextPerson:[],// 下一环节审批人列表
      nextPersonIndex:'',// 下一环节审批人索引
      nextPersonLabel:'',// 下一环节审批人索引
      nextPersonValue:'',// 下一环节审批人的值
      showLabel:'',// 审核人的显示
      progressList: [],// 流程的数据
      showPop:false,// 悬浮框
      showType: 0,// 1审核 2 驳回
      progressDetail:{},// 进度详情
      rejectDataList:[],// 驳回的列表
      rejectSelectIndex: '',// 驳回索引
      rejectSelectValue: '',// 驳回的选择值
      showRejectText:'',// 驳回显示的文字
      isPending: false,// 接口是否进行中
      isShowBtn: false,// 判断是否显示按钮
      isShowApplyFor: false,// 发起申请的悬浮框
      MobilePayCorrect: 0,// 移动支付差额
      CashPayCorrect: 0,// 现金支付差额
      newCalibration: {},// 校准之后的数据
      afterCalibration: false,// 是否为校准之后
      lastMonthIsOver: false,// 判断上个月是否已经审结
      LastSettlementMonth: '',// 最近审结的月份
      LastSettlementMonthText: '',// 最近审结的月份
      isShowSelect: false,// 出现选人的悬浮框
      yearDataList:[],// 年度结算的悬浮框数据
      isAllMonthSuccess: true,// 判断是不是全部的月份都已经审结了
      allYearMonthDataList:[],//用来处理没完成的结算月度数据
      yearDataListAfter:[],// 年度精算数据
      yearDataListObj:[],// 年度精算数据 list也就一条
      isShowProgress: true,// 是否显示流程进度
      isPush: false,// 是否是推送
      progressObjDetail:{},// 流程详情
      monthId:'', // 月份审批二次进入发起申请的时候带的唯一id
      monthNewCalibration:{},// 月度精算过后 详情进入查看的值
      yearId:'',// 年度审批二次进入发起申请的时候带的id
      menu:{},
      settlementModes:{},// 结算模式的枚举对象
      projectObj:{},// 项目数据 暂时是取头像的
      ExpenseObj:{},// 水电费
    }
  },
  async onLoad(query){
    this.menu = uni.getMenuButtonBoundingClientRect()
    console.log('this.menu',this.menu)
    this.handleGetSETTLEMENTMODES()
    console.log('query',query)
    if (query.id) {
      this.isPush = true
      this.$util.addUserBehaviorNew()
      await this.handleGetPageDetail(query.id)
    }else{
      if(query.obj){
        this.detailObj = JSON.parse(query.obj)
      }
    }
    console.log('this.detailObj',this.detailObj)
    if(query.staticMonth){
      this.staticMonth = this.$moment(query.staticMonth ).format('YYYYMM')
      console.log('this.staticMonth',this.staticMonth)
    }
    // 拿到顶部数据
    await this.handleGetDetailDifference()
    if(this.detailObj.SETTLEMENT_TYPE===1){
      // 如果是年度的 就去请求年度的结算数据
     await this.handleGetYearSettlement()
      if (this.detailObj.Approvalstate > 0) {
        // 请求年度的精算数据
        await this.handleGetYearSettlementRight()
      }
    }else{
      // 月度数据
      // 拿到月度精算数据
      await this.handleGetActuaryData()
      if (this.detailObj.Approvalstate > 0) {
        // 精算数据
        await this.handleGetDetail()
      }
    }
    // 拿到流程数据
    await this.handleGetProgress()

    if(this.detailObj.SETTLEMENT_TYPE!==1){
      // 经营商户应交费用明细表
      await this.handleGetProjectExpenseList()
    }

  },
  onUnload(){

    // 因为返回不会卸载页面 但是详情返回列表下一次进来肯定全部重新判断的 所以只能这样
    this.detailObj = {}
    this.projectObj = {}
    this.topDetail = {}
    this.actuaryData = {}
    this.yearDataListObj = {}
    this.ExpenseObj = {}
    this.newCalibration = {}
    this.progressDetail = {}
    this.nextPerson = []
    this.staticMonth = ''
    this.nextPersonIndex = ''
    this.nextPersonLabel = ''
    this.showLabel = ''
    this.approveDesc = ''
    this.progressList = []
    this.afterCalibration = false
    this.monthId = ''
    this.isAllMonthSuccess = true

    this.closePop()
    this.closeApplyFor()
    this.closeShowSelect()
    this.$util.addUserBehaviorNew()
  },
  computed: {
    ...mapGetters({'users':'getUser'}),
  },

  methods:{
    numeral,
    // 点击流程的备注 显示悬浮内容 备注展示全
    handleShowAllNotice(time,state){
      console.log('state',state)
      let list = JSON.parse(JSON.stringify(this.progressList))
      list.forEach((item)=>{
        if(item.APPLYAPPROVE_DATE === time){
          item.showNotice = state
        }
      })
      this.progressList = list
      console.log('progressList',this.progressList)
    },
    // 经营商户应交费用明细表
    async handleGetProjectExpenseList(){
      console.log('this.detailObj.SETTLEMENT_DATE',this.detailObj.SETTLEMENT_DATE)
      uni.showLoading({
        title: '请求应交费用数据...'
      })
      if(this.detailObj.Approvalstate===9){
        let req = {
          BusinessProjectId: this.detailObj.BUSINESSPROJECT_ID,
          ShopRoyaltyId: this.detailObj.SHOPROYALTY_ID,
          StartMonth: this.detailObj.SETTLEMENT_DATE ? this.$moment(this.detailObj.SETTLEMENT_DATE + (this.detailObj.SETTLEMENT_TYPE===1?'':'/01')).format('YYYYMM') : '',
          EndMonth: this.detailObj.SETTLEMENT_DATE ? this.$moment(this.detailObj.SETTLEMENT_DATE + (this.detailObj.SETTLEMENT_TYPE===1?'':'/01')).format('YYYYMM') : '',
        }
        const data = await request.$webGet('EShangApiMain/Finance/GetProjectExpenseList',req)
        console.log('handleGetProjectExpenseList',data)
        uni.hideLoading()
        this.ExpenseObj = data.Result_Data.List[0]

        console.log('this.ExpenseObj',this.ExpenseObj)
      }else{

        let min = 999999999
        if (this.detailObj.SERVERPARTSHOP_ID) {
          let shopList = this.detailObj.SERVERPARTSHOP_ID.split(',')
          shopList.forEach((item) => {
            if (Number(item) < min) {
              min = Number(item)
            }
          })
        }
        let req = {
          serverpartshop_id: min===999999999?'':min,
          statistics_month_start: this.detailObj.SETTLEMENT_DATE ? this.$moment(this.detailObj.SETTLEMENT_DATE + (this.detailObj.SETTLEMENT_TYPE===1?'':'/01')).startOf('months').format('YYYY/MM/DD') :'',
          statistics_month_end: this.detailObj.SETTLEMENT_DATE ? this.$moment(this.detailObj.SETTLEMENT_DATE + (this.detailObj.SETTLEMENT_TYPE===1?'':'/01')).endOf('months').format('YYYY/MM/DD') :'',
        }
        console.log('this.detailObj.SETTLEMENT_DATE + this.detailObj.SETTLEMENT_TYPE===1?\'\':\'/01\'',this.detailObj.SETTLEMENT_DATE + this.detailObj.SETTLEMENT_TYPE===1?'':'/01')
        console.log('redsadasdasdq', req)
        const data = await request.$webGet('EShangApiMain/BusinessProject/GetShopExpenseSummary',req)
        console.log('handleGetProjectExpenseList',data)
        uni.hideLoading()
        this.ExpenseObj = data.Result_Data.List[0]
        console.log('this.ExpenseObj',this.ExpenseObj)
      }
    },
    // 跳转到查看月份结算列表的页面
    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)}`)
    },
    // 拿到结算模式的枚举
    async handleGetSETTLEMENTMODES(){
      const req = { FieldExplainField: 'SETTLEMENT_MODES' }
      const result = await request.$webGet('EShangApiMain/FrameWork/GetFieldEnumByField',req)
      console.log('result',result)
      let res = result.Result_Data.List
      let obj = {}
      if(res && res.length>0){
        res.forEach(item=>{
          obj[item.value] = item.label
        })
      }
      this.settlementModes = obj
    },
    // 返回按钮
    handleBack(){
      console.log('this.isPush',this.isPush)

      if(this.isPush){
        uni.redirectTo({
          url: '/pages/settlementApproval/index'
        });
        // 推送进来的数据
        uni.setStorageSync('pushDetail', this.detailObj)
      }else{
        uni.navigateBack({ delta: 1})
      }
    },
    // 跳转月度详情页面
    handleToMonth(obj) {
      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') : '',
        SHOPROYALTY_ID: this.detailObj.SHOPROYALTY_ID || '',
        BUSINESSPROJECT_ID: this.detailObj.BUSINESSPROJECT_ID || '',
        SERVERPARTSHOP_ID: this.detailObj.SERVERPARTSHOP_ID || '',
        SERVERPART_ID: this.detailObj.SERVERPART_ID || '',
        SERVERPART_NAME: this.detailObj.SERVERPART_NAME || ''
      }
      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}`)
    },
    async handleGetDetail(){
      uni.showLoading({
        title: '请求月度精算数据...'
      })
      const data = await request.$webGet('EShangApiMain/BusinessProcess/GetBUSINESSAPPROVALDetail',{BUSINESSAPPROVALId: this.detailObj.BUSINESSAPPROVAL_ID})
      console.log('data', data)
      let id = data.Result_Data.BUSINESSPROCESS_ID
      const res = await request.$webGet('EShangApiMain/BusinessProject/GetBIZPSPLITMONTHDetail',{BIZPSPLITMONTHId: id})
      let obj = res.Result_Data
      const req = {
        BusinessProjectId: this.detailObj.BUSINESSPROJECT_ID,
        StatisticsMonth: this.staticMonth || (this.detailObj.SETTLEMENT_DATE ? this.$moment(this.detailObj.SETTLEMENT_DATE + (this.detailObj.SETTLEMENT_TYPE===1?'':'/01')).format('YYYYMM') : ''),
        ShopRoyaltyId: this.detailObj.SHOPROYALTY_ID,
        MobilePayCorrect: obj.MOBILEPAY_CORRECT || 0,
        CashPayCorrect: obj.CASHPAY_CORRECT || 0
      }
      const result = await request.$webGet('EShangApiMain/Finance/GetProjectPeriodIncome',req)
      console.log('Incomeresult',result)
      let bigObj = result.Result_Data.List[0]
      this.monthId = bigObj.bizpsplitMonthId
      this.monthNewCalibration = bigObj
      this.monthNewCalibration.REVENUEDAILY_AMOUNTTotalTEXT = numeral(this.monthNewCalibration.REVENUEDAILY_AMOUNTTotal).format('0,0.00')
      this.monthNewCalibration.CurMonthRevenueTEXT = numeral(this.monthNewCalibration.CurMonthRevenue).format('0,0.00')
      this.monthNewCalibration.MOBILEPAY_AMOUNTTEXT = numeral(this.monthNewCalibration.MOBILEPAY_AMOUNT + (this.monthNewCalibration.MOBILEPAY_CORRECT || 0)).format('0,0.00')
      this.monthNewCalibration.MOBILEPAY_CORRECTTEXT = numeral(this.monthNewCalibration.MOBILEPAY_CORRECT).format('0,0.00')
      this.monthNewCalibration.CASHPAY_AMOUNTTEXT = numeral(this.monthNewCalibration.CASHPAY_AMOUNT + (this.monthNewCalibration.CASHPAY_CORRECT || 0)).format('0,0.00')
      this.monthNewCalibration.CASHPAY_CORRECTTEXT = numeral(this.monthNewCalibration.CASHPAY_CORRECT).format('0,0.00')
      this.monthNewCalibration.GUARANTEERATIOAMOUNTTEXT = numeral(this.monthNewCalibration.GUARANTEERATIOAMOUNT).format('0,0.00')
      this.monthNewCalibration.GUARANTEERATIOINCOMETEXT = numeral(this.monthNewCalibration.GUARANTEERATIOINCOME).format('0,0.00')
      console.log('this.newCalibration2', this.monthNewCalibration)
      uni.hideLoading()
    },
    // 控制流程进度是否显示
    handleChangeShowProgress() {
      this.isShowProgress = !this.isShowProgress
    },
    // 请求年度的精算数据
    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)
      // 年度的精算数据只取最后一条 所以处理 且不保留子级
      let result = [resList[resList.length - 1]]
      if (result && result.length > 0) {
        console.log('result33333', result)
        result.forEach(item => {
          item.level = 1
          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 = result[0]
      }else{
        this.yearDataListObj = {}
      }
      this.yearDataListAfter = result
      this.yearId = result[0].RevenueConfirmId
      console.log('this.yearDataListAfter',this.yearDataListAfter)
      console.log('this.yearId',this.yearId)
      uni.hideLoading()
    },
    // 推送拿到进入页面的初始参数
    async handleGetPageDetail(id) {
      uni.showLoading({
        title: '请求用户数据...'
      })
      const req = {
        BusinessApprovalId: id,
        UserId: this.users.UserId
      }
      console.log('req',req)
      const data = await request.$webGet('EShangApiMain/BusinessProject/GetProjectAccountDetail',req)
      console.log('data',data)
      let res = data.Result_Data
      console.log('res',res)
      let obj = {
        ...res,
        Approvalstate: res.SETTLEMENT_STATE === 0 ? 0 : res.SETTLEMENT_STATE === 1 ? 9 : res.SETTLEMENT_STATE === 2 ? 1 : '',
        startTime: this.$moment(res.SETTLEMENT_DATE + (res.SETTLEMENT_TYPE === 1 ? '' : '/01')).startOf('months').format('YYYY-MM-DD'),
        endTime: this.$moment(res.SETTLEMENT_DATE + (res.SETTLEMENT_TYPE === 1 ? '' : '/01')).endOf('months').format('YYYY-MM-DD')
      }
      this.detailObj = obj
      this.staticMonth = this.$moment(obj.endTime).format('YYYYMM')
      console.log('this.detailObj',this.detailObj)
      uni.hideLoading()
    },
    // 拿到年度结算数据
    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)

      // 当前流程实际出现的
      const nowData = await request.$webGet('EShangApiMain/Finance/GetProjectPeriodAccount',req)
      let nowList = wrapTreeNode(nowData.Result_Data.ProjectPeriodList)
      console.log('nowList',nowList)

      let res = data.Result_Data.List[0]
      // 页面显示的结算数据
      let resList = wrapTreeNode(res.ProjectPeriodList.children)
      console.log('resList222',resList)

      let result = []
      if(resList && resList.length>0){
        if(nowList && nowList.length>0){
          resList.forEach(item=>{
            nowList.forEach(subItem=>{
              if(item.PeriodIndex === subItem.PeriodIndex){
                result.push(item)
              }
            })
          })
        }
      }



      // 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 = result
      console.log('this',this.yearDataList)
      // 判断是否已经完成全部月度结算
      let other = res.ProjectPeriodList.node
      let isContinue = true
      if(!other.AllowApply){
        isContinue = false
      }
      this.isAllMonthSuccess = isContinue

      let list = wrapTreeNode([res.ProjectPeriodList.children[0]])
      this.allYearMonthDataList = list
      console.log('list',list)

      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 handleSuccessAllMonth(list){
      uni.showLoading({
        title: '正在自动月度结算...'
      })
      let ShopRoyaltyIdStr = ''
      let minStartTime = ''
      let maxEndTime = ''
      console.log('list',list)
      if(list && list.length>0){
        // 拿到需要结算的月份  和 拆分数据
        list.forEach((item,index)=>{
          if (index === 0) {
            minStartTime = this.$moment(item.StartDate).format('YYYY-MM-DD')
            maxEndTime = this.$moment(item.EndDate).format('YYYY-MM-DD')
          }else{
            if (new Date(minStartTime).getTime() > new Date(this.$moment(item.StartDate).format('YYYY-MM-DD')).getTime()) {
              minStartTime = this.$moment(item.StartDate).format('YYYY-MM-DD')
            }
            if (new Date(maxEndTime).getTime() < new Date(this.$moment(item.EndDate).format('YYYY-MM-DD')).getTime()) {
              maxEndTime = this.$moment(item.EndDate).format('YYYY-MM-DD')
            }
          }

          if (ShopRoyaltyIdStr) {
            ShopRoyaltyIdStr += `,${item.ShopRoyalty_Id}`
          } else {
            ShopRoyaltyIdStr = `${item.ShopRoyalty_Id}`
          }
        })
        // 全部月度结算接口
        const monthReq = {
          ProjectId: this.detailObj.BUSINESSPROJECT_ID,
          ShopRoyaltyId: ShopRoyaltyIdStr,
          StartMonth: minStartTime ? this.$moment(minStartTime).format('YYYYMM') : '',
          EndMonth: maxEndTime ? this.$moment(maxEndTime).format('YYYYMM') : '',
          userId: this.users.UserId
        }
        console.log('monthReq',monthReq)

        const monthData = await request.$webGet('EShangApiMain/Finance/ApprovePeriodAccount',monthReq)
        uni.hideLoading()
        console.log('monthData',monthData)
        if (monthData.Result_Code === 100) {
          uni.showToast({
            title: monthData.Result_Desc,
            icon:'success',
            duration: 1000
          });
          // 重新计算一遍那些月份是否已经结算了
          await this.handleGetYearSettlement()
          // 自动等于点击一遍发起申请
          this.handleShowApplyForPop()
        }else{
          uni.showToast({
            title: monthData.Result_Desc,
            icon:'error',
            duration: 1000
          });
        }
      }
    },
    // 选择审批人
    handleChangePerson(e){
      console.log('e',e)
      console.log('this.nextPerson',this.nextPerson)
      this.nextPersonIndex = Number(e.target.value)
      let value = this.nextPerson[this.nextPersonIndex].value
      this.nextPersonValue = value
      this.showLabel = value.split('-')[0]
      console.log('nextPersonValue',this.nextPersonValue)
    },
    // 发起申请
    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)
      console.log('this.newCalibration',this.newCalibration)
      console.log('users',this.users)
      // 判断是年度结算还是月度结算
      let _this = this
      if(this.detailObj.SETTLEMENT_TYPE===1){
        // // 年度
        // const req = {
        //   BusinessapprovalModel:{
        //     OPERATION_TYPE: '11',
        //     // BUSINESSPROCESS_ID:'',
        //     PROINST_ID: this.detailObj.SHOPROYALTY_ID,
        //     SERVERPART_ID: this.detailObj.SERVERPART_ID,
        //     SERVERPART_IDS: this.detailObj.SERVERPART_ID,
        //     BUSINESSPROCESS_NAME:'',
        //     BUSINESS_STARTDATE:'',
        //     BUSINESSAPPROVAL_STATE: 1000,
        //     BUSINESSAPPROVAL_DESC:'',
        //     STAFF_NAME:this.detailObj.UserName,
        //     STAFF_ID:this.detailObj.UserId,
        //     Serverpart_Name:'',
        //     SERVERPARTSHOP_ID:'',
        //     SERVERPARTSHOP_NAME:'',
        //     CORRECT_AMOUNT:'',
        //     APPOVED_IDS:'',
        //     APPOVED_NAME:''
        //   },
        //   RevenueconfirmModel: []
        // }
        //
        // // const data = await request.$webPost('EShangApiMain/Finance/ApplyAccountProinst', req)
      }else{
        // 月度
        console.log('this.nextPersonValue',this.nextPersonValue)
        let [APPOVED_NAME,APPOVED_IDS] = this.nextPersonValue.split('-')
        console.log('APPOVED_IDS',APPOVED_IDS)
        console.log('APPOVED_NAME',APPOVED_NAME)
        uni.showLoading({
          title: '正在发起申请...'
        })
        const req = {
          BusinessapprovalModel:{
            OPERATION_TYPE:'12',
            BUSINESSAPPROVAL_ID: this.detailObj.BUSINESSAPPROVAL_ID || '',
            BUSINESSPROCESS_NAME:`${this.detailObj.BUSINESSPROJECT_NAME}【${this.detailObj.startTime}-${this.detailObj.endTime}】月度结算`,
            PROINST_ID: this.detailObj.BUSINESSPROJECT_ID,
            SERVERPART_ID: this.detailObj.SERVERPART_ID,
            SERVERPART_NAME: this.detailObj.SERVERPART_NAME,
            STAFF_ID: this.users.UserId,
            STAFF_NAME: this.users.UserName,
            BUSINESS_STARTDATE: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
            BUSINESSAPPROVAL_STATE: 1000,
            BUSINESSAPPROVAL_DESC:this.approveDesc,
            SERVERPART_IDS:  this.detailObj.SERVERPART_ID,
            MERCHANTS_ID: this.detailObj.MERCHANTS_ID,
            MERCHANTS_NAME: this.detailObj.MERCHANTS_NAME,
            SERVERPARTSHOP_ID: this.detailObj.SERVERPARTSHOP_ID,
            SERVERPARTSHOP_NAME: this.detailObj.SERVERPARTSHOP_NAME,
            APPOVED_IDS: APPOVED_IDS,
            APPOVED_NAME:APPOVED_NAME,
          },
          bizpsplitMonthModel:{
            ...this.newCalibration,
            SHOPROYALTY_ID: this.detailObj.SHOPROYALTY_ID,
            SERVERPARTSHOP_ID: this.detailObj.SERVERPARTSHOP_ID,
            SERVERPARTSHOP_NAME: this.detailObj.SERVERPARTSHOP_NAME,
            BUSINESS_TYPE: this.detailObj.BUSINESS_TYPE,
            Serverpart_Name: this.detailObj.SERVERPART_NAME,
            STARTDATE: this.detailObj.startTime,
            ENDDATE: this.detailObj.endTime,
            REVENUE_AMOUNT: this.newCalibration.CurMonthRevenue,
            ROYALTY_PRICE: this.newCalibration.GUARANTEERATIOAMOUNT,
            ROYALTY_THEORY: this.newCalibration.GUARANTEERATIOINCOME,
            MOBILEPAY_AMOUNT: this.newCalibration.MOBILEPAY_AMOUNT,
            CASHPAY_AMOUNT: this.newCalibration.CASHPAY_AMOUNT,
            ACCREVENUE_AMOUNT: this.newCalibration.REVENUEDAILY_AMOUNTTotal,
            ACCROYALTY_PRICE: this.newCalibration.ROYALTYTHEORYMUST,
            ACCROYALTY_THEORY: this.newCalibration.ROYALTYTHEORYOK,
            MOBILEPAY_CORRECT: this.newCalibration.MOBILEPAY_CORRECT,
            CASHPAY_CORRECT: this.newCalibration.CASHPAY_CORRECT,
            ACCOUNT_TYPE: 1000,
            BIZPSPLITMONTH_STATE: 2,
            BIZPSPLITMONTH_ID: this.monthId,
          },
          SourcePlatform: 'minProgram'
        }
        console.log('req',req)
        // return
        const data = await request.$webPost('EShangApiMain/Finance/ApplyMonthAccountProinst', req)
        if (data.Result_Code === 100) {
          if (this.isPush) {
            uni.showToast({
              icon:'success',
              duration: 2000,
              title: data.Result_Desc,
            });
            setTimeout(()=>{
              uni.redirectTo({
                url: '/pages/settlementApproval/index'
              });
            },2000)
          }else{
            uni.showToast({
              icon:'success',
              duration: 2000,
              title: data.Result_Desc,
            });
            uni.setStorageSync('reolad','true')
            setTimeout(()=>{
              uni.navigateBack({
                delta: 1
              });
            },2000)
          }

        }else{
          uni.showToast({
            icon:'error',
            duration: 2000,
            title: data.Result_Desc,
          });
        }
        uni.hideLoading()
      }
    },
    // 重新校准
    async handleRecalibrate(){
      console.log('this.MobilePayCorrect',this.MobilePayCorrect)
      console.log('this.CashPayCorrect',this.CashPayCorrect)
      const req = {
        BusinessProjectId: this.detailObj.BUSINESSPROJECT_ID,
        StatisticsMonth: this.staticMonth || (this.detailObj.SETTLEMENT_DATE ? this.$moment(this.detailObj.SETTLEMENT_DATE + (this.detailObj.SETTLEMENT_TYPE===1?'':'/01')).format('YYYYMM') : ''),
        ShopRoyaltyId: this.detailObj.SHOPROYALTY_ID,
        MobilePayCorrect: this.MobilePayCorrect || 0,
        CashPayCorrect: this.CashPayCorrect || 0,
      }
      uni.showLoading({
        title: '请求精算数据...'
      })
      const data = await request.$webGet('EShangApiMain/Finance/GetProjectPeriodIncome', req)
      console.log('data',data)
      let res = data.Result_Data.List[0]
      this.newCalibration = res
      this.afterCalibration = true
      console.log('res',res)
      uni.hideLoading()
    },
    openShowSelect(){
      this.isShowSelect = true
    },
    // 关闭选人的悬浮框
    closeShowSelect(){
      this.isShowSelect = false
    },
    // 显示发起申请的悬浮框
    async handleShowApplyForPop(){
      let _this = this
      if(this.detailObj.SETTLEMENT_TYPE===2){
        console.log('this.lastMonthIsOver',this.lastMonthIsOver)
        // 月度
        if (this.lastMonthIsOver) {
          this.isShowApplyFor = true
        }else{
          uni.showModal({
            title: '系统检测',
            content: `${this.detailObj.SERVERPART_NAME}-${this.detailObj.SERVERPARTSHOP_NAME},项目期数内存在未审批月度结算！点击确定自动为您调整到${this.LastSettlementMonth}月进行审批？`,
            success: function (res) {
              if (res.confirm) {
                uni.setStorageSync('handleGetNewMonth','true')
                uni.setStorageSync('handleGetNewMonthObj',_this.detailObj)
                uni.setStorageSync('handleGetNewMonthTime',_this.LastSettlementMonth + '/01')
                uni.navigateBack({
                  delta: 1
                });
              } else if (res.cancel) {
                // uni.navigateBack({
                //   delta: 1
                // });
              }
            }
          });
        }
      }else{
        // 年度
        if(this.isAllMonthSuccess){
          // 可以进行年度发起申请 就跳转新页面
          this.handleGoYearSettlementPage()
        }else{
          uni.showModal({
            content:'请先完成全部月度结算！ 点击确认将自动进行结算！',
            success: async function (res) {
              if (res.confirm) {
                _this.handleSuccessAllMonth(_this.yearDataList)
              }
            }
          })
        }
      }
    },
    // 跳转去年度结算页面
    handleGoYearSettlementPage(){
      this.$util.toNextRoute('navigateTo', `/pages/settlementApproval/yearSettlement?obj=${JSON.stringify(this.detailObj)}&yearId=${this.yearId}`)
    },
    // 关闭发起申请的悬浮框
    closeApplyFor(){
      this.isShowApplyFor = false
    },

    // 获得顶部详情和差异数据
    async handleGetDetailDifference(){
      const req = {
        StartDate: this.detailObj.STARTDATE?this.$moment(this.detailObj.STARTDATE).format('YYYY-MM-DD'):'',
        EndDate: this.detailObj.ENDDATE?this.$moment(this.detailObj.ENDDATE).format('YYYY-MM-DD'):'',
        SHOPROYALTY_ID: this.detailObj.SHOPROYALTY_ID || '',
        BUSINESSPROJECT_ID: this.detailObj.BUSINESSPROJECT_ID || '',
        ACCOUNT_TYPE: 1000,
        SERVERPARTSHOP_ID: this.detailObj.SERVERPARTSHOP_ID,
        DataSourceType: 2,
        SERVERPART_ID: this.detailObj.SERVERPART_ID,
        STATISTICS_MONTH: this.staticMonth || (this.detailObj.SETTLEMENT_DATE ? this.$moment(this.detailObj.SETTLEMENT_DATE +(this.detailObj.SETTLEMENT_TYPE===1?'':'/01')).format('YYYYMM') : '')
      }
      console.log('this.staticMonth',this.staticMonth)
      console.log('req',req)
      uni.showLoading({
        title: '请求详情数据...'
      })
      const data = await request.$webGet('EShangApiMain/Revenue/GetRevenueReportByBIZPSPLITMONTH',req)
      console.log('data',data)
      let res = data.Result_Data.List
      if(res && res.length>0){
        let detailObj = res[0]
        this.topDetail = detailObj.RevenueRecognition
        this.projectObj = detailObj.BUSINESSPROJECT
        console.log('this.topDetail',this.topDetail)
      }
      uni.hideLoading()
    },
    // 获取精算数据
    async handleGetActuaryData(){
      const req = {
        BusinessProjectId: this.detailObj.BUSINESSPROJECT_ID,
        StatisticsMonth: this.staticMonth || (this.detailObj.SETTLEMENT_DATE ? this.$moment(this.detailObj.SETTLEMENT_DATE + (this.detailObj.SETTLEMENT_TYPE===1?'':'/01')).format('YYYYMM') : ''),
        ShopRoyaltyId: this.detailObj.SHOPROYALTY_ID,
      }
      uni.showLoading({
        title: '请求精算数据...'
      })
      const data = await request.$webGet('EShangApiMain/Finance/GetProjectPeriodIncome', req)
      let res = data.Result_Data.List[0]
      console.log('res3232',res)
      this.actuaryData = res

      if(res.AllowSettlement===1){
        this.lastMonthIsOver = true
      }else if(res.AllowSettlement===2){
        this.lastMonthIsOver = false
        this.LastSettlementMonth = res.LastSettlementMonth
        this.LastSettlementMonthText = `${res.LastSettlementMonth}审结中月度结算正在审批中，请审结后再发起${req.StatisticsMonth}月度结算`
      }else{
        this.lastMonthIsOver = false
        if(res.LastSettlementState===0){
          // this.LastSettlementMonth =`请先进行${res.LastSettlementMonth}月度结算`
          this.LastSettlementMonth = res.LastSettlementMonth
        }else if(res.LastSettlementState===1){
          // this.LastSettlementMonth =`请先进行${res.LastSettlementMonth}月度结算`
          this.LastSettlementMonth = res.LastSettlementMonth
        }else if(res.LastSettlementState===2){
          // this.LastSettlementMonth =`请先进行${res.LastSettlementMonth}月度结算正在审批中，请审结后再发起下一个月度结算`
          this.LastSettlementMonth = res.LastSettlementMonth
        }
      }
      uni.hideLoading()
    },
    // 下一环节审批人
    changeNextPerson(e){
      console.log('e',e)
      let value = Number(e.target.value)
      this.nextPersonIndex = value
      this.nextPersonValue = this.nextPerson[value].value
      this.nextPersonLabel = this.nextPerson[value].label
    },
    // 驳回的选择
    changeReject(e){
      console.log('e',e)
      console.log('this.rejectDataList',this.rejectDataList)
      let res = JSON.parse(this.rejectDataList[Number(e.target.value)].value)
      console.log('res',res)
      this.showRejectText = res.APPROVALROUTE_NAME
      this.rejectSelectValue = res
    },
    closePop(){
      this.showPop = false
      this.showType = 0
      this.approveDesc = ''
      this.nextPersonIndex = ''
      this.nextPersonLabel = ''
      this.nextPersonValue = ''
      this.isPending = false
    },
    // 1审核 2驳回
    handleShowPop(type){
      if(!this.isShowBtn){
        uni.showToast({
          title: '无审批权限！',
          icon:'error',
          duration: 1000
        });
        return
      }
      this.showPop = true
      this.showType = type
      if(type===1){
        this.approveDesc = '已核对，拟同意！'
      }else{
        this.approveDesc = ''
      }
    },
    // 1审核 2驳回
    async handleExamine(type){
      if(this.isPending){
        return
      }
      this.isPending = true
      let req = {}
      let data = {}
      if(type===1){
        if(!this.approveDesc ){
          uni.showToast({
            title: '请输入审核意见',
            icon:'error',
            duration: 1000
          });
          return
        }
        if(!this.nextPersonValue && this.progressObjDetail.NEXT_STATE!==9000){
          uni.showToast({
            title: '请选择下一审批人',
            icon:'error',
            duration: 1000
          });
          return
        }
        uni.showLoading({
          title: '发起申请...'
        })
        let [APPOVED_NAME,APPOVED_IDS] = this.nextPersonValue.split('-')
        req = {
          businessApprovalID: this.detailObj.BUSINESSAPPROVAL_ID,
          curProinstState: this.progressDetail.BUSINESSAPPROVAL_STATE,
          approveedInfo: this.approveDesc ,
          approveedStaffId: Store.state.userData.UserId,
          approveedStaffName: Store.state.userData.UserName,
          nextId: APPOVED_IDS
        }
        if (this.detailObj.SETTLEMENT_TYPE === 2) {
          data = await request.$webGet('EShangApiMain/Finance/ApproveMonthAccountProinst', req)
        }else{
          data = await request.$webGet('EShangApiMain/Finance/ApproveAccountProinst', req)
        }
        console.log('data',data)
      }else if(type===2){
        if(!this.rejectSelectValue){
          uni.showToast({
            title: '请选择回退状态',
            icon:'error',
            duration: 1000
          });
          return
        }
        if(!this.approveDesc){
          uni.showToast({
            title: '请输入审核意见',
            icon:'error',
            duration: 1000
          });
          return
        }
        uni.showLoading({
          title: '发起申请...'
        })
        req = {

          businessApprovalID: this.detailObj.BUSINESSAPPROVAL_ID,
          approveedStaffId: Store.state.userData.UserId,
          approveedStaffName: Store.state.userData.UserName,
          approveedInfo: this.approveDesc,
          targetProinstState: this.rejectSelectValue.APPROVALROUTE_STATE
        }
        if (this.detailObj.SETTLEMENT_TYPE === 2) {
          data = await request.$webGet('EShangApiMain/Finance/RejectMonthAccountProinst', req)
        }else{
          data = await request.$webGet('EShangApiMain/Finance/RejectAccountProinst', req)
        }
        console.log('data',data)
      }
      uni.hideLoading()
      if(data.Result_Code===100){
        uni.showToast({
          title: data.Result_Desc,
          icon:'none',
          duration: 2000
        });
        if (this.isPush) {
          setTimeout(()=>{
            uni.setStorageSync('reolad','true')
            uni.redirectTo({
              url: '/pages/settlementApproval/index'
            });
          },2000)
        }else{
          setTimeout(()=>{
            uni.setStorageSync('reolad','true')
            uni.navigateBack({
              delta: 1
            });
          },2000)
        }


      }else{
        uni.showToast({
          title: data.Result_Desc,
          icon:'error',
          duration: 2000
        });
      }
      this.isPending = false
    },
    // 流程 下一环节 等数据
    async handleGetProgress(){
      if(!this.detailObj.BUSINESSAPPROVAL_ID){
        const req = {
          OperationType: this.detailObj.SETTLEMENT_TYPE===1?'11':'12',
          CurState: 1000,
          IsValid: 1,
          ShowApprovalUser: true,
          ServerpartIds: this.detailObj.SERVERPART_ID || '',
          ShopIds: this.detailObj.SERVERPARTSHOP_ID || ''
        }
        const data = await request.$webGet('EShangApiMain/BusinessProcess/GetAPPROVALROUTEDetail', req)
        console.log('handleGetProgress',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
          if (list && list.length > 0 && list.length === 1) {
            this.nextPersonIndex = 0
            this.nextPersonValue = list[0].value
          }
        }
        return
      }
      const req = {
        BUSINESSAPPROVALId: this.detailObj.BUSINESSAPPROVAL_ID
      }
      uni.showLoading({
        title: '请求流程数据...'
      })
      const data = await request.$webGet('EShangApiMain/BusinessProcess/GetBUSINESSAPPROVALDetail', req)
      let res = data.Result_Data
      console.log('res',res)
      const secondReq = {
        OperationType: this.detailObj.SETTLEMENT_TYPE===1?'11':'12',
        CurState: res.BUSINESSAPPROVAL_STATE,
        IsValid: 1,
        ShowApprovalUser: true,
        ServerpartIds: this.detailObj.SERVERPART_ID || '',
        ShopIds: this.detailObj.SERVERPARTSHOP_ID || ''
      }
      const secondData = await request.$webGet('EShangApiMain/BusinessProcess/GetAPPROVALROUTEDetail', secondReq)
      this.progressObjDetail = secondData.Result_Data
      console.log('secondData',secondData)

      this.progressDetail = res
      console.log('Store.state.userData.UserId',Store.state.userData.UserId)
      console.log('res.APPOVED_IDS',res.APPOVED_IDS)
      if(Number(res.APPOVED_IDS) === Number(Store.state.userData.UserId)){
        this.isShowBtn = true
      }
      console.log('res.approveList',res.approveList)
      this.progressList = res.approveList
      this.progressList.unshift({
        APPLYAPPROVE_NAME: '服务区经营主管',
        APPLYAPPROVE_DATE:res.BUSINESS_STARTDATE,
        STAFF_NAME:res.STAFF_NAME,
        APPLYAPPROVE_INFO: res.BUSINESSAPPROVAL_DESC
      })
      // 不是完结的 就需要在后面加待审核人
      if (this.detailObj.Approvalstate>0 && this.isShowProgress && res.BUSINESSAPPROVAL_STATE!==9000){
        // 添加待审核人
        // progressDetail.APPOVED_NAME
        this.progressList.push({
          APPLYAPPROVE_NAME: res.APPOVED_NAME,
          STAFF_NAME: '待审核',
          APPLYAPPROVE_DATE:''
        })
      }
      console.log('this.progressList',this.progressList)




      let list = []
      if(res.UserList && res.UserList.length>0){
        res.UserList.forEach(item=>{
          // list.push({label: item.USER_NAME,value: item.USER_ID})
          list.push({label: item.USER_NAME,value: `${item.USER_NAME}-${item.USER_ID}`})
        })
      }

      this.nextPerson = list
      console.log('this.nextPerson',this.nextPerson)


      let rejectList = []
      if(res.rejectList && res.rejectList.length>0){
        res.rejectList.forEach((item) => {
          rejectList.push({ label: item.APPROVALROUTE_NAME, value: JSON.stringify(item) })
        })
      }

      this.rejectDataList = rejectList
      console.log('this.rejectDataList',this.rejectDataList)
      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;
        .contentTop{
          display: flex;
          align-items: center;
          .topLeft{
            width: 96rpx;
            height: 96rpx;
            border-radius: 16rpx;
            overflow: hidden;
            margin-right: 16rpx;
            .detailIcon{
              width: 96rpx;
              height: 96rpx;
            }
          }
          .topRight{
            width: calc(100% - 212rpx);
            .detailTitle{
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 32rpx;
              color: #160002;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;
              margin-bottom: 12rpx;
              display: inline-block;
              width: 100%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .typeBox{
              display: flex;
              align-items: center;
              .typeItem{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #ED8200;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                padding: 2rpx 8rpx;
                background: #FFEEC8;
                border-radius: 4rpx;
              }
              .indexItem{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #FF7200;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                background: #FFEAD9;
                border-radius: 4rpx;
                padding: 2rpx 8rpx;
                margin-left: 12rpx;
              }
            }
          }
        }
        .contentMoney{
          display: flex;
          align-items: center;
          margin-top: 40rpx;
          .moneyItem{
            width: 50%;
            .redMoney{
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              font-size: 40rpx;
              color: #9A3D1A;
              line-height: 50rpx;
              text-align: left;
              font-style: normal;
            }
            .moneyValue{
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              font-size: 34rpx;
              color: #160002;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
            .label{
              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;
                margin-left: 4rpx;
              }
            }
          }
        }
        .otherMessage{
          background: #F9F9F9;
          border-radius: 8rpx;
          width: 100%;
          box-sizing: border-box;
          padding: 24rpx;
          margin-top: 24rpx;
          display: flex;
          align-items: center;
          .otherItem{
            width: calc(100% / 3);
            box-sizing: border-box;
            .value{
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              font-size: 28rpx;
              color: #160002;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              margin-bottom: 4rpx;
            }
            .label{
              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;
                margin-left: 4rpx;
              }
            }
          }
        }
      }
      .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;
        }
      }
    }
  }

  .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: DINAlternate-Bold, DINAlternate;
            font-weight: 400;
            font-size: 24rpx;
            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: 28rpx;
              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;
              }
              .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: 26rpx;
                font-family: DINAlternate-Bold, DINAlternate;
              }
            }
            .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;
        }
      }
    }
  }

  .renovationMonthBox{
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx 32rpx;
    background: #FFFFFF;
    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;
          margin-bottom: 8rpx;
        }
        .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: 26rpx;
              font-family: DINAlternate-Bold, DINAlternate;
            }
          }
          .tableRowGray{
            background-color: #F9F9FA!important;
          }
        }
      }
  }

  .payableFeesBox{
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx 32rpx 24rpx;
    background-color: #fff;
    .payableFeesBoxTitle{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #212226;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
    }
    .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: 26rpx;
            font-family: DINAlternate-Bold, DINAlternate;
          }
        }
        .tableRowGray{
          background-color: #F9F9FA!important;
        }
      }
    }
  }



  .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: flex-start;
            .labelRow{
              width: 30%;
              box-sizing: border-box;
              padding: 22rpx 0 22rpx 22rpx;
              font-size: 24rpx;
            }
            .beforeIcon{
              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: 26rpx;
              font-family: DINAlternate-Bold, DINAlternate;
            }
        }
        .tableRowGray{
          background-color: #F9F9FA!important;
        }
      }
    }
  }
  .progressList{
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 48rpx 32rpx 48rpx;
    margin-bottom: 24rpx;
    .progressTitle{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #212226;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
    }
    .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;
          font-size: 26rpx;
        }
        .value{
          margin-left: 8rpx;
          font-size: 26rpx;
        }
      }
    }
    .listBox{
      margin-top: 24rpx;
      width: 100%;
      .listItem{
        .listItemTop{
          width: 100%;
          display: flex;
          align-items: flex-start;
          .itemLeft{
            display: flex;
            align-items: center;
            .nameIcon{
              width: 60rpx;
              height: 60rpx;
              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: 20rpx;
                color: #FFFFFF;
                line-height: 32rpx;
                text-align: left;
                font-style: normal;
              }
              .defaultPerson{
                width: 32rpx;
                height: 36rpx;
              }
            }
          }
          .itemRight{
            width: calc(100% - 72rpx);
            margin-left: 12rpx;
            position: relative;
            .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;
              width: 100%;
              display: inline-block;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .noticeBox{
              position: absolute;
              top: 0;left: 0;
              width: 250px;
              padding: 16px;
              background: #fff;
              box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.75);
              z-index: 8;
              border: 1px solid #ccc;
              border-radius: 20px;
            }
          }
        }
        .lineBox{
          width: 100%;
          height: 38rpx;
          position: relative;
          .line{
            position: absolute;
            width: 4rpx;
            height: 50rpx;
            background: #E3E3E4;
            bottom: 3rpx;left: 32rpx;
          }
        }
      }
    }
  }
  .allBtnBox{
    width: 100%;
    height: 196rpx;
    border-top: 2rpx solid #EAEBED;
    box-sizing: border-box;
    padding: 16rpx 32rpx;
    position: fixed;
    bottom: 0;left: 0;
    background-color: #f3f3f3;
    .createBtn{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #FFFFFF;
      line-height: 44rpx;
      font-style: normal;
      background: #FA8B39;
      border-radius: 8rpx;
      text-align: center;
      padding: 22rpx 0;
    }
    .threeBtnBox{
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-bottom: 32rpx;
      .goRight{
        width: 50rpx;
        height: 88rpx;
        display: flex;
        flex-direction: column;
        margin-right: 32rpx;
        .goRightIcon{
          width: 40rpx;
          height: 40rpx;
        }
        .goRightText{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 24rpx;
          color: #FA8B39;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
        }
      }

      .rejectBtn{
        width: calc((100% ) / 2);
        box-sizing: border-box;
        display: inline-block;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #212226;
        line-height: 44rpx;
        text-align: center;
        font-style: normal;
        padding: 22rpx 110rpx;
        border-radius: 8rpx;
        border: 2rpx solid rgba(126,134,142,0.24);
        margin-right: 16rpx;
      }
      .agreeBtn{
        width: calc((100% ) / 2);
        box-sizing: border-box;
        display: inline-block;
        background: #FA8B39;
        border-radius: 8rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 44rpx;
        padding: 22rpx 110rpx;
        text-align: center;
        font-style: normal;
      }

    }

  }




  .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;
        align-items: center;
        justify-content: flex-start;
        .label{
          color: #ADB2BF;
          font-size: 26rpx;
        }
        .value{
          font-size: 26rpx;
        }
        .imgIcon{
          width: 50rpx;
          height: 32rpx;
          border-radius: 50%;
        }
      }
    }
    .getMoreBox{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .imgIcon{
        width: 50rpx;
        height: 32rpx;
        border-radius: 50%;
        transform: rotate(90deg);
      }
    }
    .compareBox{
      width: 100%;
      display: flex;
      .compareBoxItem{
        width: 50%;
        .smallTitle{
          font-size: 26rpx;
          font-weight: 600;
          margin-bottom: 16rpx;
        }
        .rowItemBox{
          display: flex;
          .allRowItem{
            width: 100%;
            .label{
              color: #ADB2BF;
              font-size: 26rpx;
            }
            .value{
              font-size: 26rpx;
            }
          }
          .rowItem{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .label{
              color: #ADB2BF;
              font-size: 26rpx;
            }
            .value{
              font-size: 26rpx;
            }
            .imgIcon{
              width: 50rpx;
              height: 32rpx;
              border-radius: 50%;
            }
          }
        }
      }
    }


    .comparedBox{
      width: 100%;
      .comparedBoxTitleBox{
        margin-bottom: 16rpx;
        display: flex;
        align-items: center;
        .beforeTitleBox{
          width: 60%;
          font-size: 26rpx;
          font-weight: 600;
          text-align: left;
        }
        .afterTitleBox{
          width: 40%;
          font-size: 26rpx;
          font-weight: 600;
          text-align: right;
        }
      }
      .comparedItem{
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        .compareLabel{
          width: 30%;
          color: #ADB2BF;
          font-size: 26rpx;
        }
        .beforeItem{
          width: 30%;
          font-size: 26rpx;
          text-align: right;
        }
        .afterItem{
          width: 40%;
          font-size: 26rpx;
          text-align: right;
        }
      }
    }
  }

  .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%;
          }
        }

      }
    }
  }

  .progressBox{
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx;
    background: #fff;
    margin-top: 24rpx;
    .progressTopBox{
      width: 100%;
      position: relative;
      margin-bottom: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .progressTitle{
      }
      .getMoreIcon{
        width: 30rpx;
        height: 30rpx;
      }

    }
    .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;
          font-size: 26rpx;
        }
        .value{
          margin-left: 8rpx;
          font-size: 26rpx;
        }
      }
    }
    .progressList{
      width: 100%;
      margin-top: 24rpx;
      .progressItem{
        width: 100%;
        .progressItemTop{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .progressItemTopLeft{
            display: flex;
            align-items: center;
            .progressIcon{
              width: 20rpx;
              height: 20rpx;
            }
            .progressValue{
              font-size: 26rpx;
            }
          }
          .progressItemTopRight{
            font-size: 26rpx;
          }
        }
        .progressItemBottom{
          width: 100%;
          display: flex;
          align-items: center;
          .progressItemBottomLeft{
            font-size: 26rpx;
          }
          .progressItemBottomRight{
            flex: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .uniPopup{
    width: calc(100vw - 140rpx);
    height: 250px;
    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;
      }
    }

    .detailBox{
      margin-top: 24rpx;
      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;
        }
      }
    }

    .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;
      }
    }
  }


  .uniPopupApplyFor{
    width: calc(100vw - 140rpx);
    height: 500px;
    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;
      }
    }
    .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: 100%;
      border-radius: 12rpx;
      border: 2rpx solid #EEEEF0;
      .tableHeader{
        display: flex;
        align-items: center;
        width: 100%;
        height: 80rpx;
        background-color: #d0d1d2;
        .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: 16rpx 0 16rpx 16rpx;
            font-size: 24rpx;
          }
          .refundPay{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            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: 16rpx 16rpx 16rpx 0;
            text-align: right;
            font-size: 26rpx;
            font-family: DINAlternate-Bold, DINAlternate;
          }
        }
        .tableRowGray{
          background-color: #F9F9FA!important;
        }
      }
    }

    .detailBoxApplyFor{
      .smallTitle{
        font-size: 26rpx;
        font-weight: 600;
        margin-bottom: 16rpx;
      }
      .tableRow{
        .rowItemBox{
          display: flex;
          .allRowItem{
            width: 100%;
            .label{
              color: #ADB2BF;
              font-size: 26rpx;
            }
            .value{
              font-size: 26rpx;
            }
          }
          .rowItem{
            width: 50%;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            .label{
              color: #ADB2BF;
              font-size: 26rpx;
            }
            .value{
              font-size: 26rpx;
            }
            .imgIcon{
              width: 50rpx;
              height: 32rpx;
              border-radius: 50%;
            }
          }
          .rowItemSpecial{
            display: flex;
            justify-content: flex-start;
            .label{
              color: #ADB2BF;
              font-size: 26rpx;
            }
            .value{
              font-size: 26rpx;
            }
          }
        }

      }
    }

    .goRightBox{
      margin-top: 40rpx;
      display: flex;
      justify-content: space-around;
      .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{

        }
      }

      .commodityContent>div {
        background: url('/static/images/effective/sjjy_jb.png') no-repeat center;
        width: 100%;
        text-align: center;
        background-size: contain;
      }
      .commodityContent-cashpay {

        justify-content: flex-start;
        box-shadow: unset;
        display: flex;

      }
    }
    .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;
    }
  }


  .uniPopupShowSelect{
    width: calc(100vw - 140rpx);
    height: 350px;
    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;
        }
      }
    }
  }

  .uniPopupYearApplyFor{
    width: calc(100vw - 140rpx);
    height: 480px;
    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;
      }
    }

    .detailBoxApplyFor{
      .smallTitle{
        font-size: 26rpx;
        font-weight: 600;
        margin-bottom: 16rpx;
      }
      .tableRow{
        .rowItemBox{
          display: flex;
          .allRowItem{
            width: 100%;
            .label{
              color: #ADB2BF;
              font-size: 26rpx;
            }
            .value{
              font-size: 26rpx;
            }
          }
          .rowItem{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .label{
              color: #ADB2BF;
              font-size: 26rpx;
            }
            .value{
              font-size: 26rpx;
            }
            .imgIcon{
              width: 50rpx;
              height: 32rpx;
              border-radius: 50%;
            }
          }
          .rowItemSpecial{
            display: flex;
            justify-content: flex-start;
            .label{
              color: #ADB2BF;
              font-size: 26rpx;
            }
            .value{
              font-size: 26rpx;
            }
          }
        }
      }
    }
  }
}
</style>
