<template>
    <app-view class="home-main">
        <div class="home-main__card">
            <el-card @click="routerTo('trade_sell')">
                <h2>{{ countData.transactionsonsale }}</h2>
                <p>出售中的交易</p>
            </el-card>
            <el-card @click="routerTo('trade_buy')">
                <h2>{{ countData.transactioninpurchase }}</h2>
                <p>求购中的交易</p>
            </el-card>
            <el-card @click="routerTo('trade_delisting', { buyorsell: BuyOrSell.Buy })">
                <h2>{{ countData.purchasedtransactions }}</h2>
                <p>已购买的交易</p>
            </el-card>
            <el-card @click="routerTo('trade_delisting', { buyorsell: BuyOrSell.Sell })">
                <h2>{{ countData.transactionssold }}</h2>
                <p>已卖出的交易</p>
            </el-card>
            <el-card @click="routerTo('trade_bargain')">
                <h2>{{ countData.unhandledmessage }}</h2>
                <p>未处理消息</p>
            </el-card>
        </div>
        <div class="home-main__card" style="margin-top:20px">
            <el-card shadow="never">
                <template #header>
                    <span>最近成交</span>
                </template>
                <el-tabs v-model="orderTab" @tab-change="orderTabChange">
                    <el-tab-pane label="购买" name="buy" />
                    <el-tab-pane label="销售" name="sell" />
                </el-tabs>
                <ul>
                    <li v-for="(item,index) in deListingList" :key="index">
                        <span>{{ item.zscategorydisplay }}</span>
                        <span>{{ item.goodsno }}</span>
                        <span>{{ item.matchusername }}</span>
                        <span>{{ item.tradetime}}</span>
                    </li>
                </ul>
            </el-card>
            <el-card shadow="never">
                <template #header>
                    <span>我的收藏</span>
                </template>
                <ul>
                    <li v-for="(item,index) in favoriteList" :key="index">
                        <span>{{ item.zscategorydisplay }}</span>
                        <span>{{ item.goodsno }}</span>
                        <span>{{ item.accountname }}</span>
                    </li>
                </ul>
            </el-card>
            <el-card shadow="never">
                <template #header>
                    <span>系统公告</span>
                </template>
                <el-tabs v-model="noticeTab">
                    <el-tab-pane label="公告" name="notice" />
                    <el-tab-pane label="消息" name="message" />
                </el-tabs>
                <ul>
                    <li v-for="(item,index) in notices" :key="index">
                        <span>{{ formatDate(item.createtime) }}</span>
                        <span>{{ item.title }}</span>
                    </li>
                </ul>
            </el-card>
        </div>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, computed } from 'vue'
import { useRouter, RouteParamsRaw } from 'vue-router'
import { useHomeData } from '@/business/home'
import { BuyOrSell } from '@/constants/order'
import { formatDate } from '@/filters'

const { countData, deListingList, favoriteList, noticeList, getCountData, getDeListingList, getNoticeList, } = useHomeData()
const router = useRouter()
const orderTab = shallowRef('buy')
const noticeTab = shallowRef('notice')

const notices = computed(() => {
    switch (noticeTab.value) {
        case 'notice': {
            return noticeList.value.filter((e) => e.msgtype === 1).slice(0, 5)
        }
        case 'message': {
            return noticeList.value.filter((e) => e.msgtype === 2).slice(0, 5)
        }
        default: {
            return []
        }
    }
})

const orderTabChange = (tab: string) => {
    switch (tab) {
        case 'buy': {
            getDeListingList(BuyOrSell.Buy)
            break;
        }
        case 'sell': {
            getDeListingList(BuyOrSell.Sell)
            break;
        }
    }
}

// 路由跳转
const routerTo = (name: string, params?: RouteParamsRaw) => {
    router.push({ name, params })
}

getCountData()
getNoticeList()
orderTabChange(orderTab.value)
</script>

<style lang="less" scoped>
@import './index.less';
</style>