<template>
  <view class="main">
    <view style="background: #fff">
      <!--    顶部标题-->
      <view class="pageTitle">{{
          detailObj.SETTLEMENT_TYPE===1?`${detailObj.SERVERPART_NAME}-${topDetail.SERVERPARTSHOP_NAME || ''}年度结算表`:
          `${detailObj.SERVERPART_NAME}-${topDetail.SERVERPARTSHOP_NAME || ''}-${$moment(detailObj.ENDDATE).format('YYYYMM')}月度结算表`
        }}</view>
      <!--  顶部详情-->
      <view class="detailBox">

        <view class="detailRow">
          <view class="detailAllItem">
            <span class="label">商家名称：</span>
            <span class="value">{{topDetail.MERCHANTS_NAME || ''}}</span>
          </view>
        </view>

        <view class="detailRow">
          <view class="detailAllItem">
            <span class="label">合同总金额：</span>
            <span class="value">{{topDetail.RENTFEE ? $util.getMoney(topDetail.RENTFEE  / 10000)+'万元':''}}</span>
          </view>
        </view>

        <view class="detailRow">
          <view class="detailItem">
            <span class="label">税率：</span>
            <span class="value">{{topDetail.TaxRate ? `${topDetail.TaxRate}%` : '-'}}</span>
          </view>
          <view class="detailItem">
            <span class="label">期除税收入：</span>
            <span class="value">{{topDetail.MINTURNOVER ? `${$util.getMoney(topDetail.MINTURNOVER / 10000)}万元` : ''}}</span>
          </view>
        </view>


        <view class="detailRow">
          <view class="detailItem">
            <span class="label">履约保证金：</span>
            <span class="value">{{topDetail.SECURITYDEPOSIT ? $util.getMoney(topDetail.SECURITYDEPOSIT  / 10000)+'万元':''}}</span>
          </view>
          <view class="detailItem">
            <span class="label">提成比例：</span>
            <span class="value">{{topDetail.GUARANTEERATIO ? `${topDetail.GUARANTEERATIO}%` : '-'}}</span>
          </view>
        </view>

        <view class="detailRow">
          <view class="detailItem">
            <span class="label">结算模式：</span>
            <span class="value">{{detailObj.BUSINESS_TYPE?SETTLEMENT_MODESObj[detailObj.BUSINESS_TYPE] : ''}}</span>
          </view>
          <view class="detailItem">
            <span class="label">项目期数：</span>
            <span class="value">{{detailObj.CURRENT_PERIOD || ''}}</span>
          </view>
        </view>

        <view class="detailRow" v-if="topDetail.DecorateDesc && topDetail.DecorateDesc!=='-'">
          <view class="detailAllItem">
            <span class="label">装修期：</span>
            <span class="value">{{topDetail.DecorateDesc || ''}}</span>
          </view>
        </view>

        <view class="detailRow">
          <view class="detailItem">
            <span class="label">开始时间：</span>
            <span class="value">{{detailObj.STARTDATE || ''}}</span>
          </view>
          <view class="detailItem">
            <span class="label">结束日期：</span>
            <span class="value">{{detailObj.ENDDATE || ''}}</span>
          </view>
        </view>
      </view>
    </view>

<!--    结算的表格数据-->
    <view class="tableBox">
      <view class="smallTitle">{{ detailObj.Approvalstate>0?'精算数据':'结算数据' }}</view>

      <view class="tableRow">
        <view class="rowItemBox">
          <view class="allRowItem">
            <span class="label">期限：</span>
            <span class="value">{{`${detailObj.STARTDATE}-${detailObj.ENDDATE}`}}</span>
          </view>
        </view>

        <view class="rowItemBox">
          <view class="rowItem">
            <span class="label">本月营收：</span>
            <span class="value">{{actuaryData.CurMonthRevenue?`${$util.getMoney(actuaryData.CurMonthRevenue)}`:''}}</span>
          </view>
          <view class="rowItem">
            <span class="label">累计营业额：</span>
            <span class="value">{{actuaryData.REVENUEDAILY_AMOUNTTotal?`${$util.getMoney(actuaryData.REVENUEDAILY_AMOUNTTotal)}`:''}}</span>
          </view>

