<template>
    <NavBar title="历史记录" />

    <!-- <wd-img  /> -->
    <view class="content">
        <wd-card  
            type="rectangle"
            v-if="yaoList.length"
            v-for="(item, index) in yaoList"
            :key="index"
        >
            <template #title>
                <wd-text 
                    :text="`${item.symbol1}变${item.symbol2}`"
                    color="#333" 
                    size="32rpx" 
                    bold 
                />
                <wd-text 
                    v-if="item.q" 
                    :text="`占${item.q}详解`"
                    color="#333" 
                    size="32rpx" 
                    bold 
                />
                <!-- <wd-text 
                    v-if="item.symbolNum" 
                    :text="item.symbolNum"
                    color="#333" 
                    size="32rpx" 
                    bold 
                /> -->
            </template>
            <template #default>
                <wd-text :text="item.result" />
            </template>
            <template #footer>
                <view class="footer">
                    <wd-text :text="formatDate(new Date(item.time))" />
                    <wd-button size="small" type="error" plain @click="delHistory(index)">删除</wd-button>
                </view>
            </template>
        </wd-card>
        <view v-else class="page">
            <wd-status-tip image="https://asstes.snhaenigseal.cn/images/wot/content.png" tip="暂无内容" />
        </view>
    </view>
    
    <wd-message-box />
    <wd-toast />
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import { useUserStore } from '@/stores'
import { formatDate } from '@/utils/common'
import { storeToRefs } from 'pinia';
import { useMessage, useToast } from 'wot-design-uni';

const {
    yaoList
} = storeToRefs(useUserStore())

const message = useMessage()
const toast = useToast()

const delHistory = (index: number) => {
    message
        .confirm({
            title: '提示',
            msg: '确定要删除此条记录吗'
        })
        .then(() => {
            yaoList.value.splice(index, 1)
            toast.success('删除成功')
        })
}

</script>

<style lang="scss" scoped>
.content {
    height: auto;
}

.page {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 720rpx;
    background-color: #fff;
}

.footer {
    display: flex;
    gap: 32rpx;
    justify-content: space-between;
    align-items: center;
}
</style>