<template>
    <div class="watching">
        <img src="@/assets/png-zhuiju-bg.png" class="top-bg !absolute w-full h-[200px] top-0 left-0 !z-0" alt="" />
        <div class="watching-content">
            <van-sticky @change="changeSticky">
                <van-nav-bar
                    :class="{ isFixed: isFixed }"
                    :title="$t('mine.wallet')"
                    left-text=""
                    left-arrow
                    @click-left="back"
                />
            </van-sticky>

            <div class="py-[14px] px-[18px]">
                <van-empty description="暂无记录" v-if="list.length == 0 && !loading" />
                <template v-else>
                    <div
                        v-for="(item, index) in list"
                        :key="index"
                        class="wallet bg-[#20223C] flex h-[68px] items-center px-[14px] rounded-lg"
                    >
                        <img class="w-[36px] h-[36px]" :src="getIcon(item.type)" alt="" />
                        <div class="flex-1 ml-[12px]">
                            <div class="text-sm text-white">{{ item.description }}</div>
                            <div class="text-xs text-[#797A8A]">{{ formateDay(item.createdAt) }}</div>
                        </div>
                        <div class="text-[18px] text-white AlimamaShuHeiTi">{{ getAmount(item.amount) }}</div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { http } from '@/plugins/http'
import { format } from 'date-fns'
import tixianImg from '@/assets/icon-tixian.png'
import qiandaoImg from '@/assets/icon-qiandao.png'
import yaoqingImg from '@/assets/icon-yaoqing.png'

const router = useRouter()
function back() {
    router.back()
}

const isFixed = ref(false)
function changeSticky(fixed) {
    isFixed.value = fixed
}

const list = ref([])
const loading = ref(true)
http.get('/api/balanceRecords').then(res => {
    list.value = res.data
    loading.value = false
})

function formateDay(day) {
    console.log(new Date(day))
    return format(new Date(day), 'MM-dd hh:mm', new Date())
}

function getAmount(amount) {
    let _amount = Number(amount)
    return (_amount > 0 ? '+' : '') + _amount
}

function getIcon(type) {
    let img = tixianImg
    switch (type) {
        case 'reward':
            img = qiandaoImg
            break
        case 'recharge':
            img = tixianImg
            break
        case 'purchase':
            img = yaoqingImg
            break
    }
    return img
}
</script>

<style lang="less" scoped>
.watching {
    .watching-content {
        position: relative;
        z-index: 1;
    }
}

.van-nav-bar {
    --van-nav-bar-background: transparent;
    --van-border-width: 0;
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-icon-color: #fff;

    &.isFixed {
        --van-nav-bar-background: #11131e;
    }
}

.wallet + .wallet {
    margin-top: 14px;
}
</style>
