<template>
    <div class="home-main">
        <div class="home-main__card count">
            <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('order_buy', { buyorsell: BuyOrSell.Buy })">
                <h2>{{ countData.purchasedtransactions }}</h2>
                <p>已购买的交易</p>
            </el-card>
            <el-card @click="routerTo('order_sell', { buyorsell: BuyOrSell.Sell })">
                <h2>{{ countData.transactionssold }}</h2>
                <p>已卖出的交易</p>
            </el-card>
            <el-card @click="routerTo('bargain_buy')">
                <h2>{{ countData.unhandledmessage }}</h2>
                <p>未处理消息</p>
            </el-card>
        </div>
        <div class="home-main__card" style="margin-top:20px">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <div class="card-header__title">
                            <h4>最近成交</h4>
                        </div>
                        <div class="card-header__more">
                            <el-radio-group v-model="orderTab" size="small" @change="orderTabChange">
                                <el-radio-button label="buy">购买</el-radio-button>
                                <el-radio-button label="sell">销售</el-radio-button>
                            </el-radio-group>
                            <app-icon icon="ArrowRightBold" v-if="false" />
                        </div>
                    </div>
                </template>
                <ul class="card-list">
                    <li class="card-list__item" v-for="(item, index) in deListingList" :key="index">
                        <div class="block-left">
                            <span>{{ item.zscategorydisplay }}：{{ item.goodsno }}，{{ item.matchusername }}</span>
                        </div>
                        <div class="block-right">
                            <span>{{ formatDate(item.tradetime, 'MM/DD/YYYY') }}</span>
                        </div>
                    </li>
                </ul>
            </el-card>
            <el-card shadow="never">
                <template #header>
                    <span>我的收藏</span>
                </template>
                <ul class="card-list">
                    <li class="card-list__item" v-for="(item, index) in favoriteList" :key="index">
                        <div class="block-left">
                            <span>{{ item.zscategorydisplay }}：{{ item.goodsno }}，{{ item.accountname }}</span>
                        </div>
                    </li>
                </ul>
            </el-card>
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <div class="card-header__title">
                            <h4>系统公告</h4>
                        </div>
                        <div class="card-header__more">
                            <el-radio-group v-model="noticeTab" size="small">
                                <el-radio-button label="notice">公告</el-radio-button>
                                <el-radio-button label="message">消息</el-radio-button>
                            </el-radio-group>
                            <app-icon icon="ArrowRightBold" v-if="false" />
                        </div>
                    </div>
                </template>
                <ul class="card-list">
                    <li class="card-list__item" v-for="(item, index) in notices" :key="index">
                        <div class="block-left">
                            <span>{{ item.title }}</span>
                        </div>
                        <div class="block-right">
                            <span>{{ formatDate(item.createtime) }}</span>
                        </div>
                    </li>
                </ul>
            </el-card>
        </div>
    </div>
</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'
import AppIcon from '@pc/components/base/icon/index.vue'

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">
@import './index.less';
</style>