<template>
	<el-row class="mt-8px" :gutter="8" justify="space-between">
		<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="mb-8px">
			<el-card shadow="never">
				<template #header>
					<div class="h-3 flex justify-between cursor-pointer" @click="refreshToDo">
						<span>待办</span>
						<!-- <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link> -->
					</div>
				</template>
				<el-skeleton :loading="loading" animated>
					<ToBeDone ref="toBeDoneRef" />
				</el-skeleton>
			</el-card>
		</el-col>

		<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="mb-8px">
			<el-card shadow="never">
				<template #header>
					<div class="h-3 flex justify-between">
						<span>今日订单【统计】</span>
					</div>
				</template>
				<el-skeleton :loading="loading" animated>
					<el-row>
						<el-col>
							<el-card shadow="hover" class="mb-8px border-none">
								<el-skeleton :loading="loading" animated>
									<Echart :options="todayOrderOptionsData" :height="210" />
								</el-skeleton>
							</el-card>
						</el-col>
					</el-row>
				</el-skeleton>
			</el-card>
		</el-col>
	</el-row>
	<el-row :gutter="8" justify="space-between">
		<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
			<el-card shadow="never">
				<template #header>
					<div class="h-3 flex justify-between">
						<span>快捷方式</span>
					</div>
				</template>
				<el-skeleton :loading="loading" animated>
					<div class="flex flex-row flex-wrap gap-8 p-4" style="min-height: 300px;">
						<div class="h-20 w-20% flex flex-col cursor-pointer items-center justify-center gap-2"
							@click="openSpuForm('create', '', 0)">
							<div class="bg-orange-400 h-48px w-48px flex items-center justify-center rounded text-white">
								<Icon icon="fluent-mdl2:product" class="text-7.5!" />
							</div>
							<span>新增商品</span>
						</div>
					</div>
				</el-skeleton>
			</el-card>
		</el-col>
		<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
			<el-card shadow="never">
				<template #header>
					<div class="h-3 flex justify-between">
						<span>用户访问来源</span>
					</div>
				</template>
				<el-skeleton :loading="loading" animated>
					<el-row>
						<el-col>
							<el-card shadow="hover" class="mb-8px border-none">
								<el-skeleton :loading="loading" animated>
									<Echart :options="pieOptionsData" :height="280" />
								</el-skeleton>
							</el-card>
						</el-col>
					</el-row>
				</el-skeleton>
			</el-card>
		</el-col>
		<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
			<el-card shadow="never">
				<template #header>
					<div class="h-3 flex justify-between">
						<span>每周用户活跃量</span>
					</div>
				</template>
				<el-skeleton :loading="loading" animated>
					<el-row>
						<el-col>
							<el-card shadow="hover" class="mb-8px border-none">
								<el-skeleton :loading="loading" animated>
									<Echart :options="barOptionsData" :height="280" />
								</el-skeleton>
							</el-card>
						</el-col>
					</el-row>
				</el-skeleton>
			</el-card>
		</el-col>
	</el-row>
	<!-- 商品列表表单弹窗：添加/修改 -->
	<SpuIndex ref="spuFormRef" />
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { formatTime } from '@/utils'
import { debounce } from 'lodash-es'
import { useUserStore } from '@/store/modules/user'
import { useWatermark } from '@/hooks/web/useWatermark'
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
import { pieOptions, barOptions, pieOptions2 } from './echarts-data'
import ToBeDone from './components/ToBeDone.vue'
import SpuIndex from "../mall/product/spu/form/index.vue"
defineOptions({ name: 'Home' })
const spuFormRef = ref()
const openSpuForm = (type: string, row: any, newStatus: number, tabType: number) => {
	spuFormRef.value.open(type, row, newStatus, tabType)
}
const toBeDoneRef = ref(null)
// 防抖 防止快速刷新
const refreshToDo = debounce(() => {
	toBeDoneRef.value.getList()
}, 1000)
const { t } = useI18n()
const userStore = useUserStore()
const { setWatermark } = useWatermark()
const loading = ref(true)
const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
	project: 0,
	access: 0,
	todo: 0
})

const getCount = async () => {
	const data = {
		project: 40,
		access: 2340,
		todo: 10
	}
	totalSate = Object.assign(totalSate, data)
}

