<template>
	<view class="page">
		<view class="card-panel">
			<uni-card margin="0px" padding="0px">
				<view class="panel">
					<view class="item" @click="redirectProjectPage()">
						<text class="title">总项目数</text>
						<view class="value p-color">
							<text>{{ multi.prjCount.toLocaleString('en-US') }}</text>
						</view>
						<text class="unit">个</text>
					</view>
					<view class="item" @click="redirectCustomerPage()">
						<text class="title">总客户数</text>
						<view class="value c-color">
							<text>{{ multi.customerCount.toLocaleString('en-US') }}</text>
						</view>
						<text class="unit">位</text>
					</view>
					<view class="item" @click="redirectWorkPage()">
						<text class="title">总工作数</text>
						<view class="value w-color">
							<text>{{ multi.workCount.toLocaleString('en-US') }}</text>
						</view>
						<text class="unit">个</text>
					</view>
					<view class="item" @click="redirectContractPage()">
						<text class="title">总合同数</text>
						<view class="value ct-color">
							<text>{{ multi.contractCount.toLocaleString('en-US') }}</text>
						</view>
						<text class="unit">份</text>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="card-plan-task">
			<PlanTask />
		</view>
		<view class="card-plan-task">
			<MyWork />
		</view>
		<view class="card-plan-task">
			<ProjectCount />
		</view>
		<view class="card-plan-task">
			<ProjectCategory />
		</view>
	</view>
</template>


<script setup lang="ts">
import { getProjectMultiStat } from '@/api/dashboard/project';
import PlanTask from '@/pages/echart/plan-task.vue'
import MyWork from '@/pages/echart/my-work.vue'
import ProjectCount from '@/pages/echart/project-count.vue'
import ProjectCategory from '@/pages/echart/project-category.vue'
const { mobile } = uni.getStorageSync('info_status')
const multi = reactive<{
	contractCount: number
	customerCount: number
	prjCount: number
	workCount: number
}>({
	contractCount: 0,
	customerCount: 0,
	prjCount: 0,
	workCount: 0
})

const proxy = getCurrentInstance()?.proxy
const { $onLaunched } = proxy as any

const getStat = async () => {
	await $onLaunched
	if (!mobile) {
		uni.showModal({
			title: '提示',
			content: `暂未需登录`,
			confirmText: '去登录',
			cancelText: '取消',
			success: (res: { confirm: boolean }) => {
				const { confirm } = res;
				if (confirm) {
					return   uni.redirectTo({
                        url: '/pages/authorize/index'
                    })
				}
			}
		})
		return
	}
	console.log(mobile)
	const data = await getProjectMultiStat()
	multi.contractCount = data.contract_count
	multi.customerCount = data.customer_count
	multi.prjCount = data.prj_count
	multi.workCount = data.work_count
}

const redirectWorkPage = async () => {
	uni.switchTab({ url: '/pages/work/index' })
}

const redirectCustomerPage = async () => {
	uni.navigateTo({ url: '/pages/profile/customer/index' })
}

const redirectProjectPage = async () => {
	uni.switchTab({ url: '/pages/project/index' })
}

const redirectContractPage = async () => {
	uni.navigateTo({ url: '/pages/profile/contract/index' })
}

onMounted(() => {
	getStat()
})
</script>
<script lang="ts">
export default {
	options: {
		styleIsolation: 'apply-shared', //解除样式隔离
	}

}
</script>
<style lang="less" scoped>
.page {
	background: linear-gradient(180deg, #7fb4ec, #edf0f9);
	padding: 5px 0 10px;

	.card-panel {
		margin: 10rpx;
		border-radius: 12rpx;

		.panel {
			display: flex;
			justify-content: center;

			.item {
				width: 225rpx;
				padding: 15rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 12rpx;

				.value {
					width: 120rpx;
					height: 120rpx;
					margin: 10rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 5px;

					text {
						color: #fff;
						font-weight: bold;
					}
				}

				.p-color {
					background: #0fc3ff;
				}

				.c-color {
					background: #ffcb1d;
				}

				.w-color {
					background: #3bdcaa;
				}

				.ct-color {
					background: #63c2de;
				}

				image {
					width: 110rpx;
					height: 110rpx;
					margin: 10rpx 0;
				}

				.title {
					font-weight: 500;
					font-size: 13px;
					color: #6e6b6bbf
				}

				.unit {
					font-size: 10px;
					color: #b2a9a6
				}
			}
		}
	}

	.card-plan-task {
		margin: auto;
		margin: 10rpx;
	}

}

:deep(.uni-nav-bar-text) {
	font-size: 16px !important;
	font-weight: bolder;
	font-family: fangsong;
}

:deep(.uni-card .uni-card__content) {
	font-size: inherit !important;
}

:deep(.uni-card__header-content-title) {
	font-size: 13px !important;
	color: #6e6b6bbf !important;
}
</style>