<template>
    <a-spin :loading="loading" style="width: 100%">
        <a-card
            class="general-card"
            :header-style="{ paddingBottom: '0' }"
            :body-style="{ padding: '17px 20px 21px 20px' }"
        >
            <template #title>
                {{ $t('workplace.popularContent') }}
            </template>
            <template #extra>
                <a-link>{{ $t('workplace.viewMore') }}</a-link>
            </template>
            <a-space direction="vertical" :size="10" fill>
                <a-radio-group v-model:model-value="type" type="button" @change="typeChange as any">
                    <a-radio value="text">
                        {{ $t('workplace.popularContent.text') }}
                    </a-radio>
                    <a-radio value="image">
                        {{ $t('workplace.popularContent.image') }}
                    </a-radio>
                    <a-radio value="video">
                        {{ $t('workplace.popularContent.video') }}
                    </a-radio>
                </a-radio-group>
                <a-table :data="renderList" :pagination="false" :bordered="false" :scroll="{ x: '100%', y: '264px' }">
                    <template #columns>
                        <a-table-column title="排名" data-index="key"></a-table-column>
                        <a-table-column title="内容标题" data-index="title">
                            <template #cell="{ record }">
                                <a-typography-paragraph
                                    :ellipsis="{
                                        rows: 1,
                                    }"
                                >
                                    {{ record.title }}
                                </a-typography-paragraph>
                            </template>
                        </a-table-column>
                        <a-table-column title="点击量" data-index="clickNumber"> </a-table-column>
                        <a-table-column
                            title="日涨幅"
                            data-index="increases"
                            :sortable="{
                                sortDirections: ['ascend', 'descend'],
                            }"
                        >
                            <template #cell="{ record }">
                                <div class="increases-cell">
                                    <span>{{ record.increases }}%</span>
                                    <icon-caret-up
                                        v-if="record.increases !== 0"
                                        style="color: #f53f3f; font-size: 8px"
                                    />
                                </div>
                            </template>
                        </a-table-column>
                    </template>
                </a-table>
            </a-space>
        </a-card>
    </a-spin>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    import useLoading from '@/hooks/loading'
    import { queryPopularList } from '@/api/dashboard'
    import type { TableData } from '@arco-design/web-vue/es/table/interface'

    const type = ref('text')
    const { loading, setLoading } = useLoading()
    const renderList = ref<TableData[]>()
    const fetchData = async (contentType: string) => {
        try {
            setLoading(true)
            const { data } = await queryPopularList({ type: contentType })
            renderList.value = data
        } catch (err) {
            // you can report use errorHandler or other
        } finally {
            setLoading(false)
        }
    }
    const typeChange = (contentType: string) => {
        fetchData(contentType)
    }
    fetchData('text')
</script>

<style scoped lang="less">
    .general-card {
        min-height: 395px;
    }
    :deep(.arco-table-tr) {
        height: 44px;
        .arco-typography {
            margin-bottom: 0;
        }
    }
    .increases-cell {
        display: flex;
        align-items: center;
        span {
            margin-right: 4px;
        }
    }
</style>
