<template>
  <a-card title="佣金钱包">
    <div class="box">
      <div class="box-item">
        <div class="title"> 
          <span>入账金额(元)</span> 
          <a-tooltip class="tooltip">
            <template #title>三方支付平台计算费率后，结算至服务商账户中的佣金金额。</template>
            <i class="bi bi-info-circle" />
          </a-tooltip>
        </div>
        <div class="amount">
          <a @click="historyFunc('PLATFORM_INACCOUNT', 1)"> {{ (vdata.PLATFORM_INACCOUNT.balanceAmount / 100).toFixed(2) }} </a>
          
          <right-outlined class="right" />
        </div>
      </div>

      <div class="box-item">
        <div class="title"> 
          <span>待入账(元)</span> 
          <a-tooltip class="tooltip">
            <template #title>处于结算周期中的待入账佣金金额。</template>
            <i class="bi bi-info-circle" />
          </a-tooltip>
        </div>
        <div class="amount">
          <a @click="historyFunc('PLATFORM_INACCOUNT', 2)"> {{ (vdata.PLATFORM_INACCOUNT.auditProfitAmount / 100).toFixed(2) }} </a>
          <right-outlined class="right" />
        </div>
      </div>

      <div v-if="$hasAgentEnt()" class="box-item">
        <div class="title"> 
          <span>利润(元)</span> 
          <a-tooltip class="tooltip">
            <template #title>减去代理商佣金后的实际利润金额。</template>
            <i class="bi bi-info-circle" />
          </a-tooltip>
        </div>
        <div class="amount">
          <a @click="historyFunc('PLATFORM_PROFIT', 1)"> {{ (vdata.PLATFORM_PROFIT.balanceAmount / 100).toFixed(2) }} </a>
          <right-outlined class="right" />
        </div>
      </div>

      <div v-if="$hasAgentEnt()" class="box-item">
        <div class="title"> 
          <span>在途利润(元)</span> 
          <a-tooltip class="tooltip">
            <template #title>处于结算周期中的实际利润金额。</template>
            <i class="bi bi-info-circle" />
          </a-tooltip>
        </div>
        <div class="amount">
          <a @click="historyFunc('PLATFORM_PROFIT', 2)"> {{ (vdata.PLATFORM_PROFIT.auditProfitAmount / 100).toFixed(2) }} </a>
          <right-outlined class="right" />
        </div>
      </div>
    </div>
  </a-card>

  <div>
    <!-- 流水记录 -->
    <HistoryPanelDrawer ref="historyPanelDrawerRef" />
  </div>
</template>

<script setup lang="ts">

import { $getPlatformProfit } from '@/api/manage'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import HistoryPanelDrawer from '@/views/order/history/HistoryPanelDrawer.vue'
const { $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties

const historyPanelDrawerRef = ref()

const vdata : any = reactive({

  PLATFORM_PROFIT: {},
  PLATFORM_INACCOUNT: {}

})

onMounted(() => {
  refData()
})

let loading = ref(false)

// 刷新
function refData(){
  loading.value = true
  $getPlatformProfit().then(res => {
      vdata.PLATFORM_PROFIT = res.PLATFORM_PROFIT || { balanceAmount : 0 , auditProfitAmount : 0 }
      vdata.PLATFORM_INACCOUNT = res.PLATFORM_INACCOUNT || { balanceAmount : 0 , auditProfitAmount : 0 }
      loading.value = false
  }).catch(() => {loading.value = false})

}


function historyFunc(recordId, opAccountType){

  let queryObject = { infoType: 'PLATFORM', infoId: recordId, opAccountType : opAccountType }  
  historyPanelDrawerRef.value.show(queryObject, false)

}


</script>
<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
  .box-item {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .title {
    margin-bottom: 10px;
    color:#737980;
    font-size: 14px;
    display: flex;
    text-align: center;
    i {
      margin-left: 10px;
    }
  }
  .amount {
    font-weight: bold;
    font-size: 25px;
    text-align: left;
    color: #1965ff;
    display: flex;
    align-items:baseline;
  }
}
.right {
  font-size: 13px;
  margin-left: 10px;
}
</style>