// 获取项目数
let projects = reactive<Project[]>([])
const getProject = async () => {
	const data = [
		{
			name: 'Github',
			icon: 'akar-icons:github-fill',
			message: 'workplace.introduction',
			personal: 'Archer',
			time: new Date()
		},
		{
			name: 'Vue',
			icon: 'logos:vue',
			message: 'workplace.introduction',
			personal: 'Archer',
			time: new Date()
		},
		{
			name: 'Angular',
			icon: 'logos:angular-icon',
			message: 'workplace.introduction',
			personal: 'Archer',
			time: new Date()
		},
		{
			name: 'React',
			icon: 'logos:react',
			message: 'workplace.introduction',
			personal: 'Archer',
			time: new Date()
		},
		{
			name: 'Webpack',
			icon: 'logos:webpack',
			message: 'workplace.introduction',
			personal: 'Archer',
			time: new Date()
		},
		{
			name: 'Vite',
			icon: 'vscode-icons:file-type-vite',
			message: 'workplace.introduction',
			personal: 'Archer',
			time: new Date()
		}
	]
	projects = Object.assign(projects, data)
}

// 获取通知公告
let notice = reactive<Notice[]>([])
const getNotice = async () => {
	const data = [
		{
			title: '系统升级版本',
			type: '通知',
			keys: ['通知', '升级'],
			date: new Date()
		},
		{
			title: '系统凌晨维护',
			type: '公告',
			keys: ['公告', '维护'],
			date: new Date()
		},
		{
			title: '系统升级版本',
			type: '通知',
			keys: ['通知', '升级'],
			date: new Date()
		},
		{
			title: '系统凌晨维护',
			type: '公告',
			keys: ['公告', '维护'],
			date: new Date()
		}
	]
	notice = Object.assign(notice, data)
}

// 获取快捷入口
let shortcut = reactive<Shortcut[]>([])
const getShortcut = async () => {
	const data = [
		{
			name: 'Github',
			icon: 'akar-icons:github-fill',
			url: 'github.io'
		},
		{
			name: 'Vue',
			icon: 'logos:vue',
			url: 'vuejs.org'
		},
		{
			name: 'Vite',
			icon: 'vscode-icons:file-type-vite',
			url: 'https://vitejs.dev/'
		},
		{
			name: 'Angular',
			icon: 'logos:angular-icon',
			url: 'github.io'
		},
		{
			name: 'React',
			icon: 'logos:react',
			url: 'github.io'
		},
		{
			name: 'Webpack',
			icon: 'logos:webpack',
			url: 'github.io'
		}
	]
	shortcut = Object.assign(shortcut, data)
}

// 用户来源
const getUserAccessSource = async () => {
	const data = [
		{ value: 335, name: 'analysis.directAccess' },
		{ value: 310, name: 'analysis.mailMarketing' },
		{ value: 234, name: 'analysis.allianceAdvertising' },
		{ value: 135, name: 'analysis.videoAdvertising' },
		{ value: 1548, name: 'analysis.searchEngines' }
	]
	set(
		pieOptionsData,
		'legend.data',
		data.map((v) => t(v.name))
	)
	pieOptionsData!.series![0].data = data.map((v) => {
		return {
			name: t(v.name),
			value: v.value
		}
	})
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
// 周活跃量
const getWeeklyUserActivity = async () => {
	const data = [
		{ value: 13253, name: 'analysis.monday' },
		{ value: 34235, name: 'analysis.tuesday' },
		{ value: 26321, name: 'analysis.wednesday' },
		{ value: 12340, name: 'analysis.thursday' },
		{ value: 24643, name: 'analysis.friday' },
		{ value: 1322, name: 'analysis.saturday' },
		{ value: 1324, name: 'analysis.sunday' }
	]
	set(
		barOptionsData,
		'xAxis.data',
		data.map((v) => t(v.name))
	)
	set(barOptionsData, 'series', [
		{
			name: t('analysis.activeQuantity'),
			data: data.map((v) => v.value),
			type: 'bar'
		}
	])
}

const todayOrderOptionsData = reactive<EChartsOption>(pieOptions2) as EChartsOption
// 今日订单
const getTodayOrder = async () => {
	const data = [
		{ value: 335, name: '待支付' },
		{ value: 310, name: '已下单' },
		{ value: 234, name: '取消支付' },

	]
	set(
		todayOrderOptionsData,
		'legend.data',
		data.map((v) => t(v.name))
	)
	todayOrderOptionsData!.series![0].data = data.map((v) => {
		return {
			name: t(v.name),
			value: v.value
		}
	})
}

const getAllApi = async () => {
	await Promise.all([
		getCount(),
		getProject(),
		getNotice(),
		getShortcut(),
		getUserAccessSource(),
		getWeeklyUserActivity(),
		getTodayOrder()
	])
	loading.value = false
}

getAllApi()
</script>
<style scoped lang='scss'>
.kjfs {
	cursor: pointer;
	width: 65px;
	height: 65px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	border: 1px solid #e4e7ed;
	padding: 10px;
	font-size: 14px;
}

.border-none {
	border: none;
}
</style>