<script setup lang="ts">
/**
 * 文件职责：到账查询结算账户信息条展示。
 */
import type { FinanceSettlementAccountDto } from '#/api/finance';

import { computed } from 'vue';

import { IconifyIcon } from '@vben/icons';

interface Props {
  account: FinanceSettlementAccountDto | null;
  loading: boolean;
}

const props = defineProps<Props>();

const accountText = computed(() => {
  const bankName = props.account?.bankName?.trim();
  const accountNoMasked = props.account?.bankAccountNoMasked?.trim();

  if (!bankName && !accountNoMasked) {
    return '--';
  }

  return `${bankName || ''} ${accountNoMasked || ''}`.trim();
});
</script>

<template>
  <div class="fst-account-bar" :class="{ 'is-loading': props.loading }">
    <IconifyIcon icon="lucide:landmark" class="fst-account-icon" />

    <span>
      结算账户：<strong>{{ accountText }}</strong>
    </span>

    <span class="fst-account-sep"></span>

    <span>
      微信商户号：<strong>{{
        props.account?.wechatMerchantNoMasked || '--'
      }}</strong>
    </span>

    <span class="fst-account-sep"></span>

    <span>
      支付宝PID：<strong>{{ props.account?.alipayPidMasked || '--' }}</strong>
    </span>

    <span class="fst-account-sep"></span>

    <span>
      结算周期：<strong>{{
        props.account?.settlementPeriodText || '--'
      }}</strong>
    </span>
  </div>
</template>