<!--          <view class="allRowItem">-->
<!--            <span class="label">累计营业额：</span>-->
<!--            <span class="value">{{actuaryData.REVENUEDAILY_AMOUNTTotal?`${$util.getMoney(actuaryData.REVENUEDAILY_AMOUNTTotal)}`:''}}</span>-->
<!--          </view>-->
        </view>

        <view class="rowItemBox">
          <view class="rowItem">
            <span class="label">移动支付：</span>
            <span class="value">{{actuaryData.MOBILEPAY_AMOUNT?`${$util.getMoney(actuaryData.MOBILEPAY_AMOUNT)}`:''}}</span>
          </view>
          <view class="rowItem">
            <span class="label">移动冲正：</span>
            <span class="value">{{actuaryData.MOBILEPAY_CORRECT?`${$util.getMoney(actuaryData.MOBILEPAY_CORRECT)}`:'0'}}</span>
          </view>
        </view>

        <view class="rowItemBox">
          <view class="rowItem">
            <span class="label">现金交易：</span>
            <span class="value">{{actuaryData.CASHPAY_AMOUNT?`${$util.getMoney(actuaryData.CASHPAY_AMOUNT)}`:''}}</span>
          </view>
          <view class="rowItem">
            <span class="label">现金冲正：</span>
            <span class="value">{{actuaryData.CASHPAY_CORRECT?`${$util.getMoney(actuaryData.CASHPAY_CORRECT)}`:'0'}}</span>
          </view>
        </view>

        <view class="rowItemBox">
          <view class="rowItem">
            <span class="label">提成金额：</span>
            <span class="value">{{actuaryData.GUARANTEERATIOAMOUNT?`${$util.getMoney(actuaryData.GUARANTEERATIOAMOUNT)}`:''}}</span>
          </view>
          <view class="rowItem">
            <span class="label">提成收入：</span>
            <span class="value">{{actuaryData.GUARANTEERATIOINCOME?`${$util.getMoney(actuaryData.GUARANTEERATIOINCOME)}`:''}}</span>
          </view>
        </view>
      </view>
    </view>


<!--    按钮-->
    <view class="btnBox">

<!--      <view class="detailBox">-->
<!--        <view class="detailItem" style="display: flex;align-items: center">-->
<!--          <span class="label">下一环节审批人：</span>-->
<!--          <picker mode="selector" @change="changeNextPerson" :value="nextPersonIndex" range-key="ActDef_Name" :range="nextPerson">-->
<!--            <view class="uni-ellipsis">{{nextPersonIndex?nextPerson[nextPersonIndex].label:'请选择'}}</view>-->
<!--          </picker>-->
<!--        </view>-->
<!--        <view class="detailItem">-->
<!--          <span class="label">审核意见：</span>-->
<!--          <textarea placeholder="请输入您的意见" v-model="approveDesc" style="height: 60px"/>-->
<!--        </view>-->
<!--      </view>-->
      <view class="btnList">
        <view class="btnItem" v-if="detailObj.Approvalstate===0" @click="handleShowApplyForPop">
          <view class="iconBox">
            <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/yj-btn.png"/>
          </view>
          <span>发起申请</span>
        </view>

        <view class="btnItem" v-if="detailObj.Approvalstate>0" @click="handleShowPop(1)">
          <view class="iconBox">
            <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/sh-btn.png"/>
          </view>
          <span :style="{color: !isShowBtn?'#ADB2BF':''}">审核</span>
        </view>

        <view class="btnItem" v-if="detailObj.Approvalstate>0" @click="handleShowPop(2)">
          <view class="iconBox">
            <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/bh-btn.png"/>
          </view>
          <span :style="{color: !isShowBtn?'#ADB2BF':''}">驳回</span>
        </view>
      </view>
    </view>

