<template>
    <div class="admin_page globalAwardPopularity" ref="adminPage">
        <div class="admin_table_search">
			<div class="admin_state">
				<div class="admin_state_item">
					<span>Current Time:</span>
					<span>{{ currentTimeStr }}</span>
				</div>
				<div class="admin_state_item">
					<span>Raw Visi Count:</span>
					<span>{{ rawVisitCount }}</span>
				</div>
				<div class="admin_state_item">
					<span>Unique Visit Count:</span>
					<span>{{ uniqueVisitCount }}</span>
				</div>
				
			</div>
			<div class="admin_search">
				<div class="admin_search_item" @click="getGlobalAwardPopularity">
					<i class="fi fi-br-refresh"></i>
				</div>
			</div>
		</div>
        <!-- <div class="admin_table_content" ref="questionnaireTable">
			
        </div> -->
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode,toRefs, computed,reactive, onMounted, nextTick } from "vue";
import { Https } from "@/tool/https";
import type { TableColumnsType } from 'ant-design-vue';

export default defineComponent({
    components: {},
    setup() {
		const currentTime = ref(new Date())
		const currentTimeStr = computed(()=>{
			return currentTime.value.toLocaleString()
		})
		const rawVisitCount = ref(0)
		const uniqueVisitCount = ref(0)
		const getGlobalAwardPopularity = () => {
			Https.axiosGet(Https.httpUrls.getGlobalAwardPopularity,).then((rv)=>{
				currentTime.value = new Date()
				rawVisitCount.value = rv.rawVisitCount
				uniqueVisitCount.value = rv.uniqueVisitCount
			})
        }
		onMounted(()=>{
			getGlobalAwardPopularity()
		})
        return {
			currentTimeStr,
			getGlobalAwardPopularity,
			rawVisitCount,
			uniqueVisitCount,
		};
    },
    data() {
        return {
		};
    },
    mounted() {
		
	},
    methods: {},
});
</script>
<style lang="less" scoped>
.admin_page.globalAwardPopularity{
	.admin_table_search{
		// flex: 1;
		width: min-content;
		justify-content: flex-start;
		border-radius: 2rem;
		box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
		margin-left: 2rem;
		flex-wrap: nowrap;
		gap: 3rem;
	}
	.admin_state{
		flex-direction: column;
		width: auto;
		cursor: auto;
		.admin_state_item{
			> span{
				font-size: 2rem;
			}
		}
	}
	.admin_search{
		i{
			display: flex;
		}
	}
}
</style>
