<template>
    <view class="top">
        <view v-for="(item,index) in orderStautsList" :key="index" class="top_item" :class="{
            'active_text':status === item.id
        }" @tap="clickTab(item)">
            {{ item.name }}
            
        </view>
    </view>

    <view v-if="totalCount" class="payCard">
        <view v-for="(item,index) in payList" :key="index" class="cardItem">
            <view class="title">
                <view>{{ item.orderId }}</view>
                <view>{{ item.createdAt }}</view>
            </view>
            <view class="payInfo">
                <view>{{ `￥${(item.payFee / 100).toFixed(2)}元` }}</view>
                <view>{{ item.status === '1' ? '待支付' : item.status === '2' ? '已支付' : item.status === '3' ? '支付成功' : item.status === '4' ? '退款' : item.status === '5' ? '失败': '未知' }}</view> 
            </view>
        </view>
    </view>
    <JxEmpty v-else title="没有查到充值记录"></JxEmpty>
</template>

<script lang="ts" setup>
import order from '@/api/https/order';
import JxEmpty from '@/components/jx-empty/jx-empty.vue';
import { store } from '@/store';
import { timeFormatD } from '@/utils/tools';
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';

// const active = ref(0)

const orderStautsList = ref([
    {
        id:0,
        name:'全部'
    },
    {
        id:1,
        name:'待支付'
    },
    {
        id:2,
        name:'已支付'
    },
    {
        id:3,
        name:'支付成功'
    },
    // {
    //     id:4,
    //     name:'退款'
    // },
    // {
    //     id:5,
    //     name:'失败'
    // }
])

let payList = ref<AnyObject[]>([])
let totalCount = ref<number>(0)
let status = ref<number>(0) // 订单状态

onLoad(async () => {
    // await initPayList()
})

const isLogin = computed(() => {
  return store.getters['serveInfo/isLogin']
})

function clickTab(item:AnyObject){
    status.value = item.id
    initPayList()
}

async function initPayList(){
    // let endTime = timeFormatD(+(new Date()))
    if(!isLogin.value) return
    let obj:AnyObject = {
        startTime:timeFormatD(+new Date() - 7 * 24 * 60 * 60 * 1000) + ' 00:00:00',
        endTime: timeFormatD(+new Date()) + ' 23:59:59',
        // status:3,
        number:1,
        size:30
    }
    if(status.value) obj.status = status.value

    let res = await order.queryPayRecord(obj)
    if(res.code == 0){
        payList.value = res.data.list || []
        totalCount.value = res.data.count
        console.log('获取我的充值记录信息',res)
    }
}
</script>

<style lang="scss" scoped>
.top{
    display: flex;
    width: 750rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid rgb(189,  187, 187);
    background-color: #fff;
    justify-content:space-between ;

    .top_item{
        // width: ;
        padding: 10rpx 20rpx;
        font-size: 36rpx;
        // border-bottom:4rpx solid rgb(189, 187, 187);

    }

    .active_text{
        background-color: #efefef;
        // text-decoration: underline;
        border-bottom:4rpx solid #949494;

    }
}

.payCard{
    margin-top: 20rpx;

    .cardItem{
        // border:1rpx solid red;
        background-color: #fff;
        padding: 10rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        box-sizing: border-box;
        margin:0 auto;
        width: 90%;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }

    .title,.payInfo{
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-bottom: 20rpx;
        padding-top: 20rpx;
    }

    .title{
        border-bottom: 1rpx solid #eee;
        // padding-bottom: 20rpx;
        // padding-top: 20rpx;
    }
}

</style>