<!--    流程-->
    <view class="progressBox" v-if="detailObj.Approvalstate>0">
      <view class="progressTopBox">
        <span class="progressTitle">审批流程</span>
      </view>
      <view class="detailTopBox"  v-if="detailObj.Approvalstate>0">
        <view class="leftTop">
          <span class="label">申请人：</span>
          <span class="value">{{progressDetail.STAFF_NAME || ''}}</span>
        </view>
        <view class="rightTop">
          <span class="value">{{progressDetail.BUSINESS_STARTDATE || ''}}</span>
        </view>
      </view>

      <view class="progressList">
        <view class="progressItem" v-for="(item,index) in progressList" :key="index">
          <view class="progressItemTop">
            <view class="progressItemTopLeft">
              <image class="progressIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/right-ico.png"/>
              <span>{{`【${item.APPLYAPPROVE_NAME}】`}}</span>
            </view>
            <view class="progressItemTopRight">{{`${item.APPLYAPPROVE_DATE}`}}</view>
          </view>

          <view class="progressItemBottom">
            <view class="progressItemBottomLeft">{{item.STAFF_NAME}}</view>
            <view class="progressItemBottomRight">{{`${item.APPLYAPPROVE_INFO}`}}</view>
          </view>
        </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">
            <span class="label">下一环节审批人：</span>
            <picker mode="selector" @change="changeNextPerson" :value="nextPersonIndex" range-key="label" :range="nextPerson">
              <view class="uni-ellipsis">{{nextPersonIndex?nextPerson[nextPersonIndex].label:'请选择'}}</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="detailBoxApplyFor">
          <view class="smallTitle">结算数据</view>

          <view class="tableRow">
            <view class="rowItemBox">
              <view class="allRowItem">
                <span class="label">期限：</span>
                <span class="value">{{`${detailObj.STARTDATE}-${detailObj.ENDDATE}`}}</span>
              </view>
            </view>

            <view class="rowItemBox">
              <view class="allRowItem">
                <span class="label">累计营业额：</span>
                <span class="value">{{actuaryData.REVENUEDAILY_AMOUNTTotal?`${$util.getMoney(actuaryData.REVENUEDAILY_AMOUNTTotal)}`:''}}</span>
              </view>
            </view>

            <view class="rowItemBox">
              <view class="rowItem">
                <span class="label">移动支付：</span>
                <span class="value">{{actuaryData.MOBILEPAY_AMOUNT?`${$util.getMoney(actuaryData.MOBILEPAY_AMOUNT)}`:''}}</span>
              </view>
              <view class="rowItem">
                <span class="label">移动冲正：</span>
                <span class="value">{{actuaryData.MOBILEPAY_CORRECT?`${$util.getMoney(actuaryData.MOBILEPAY_CORRECT)}`:'0'}}</span>
              </view>
            </view>

            <view class="rowItemBox">
              <view class="rowItem">
                <span class="label">现金交易：</span>
                <span class="value">{{actuaryData.CASHPAY_AMOUNT?`${$util.getMoney(actuaryData.CASHPAY_AMOUNT)}`:''}}</span>
              </view>
              <view class="rowItem">
                <span class="label">现金冲正：</span>
                <span class="value">{{actuaryData.CASHPAY_CORRECT?`${$util.getMoney(actuaryData.CASHPAY_CORRECT)}`:'0'}}</span>
              </view>
            </view>

            <view class="rowItemBox">
              <view class="rowItem">
                <span class="label">提成金额：</span>
                <span class="value">{{actuaryData.GUARANTEERATIOAMOUNT?`${$util.getMoney(actuaryData.GUARANTEERATIOAMOUNT)}`:''}}</span>
              </view>
              <view class="rowItem">
                <span class="label">提成收入：</span>
                <span class="value">{{actuaryData.GUARANTEERATIOINCOME?`${$util.getMoney(actuaryData.GUARANTEERATIOINCOME)}`:''}}</span>
              </view>
            </view>
          </view>
        </view>


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

        <view class="detailBoxApplyFor" v-if="afterCalibration">
          <view class="smallTitle">精算数据</view>

          <view class="tableRow">
            <view class="rowItemBox">
              <view class="allRowItem">
                <span class="label">期限：</span>
                <span class="value">{{`${detailObj.STARTDATE}-${detailObj.ENDDATE}`}}</span>
              </view>
            </view>

            <view class="rowItemBox">
              <view class="allRowItem">
                <span class="label">累计营业额：</span>
                <span class="value">{{newCalibration.REVENUEDAILY_AMOUNTTotal?`${$util.getMoney(newCalibration.REVENUEDAILY_AMOUNTTotal)}`:''}}</span>
              </view>
            </view>

            <view class="rowItemBox" style="display: flex;justify-content: space-between;align-items: center">
              <view class="rowItemSpecial">
                <span class="label">移动支付：</span>
                <span class="value">
                  {{newCalibration.MOBILEPAY_AMOUNT?`${$util.getMoney(newCalibration.MOBILEPAY_AMOUNT + (newCalibration.MOBILEPAY_CORRECT || 0))}` + `${newCalibration.MOBILEPAY_CORRECT?`(${newCalibration.MOBILEPAY_CORRECT>0?'+':''}${newCalibration.MOBILEPAY_CORRECT})`:''}` :''}}
                </span>
              </view>
              <view class="rowItemSpecial">
                <span class="label">移动冲正：</span>
                <span class="value">{{newCalibration.MOBILEPAY_CORRECT?`${$util.getMoney(newCalibration.MOBILEPAY_CORRECT)}`:'0'}}</span>
              </view>
            </view>

            <view class="rowItemBox" style="display: flex;justify-content: space-between;align-items: center">
              <view class="rowItemSpecial">
                <span class="label">现金交易：</span>
                <span class="value">{{newCalibration.CASHPAY_AMOUNT?`${$util.getMoney(newCalibration.CASHPAY_AMOUNT + (newCalibration.CASHPAY_CORRECT || 0))}` + `${newCalibration.CASHPAY_CORRECT?`(${newCalibration.CASHPAY_CORRECT>0?'+':''}${newCalibration.CASHPAY_CORRECT})`:'' }` :''}}</span>
              </view>
              <view class="rowItemSpecial">
                <span class="label">现金冲正：</span>
                <span class="value">{{newCalibration.CASHPAY_CORRECT?`${$util.getMoney(newCalibration.CASHPAY_CORRECT)}`:'0'}}</span>
              </view>
            </view>

            <view class="rowItemBox">
              <view class="rowItem">
                <span class="label">提成金额：</span>
                <span class="value">{{newCalibration.GUARANTEERATIOAMOUNT?`${$util.getMoney(newCalibration.GUARANTEERATIOAMOUNT)}`:''}}</span>
              </view>
              <view class="rowItem">
                <span class="label">提成收入：</span>
                <span class="value">{{newCalibration.GUARANTEERATIOINCOME?`${$util.getMoney(newCalibration.GUARANTEERATIOINCOME)}`:''}}</span>
              </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";
