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

  https://www.mall4j.com/

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

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-shop-settlement container">
    <view class="summary">
      <view class="big-number text-white">
        {{ dataSummary.settledAmount }}
      </view>
      <view
        class="text-plain"
        style="margin-top:12rpx"
      >
        {{ $t('keYongDianPuYueYuan') }}
      </view>
      <view class="summary-branch-top">
        <view class="text-plain item">
          {{ $t('zongJieSuanYuan') }}{{ dataSummary.totalSettledAmount }}
        </view>
        <view class="text-plain item">
          {{ $t('jiaoYiBiShu') }}{{ dataSummary.transactionCount }}
        </view>
      </view>
      <view class="summary-branch-bottom">
        <view class="table-title">
          <view>{{ $t('zuoRiJieSuanYuan') }}</view>
          <view>{{ $t('daiJieSuanYuan') }}</view>
          <view>{{ $t('yiDongJieYuan') }}</view>
        </view>
        <view class="table-item">
          <view>{{ dataSummary.yesterdaySettledAmount!=0?'+':'' }}{{ dataSummary.yesterdaySettledAmount }}</view>
          <view>{{ dataSummary.unsettledAmount }}</view>
          <view>{{ dataSummary.freezeAmount }}</view>
        </view>
      </view>
    </view>
    <view class="deal-detail">
      <view class="title">
        <span>{{ $t('jiaoYiMingXi') }}</span>
        <view
          class="icon"
          @tap="handleRouteDetail(0)"
        />
      </view>
      <view class="content">
        <view v-if="dealRecords.length!==0">
          <view
            v-for="(item,index) in dealRecords"
            :key="index"
          >
            <view class="item">
              <span> {{ option.amountType[item.amountType] }}</span> <view
                :title="1"
                :class="{'income-out':!item.ioType,'income-in':item.ioType}"
              >
                {{ item.ioType?'+':'-' }}{{ item.changeAomunt }}
              </view>
            </view>
            <view class="item-bottom">
              <view class="date">
                {{ $t('jiaoYiShiJian') }}{{ item.createTime }}
              </view>
              <view
                class="order"
                style="margin-top:8rpx;"
              >
                {{ $t('dingDanHao') }}{{ item.orderNumber || "-" }}
              </view>
            </view>
            <hr v-if="index!==dealRecords.length-1">
          </view>
        </view>
        <empty-tips
          v-if="isLoaded && !dealRecords.length"
          class="noData"
          :tips-list="[$t('zanWuShuJu')]"
        />
      </view>
    </view>

    <view class="withdraw-detail">
      <view class="title">
        <span>{{ $t('tiXianMingXi') }}</span>
        <view
          class="icon"
          @tap="handleRouteDetail(1)"
        />
      </view>
      <view class="content">
        <view v-if="withdrawRecords.length!==0">
          <view
            v-for="(item,index) in withdrawRecords"
            :key="item.cashId"
          >
            <view class="item">
              <span> {{ $t('shenQingTiXian') }}</span><view calss="income-in">
                {{ item.amount }}
              </view>
            </view>
            <view class="item-bottom">
              <view class="date">
                {{ item.createTime }}
              </view>
              <view
                v-if="paySettlementType!==1"
                :class="{'status-ing': item.status===1, 'status-success': item.status===2,'status-fail': item.status===0}"
              >
                {{ option.withdrawStatus[item.status] }}
              </view>
              <view
                v-else
                :class="{'status-ing': item.allinpayStatus===0 || item.allinpayStatus===1,'status-success': item.allinpayStatus===2,'status-fail': item.allinpayStatus===3}"
              >
                {{ option.allinpayWithdrawStatus[item.allinpayStatus] }}
              </view>
            </view>
            <hr v-if="index!==withdrawRecords.length-1">
          </view>
        </view>
        <empty-tips
          v-show="isLoaded && !withdrawRecords.length"
          class="noData"
          :tips-list="[$t('zanWuShuJu')]"
        />
      </view>
    </view>
    <view
      v-if="$isAuthorities('shop:withdrawCash:apply')"
      class="footer"
    >
      <button
        class="button"
        style="flex: 1;"
        type="default"
        hover-class="none"
        @tap="withdraw"
      >
        {{ $t('yuetiXian') }}
      </button>
    </view>
  </view>
</template>

<script setup>
const $isAuthorities = util.isAuthorities
const paySettlementType = uni.getStorageSync('bbcPaySettlementType')
const isLoaded = ref(false) // 列表是否加载完毕
const option = {
// 金额类型 0 未结算金额 1可提现金额 2冻结金额 3总结算金额
  amountType: [$t('weiJieSuanJinE'), $t('keYongDianPuYuE'), $t('dongJieJinE'), $t('zongJieSuanJinE')],
  withdrawStatus: [$t('shenHeShiBai'), $t('shenHeZhong'), $t('shenHeChengGong')],
  allinpayWithdrawStatus: [$t('daiZhiFu'), $t('shenQingChengGong'), $t('tiXianChengGong'), $t('tiXianShiBai')]
}
const dataSummary = reactive({
  transactionCount: 0,
  yesterdaySettledAmount: 0,
  settledAmount: 0,
  freezeAmount: 0,
  totalSettledAmount: 0,
  unsettledAmount: 0
})
const dealRecords = ref([]) // 交易明细
const withdrawRecords = ref([]) // 提现明细

onShow(() => {
  setTimeout(() => {
    getDataList()
  })
  uni.setNavigationBarTitle({
    title: $t('dianPuJieSuan')
  })
})

/**
 * 加载数据
 */
const getDataList = () => {
  uni.showLoading({
    title: $t('jiaZaiZhong')
  })
  isLoaded.value = false
  const ProSummary = new Promise((resolve) => {
    const params = {
      url: '/shop/shopWallet/info',
      method: 'GET'
    }
    http.request(params).then(({ data }) => {
      if (!data) return resolve()
      dataSummary.yesterdaySettledAmount = data.yesterdaySettledAmount
      dataSummary.transactionCount = data.transactionCount
      dataSummary.freezeAmount = data.freezeAmount
      dataSummary.totalSettledAmount = data.totalSettledAmount
      dataSummary.unsettledAmount = data.unsettledAmount
      dataSummary.settledAmount = data.settledAmount
      resolve()
    })
  })
  const ProWallet = new Promise((resolve) => {
    const walletParams = {
      url: '/shop/shopWalletLog/page',
      method: 'GET',
      data: {
        size: 5
      }
    }
    http.request(walletParams).then(({ data }) => {
      dealRecords.value = data.records
      resolve()
    })
  })
  const ProWithdraw = new Promise((resolve) => {
    const withdrawParams = {
      url: '/shop/withdrawCash/page',
      method: 'GET',
      data: {
        size: 5
      }
    }
    http.request(withdrawParams).then(({ data }) => {
      data.records.forEach(item => {
        item.status += 1
      })
      withdrawRecords.value = data.records
      resolve()
    })
  })

  Promise.all([ProSummary, ProWallet, ProWithdraw])
    .then(() => {
      uni.hideLoading()
      isLoaded.value = true
    })
}

/**
提现按钮
*/
const withdraw = () => {
  uni.navigateTo({ url: '/pages/withdraw/withdraw' })
}

/**
 * 跳转到相应明细页面
 */
const handleRouteDetail = (type) => {
  uni.navigateTo({
    url: '/pages/shop-settlement-detail/shop-settlement-detail?type=' + type
  })
}

</script>
<style lang="scss" scoped>
@use "./shop-settlement.scss";
</style>
