<template>
  <ay-container>
    <!-- <uni-title type="h2" :title="userTitle"></uni-title> -->
    <span class="font-bold">{{ userTitle }}</span>
    <div class="section s-fz">所属物流 · 可用余额</div>
    <div class="chunk relative s-fz">
      <div class="yebz absolute" v-if="data.accountInfo.flag === 0">[余额不足]</div>
      <div class="flex items-baseline mb-spacd2">
        <ay-numer
          :value="data.accountInfo.showBalance"
          :nullView="!store.user.isLogined"
          :unit="data.accountInfo.unit"
        />
        <span v-if="data.accountInfo.showDet">
          （直销 {{ data.accountInfo.carrierDirectBalance }} | 经销
          {{ data.accountInfo.carrierBalance }}）
        </span>
      </div>
      <div class="mb-spacd4">所属物流：{{ func.convert.nullView(data.accountInfo.orgName) }}</div>
      <div>车牌号：{{ func.convert.nullView(data.accountInfo.carNumber) }}</div>
    </div>
  </ay-container>
</template>

<script lang="ts" setup>
const methods = {}
const userTitle = computed(() => {
  const ui = store.user.userInfo
  return `${ui.user_name}[${ui.mobileDes}]`
})
const data = ay.initData({
  accountInfo: {} as IAccountInfo,
})

ay.entrance((args) => {
  webapi.strategy.get_driver_balance().then((res) => {
    data.accountInfo = {
      ...res,
      ...aop.request.AR.getAccountInfo(res),
    }
  })
})
</script>
<style lang="scss" scoped>
.yebz {
  top: $p-spac;
  right: $p-spac;
  color: $yellow-color;
}
</style>