export default {
  name: "detail",
  components: {UniPop},
  data() {
    return {
      detailObj:{},// 传入的详情数据
      staticMonth:'',// 外面查询时间的结束时间
      SETTLEMENT_MODESObj:{
        1000:"营收回款",
        2000: "资金返款",
        3000: "营收分润",
        4000: "组合分润",
        9998: "阶段提成",
        9999: "分段提成",
      },// 写死的枚举
      topDetail:{},// 顶部详情数据
      actuaryData:{},// 精算数据
      approveDesc:'已核对，拟同意！',// 审批意见
      nextPerson:[],// 下一环节审批人列表
      nextPersonIndex:'',// 下一环节审批人索引
      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: '',// 最近审结的月份
      isShowSelect: false,// 出现选人的悬浮框

    }
  },
  async onLoad(query){

    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')
    }

    await this.handleGetDetailDifference()
    await this.handleGetActuaryData()
    await this.handleGetProgress()
  },
  computed: {
    ...mapGetters({'users':'getUser'}),
  },

  methods:{
    // 选择审批人
    handleChangePerson(e){
      console.log('e',e)
      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)
        const req = {
          BusinessapprovalModel:{
            OPERATION_TYPE:'12',
            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
          }
        }
        console.log('req',req)
        const data = await request.$webPost('EShangApiMain/Finance/ApplyMonthAccountProinst', req)
        if (data.Result_Code === 100) {
          uni.showToast({
            icon:'success',
            duration: 2000,
            title: data.Result_Desc,
          });
          uni.navigateBack({
            delta: 1
          });
        }else{
          uni.showToast({
            icon:'error',
            duration: 2000,
            title: data.Result_Desc,
          });
        }

      }
    },
    // 重新校准
    async handleRecalibrate(){
      console.log('this.MobilePayCorrect',this.MobilePayCorrect)
      console.log('this.CashPayCorrect',this.CashPayCorrect)
      const req = {
        BusinessProjectId: this.detailObj.BUSINESSPROJECT_ID,
        StatisticsMonth: this.staticMonth,
        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
    },
    // 显示发起申请的悬浮框
    handleShowApplyForPop(){
      let _this = this
      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)
              uni.navigateBack({
                delta: 1
              });
            } else if (res.cancel) {
              uni.navigateBack({
                delta: 1
              });
            }
          }
        });
      }
    },
    // 关闭发起申请的悬浮框
    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,
      }
      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
        console.log('this.topDetail',this.topDetail)
      }
      uni.hideLoading()
    },
    // 获取精算数据
    async handleGetActuaryData(){
      const req = {
        BusinessProjectId: this.detailObj.BUSINESSPROJECT_ID,
        StatisticsMonth: this.staticMonth,
        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('res',res)
      this.actuaryData = res

      if(res.AllowSettlement===1){
        this.lastMonthIsOver = true
      }else if(res.AllowSettlement===2){
        this.lastMonthIsOver = false
        this.LastSettlementMonth = `${res.LastSettlementMonth}审结中月度结算正在审批中，请审结后再发起${this.detailObj.STATISTICS_MONTH}月度结算`
      }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
    },
    // 驳回的选择
    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.nextPersonValue = ''
    },
    // 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){
          uni.showToast({
            title: '请选择下一审批人',
            icon:'error',
            duration: 1000
          });
          return
        }
        uni.showLoading({
          title: '发起申请...'
        })
        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: this.nextPersonValue
        }
        data = await request.$webGet('EShangApiMain/Finance/ApproveMonthAccountProinst', 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: this.rejectSelectValue.APPROVALSTAFF_ID,
          approveedStaffName: this.rejectSelectValue.APPROVALSTAFF_NAME,
          approveedInfo: this.approveDesc,
          targetProinstState: this.rejectSelectValue.APPROVALROUTE_STATE
        }
        data = await request.$webGet('EShangApiMain/Finance/RejectMonthAccountProinst', req)
        console.log('data',data)
      }
      uni.hideLoading()
      if(data.Result_Code===100){
        uni.showToast({
          title: data.Result_Desc,
          icon:'none',
          duration: 2000
        });
        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)
      this.progressDetail = res
      console.log('Store.state.userData.UserId',Store.state.userData.UserId)
      console.log('res.APPOVED_IDS',res.APPOVED_IDS)
      if(res.APPOVED_IDS.toString() === Store.state.userData.UserId.toString()){
        this.isShowBtn = true
      }
      this.progressList = res.approveList
      this.progressList.unshift({
        APPLYAPPROVE_NAME: '服务区经营主管',
        APPLYAPPROVE_DATE:res.BUSINESS_STARTDATE,
        STAFF_NAME:res.STAFF_NAME,
        APPLYAPPROVE_INFO:'',
      })
      let list = []
      res.UserList.forEach(item=>{
        list.push({label: item.USER_NAME,value: item.USER_ID})
      })
      this.nextPerson = list
      console.log('this.nextPerson',this.nextPerson)


      let rejectList = []

      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{
  .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;
    }
    .rowItemBox{
      display: flex;
      .allRowItem{
        width: 100%;
        .label{
          color: #ADB2BF;
          font-size: 26rpx;
        }
        .value{
          font-size: 26rpx;
        }
      }
      .rowItem{
        width: 50%;
        display: flex;
        justify-content: flex-start;
        .label{
          color: #ADB2BF;
          font-size: 26rpx;
        }
        .value{
          font-size: 26rpx;
        }
      }
    }
  }

  .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;
    .progressTopBox{
      width: 100%;
      position: relative;
      .progressTitle{
      }
      .progressTitle:after{
        font-family: uniicons;
        content: '\e581';
        position: absolute;
        right: 24rpx;
        top: 50%;
        color: #bbb;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }
    .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;
        }
      }
    }
    .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;
            }
          }
        }
        .progressItemBottom{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .progressItemBottomRight{
            width: 250rpx;
            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: 4rpx 8rpx;
        margin-top: 24rpx;
        border-radius: 8rpx;
        background: #1890FF;
        color: #fff;
      }
    }
  }


  .uniPopupApplyFor{
    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;
            justify-content: flex-start;
            .label{
              color: #ADB2BF;
              font-size: 26rpx;
            }
            .value{
              font-size: 26rpx;
            }
          }
          .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: 4rpx 8rpx;
        margin-top: 24rpx;
        border-radius: 8rpx;
        background: #1890FF;
        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: 4rpx 8rpx;
          margin-top: 24rpx;
          border-radius: 8rpx;
          background: #1890FF;
          color: #fff;
        }
      }
    }
  }
}
</style>
