<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <!-- 财务对账 -->
  <div class="Mall4j shop-walletLog">
    <div class="head">
      <div class="head-item">
        <div class="text">
          <span style="margin-right:10px">{{ $t('shop.availableStoreBalance') }}</span>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('shop.incAvaStoBal')"
            placement="right"
          >
            <el-icon class="question-icon">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
        <div class="balance">
          <span style="margin-right:50px">{{ handlerPrice(shopWalletInfo.settledAmount) }}</span>
          <el-button
            v-permission="['shop:shopWithdrawCash:save']"
            type="primary"
            @click="caswithdrawalBtn"
          >
            {{ $t('shop.withdraw') }}
          </el-button>
        </div>
      </div>
      <div
        class="head-item"
        style="margin-left:20px"
      >
        <div class="text">
          <span style="margin-right:10px">{{ $t('shop.pendingSettlement') }}</span>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('shop.pendingSettlementTip')"
            placement="right"
          >
            <el-icon class="question-icon">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
        <div class="balance">
          <span style="margin-right:30px">{{ handlerPrice(shopWalletInfo.unsettledAmount) }}</span>
        </div>
      </div>
      <div class="head-item">
        <div class="text">
          <span style="margin-right:10px">{{ $t('shop.unusableBalanceYuan') }}</span>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('shop.unusableBalanceYuanTip')"
            placement="right"
          >
            <el-icon class="question-icon">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
        <div class="balance">
          <span style="margin-right:30px">{{ handlerPrice(shopWalletInfo.freezeAmount) }}</span>
        </div>
      </div>
      <div class="head-item">
        <div class="text">
          <span style="margin-right:10px">{{ $t('shop.totalSettlementAmount') }}</span>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('shop.totalSettlementAmountTip')"
            placement="left"
          >
            <el-icon class="question-icon">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
        <div class="balance">
          <span style="margin-right:30px">{{ handlerPrice(shopWalletInfo.totalSettledAmount) }}</span>
        </div>
      </div>
    </div>
    <div class="table">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick(activeName)"
      >
        <el-tab-pane
          :label="$t('multishop.shopWalletLog.transactions')"
          name="trading"
        >
          <trading ref="tradingRef" />
        </el-tab-pane>
        <el-tab-pane
          :label="$t('multishop.shopWalletLog.withdrawalRecord')"
          name="withdrawal"
        >
          <withdrawal ref="withdrawalRef" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <cash-withdrawal
      v-if="isCaswithdrawal"
      ref="caswithdrawalRef"
      @get-shop-wallet="getShopWallet"
    />
  </div>
</template>

<script setup>
import { useIncludeRouterName } from '@/stores/modules/include-router-name.js'
import { shopWallet } from '@/api/multishop/shop_wallet_log'
import trading from './components/trading.vue'
import withdrawal from './components/withdrawal.vue'
import cashWithdrawal from './components/cash-withdrawal.vue'

import Big from 'big.js'

const activeName = ref('trading')
const isCaswithdrawal = ref(false)

const shopWalletInfo = ref('')

onMounted(() => {
  shopWallet().then(data => {
    shopWalletInfo.value = data
  })
})

const handleClick = () => {
}
// 点击提现申请
const caswithdrawalRef = ref('')
const caswithdrawalBtn = () => {
  isCaswithdrawal.value = true
  nextTick(() => {
    caswithdrawalRef.value.init(shopWalletInfo.value?.settledAmount)
  })
}
// 获取店铺余额信息
const withdrawalRef = ref('')
const tradingRef = ref('')
const getShopWallet = () => {
  shopWallet().then(data => {
    shopWalletInfo.value = data
  })
  tradingRef.value.getData()
  withdrawalRef.value.getData()
}
/**
 * 精度运算-过滤
 */
const handlerPrice = (val) => {
  if (val == null) {
    return ''
  }
  // (val / 100).toFixed(2)
  return new Big(val).div(100).toFixed(2)
}

const includeRouterName = useIncludeRouterName()
// 列表页跳往详情页，页面会缓存
onBeforeRouteLeave((to, from, next) => {
  if (to.path === '/finance/billing-details') {
    includeRouterName.addData(['SupplierWalletLog'])
  } else {
    includeRouterName.addData([])
  }
  next()
})
</script>

<script>
export default {
  name: 'SupplierWalletLog'
}
</script>

<style lang="scss" scoped>
@use "index.scss";
</style>
