<template>
	<el-row :gutter="20">
		<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
			<el-card shadow="never" v-loading="loading" class="statistics-item">
				<div class="statistics-title">
					<img v-lazy="getImageUrl('home/Call.png')" alt="" src="" />
					{{ userInfos.isCenter ? '今日来电' : '今日待办' }}
				</div>
				<div class="statistics-number">
					<div class="statistics-number-item">
						<p class="statistics-number-item-number">
							<b> {{ userInfos.isCenter ? state.data.callNum : state.data.handleNum }} </b>
						</p>
						<p class="statistics-number-item-tips">{{ userInfos.isCenter ? '全部' : '我的' }}</p>
					</div>
					<div class="statistics-number-item">
						<p class="statistics-number-item-number">
							<b>{{ userInfos.isCenter ? state.data.validCallNum : state.data.handleOrgNum }}</b>
						</p>
						<p class="statistics-number-item-tips">{{ userInfos.isCenter ? '有效' : '部门' }}</p>
					</div>
				</div>
			</el-card>
		</el-col>
		<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
			<el-card shadow="never" v-loading="loading" class="statistics-item">
				<div class="statistics-title">
					<img v-lazy="getImageUrl('home/connectionRate.png')" alt="" src="" />
					{{ userInfos.isCenter ? '今日接通率' : '已办' }}
				</div>
				<div class="statistics-number">
					<div class="statistics-number-item">
						<p class="statistics-number-item-number">
							<b>{{ userInfos.isCenter ? state.data.answeredNum : state.data.tasksOkNum }}</b>
						</p>
						<p class="statistics-number-item-tips">{{ userInfos.isCenter ? '接通' : '我的' }}</p>
					</div>
					<div class="statistics-number-item">
						<p class="statistics-number-item-number">

							<b>{{ userInfos.isCenter ? state.data.answeredRate : state.data.tasksOkOrgNum }}</b>
						</p>
						<p class="statistics-number-item-tips">{{ userInfos.isCenter ? '接通率' : '部门' }}</p>
					</div>
				</div>
			</el-card>
		</el-col>
		<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
			<el-card shadow="never" v-loading="loading" class="statistics-item">
				<div class="statistics-title">
					<img v-lazy="getImageUrl('home/workOrder.png')" alt="" src="" />
					{{ userInfos.isCenter ? '今日受理工单' : '部门超期工单' }}
				</div>
				<div class="statistics-number">
					<div class="statistics-number-item">
						<p class="statistics-number-item-number">
							<b>{{ userInfos.isCenter ? state.data.orderNum : state.data.exceedTasksOkNum }}</b>
						</p>
						<p class="statistics-number-item-tips">{{ userInfos.isCenter ? '受理工单量' : '待办超期' }}</p>
					</div>
					<div class="statistics-number-item">
						<p class="statistics-number-item-number">
							<b>{{ userInfos.isCenter ? state.data.directlyNum : state.data.exceedHandleNum }}</b>
						</p>
						<p class="statistics-number-item-tips">{{ userInfos.isCenter ? '今日直办工单量' : '已办超期' }}</p>
					</div>
				</div>
			</el-card>
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { getImageUrl } from '@/utils/tools';
import { reactive, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '@/stores/userInfo';
import { getHomeData } from '@/api/home';
const stores = useUserInfo(); // 用户信息
const { userInfos } = storeToRefs(stores); // 用户信息
const state = reactive({
	data: {
		answeredNum: 0, // 今日来电
		answeredRate: 0, // 今日接通率
		callNum: 0, // 今日来电
		directlyNum: 0, // 今日直办
		orderNum: 0, // 今日受理工单
		validCallNum: 0, // 今日有效来电
		exceedHandleNum: 0, // 超期办理工单
		exceedTasksOkNum: 0, // 超期办结工单
		handleNum: 0, // 已办工单
		handleOrgNum: 0, // 部门已办工单
		tasksOkNum: 0, // 已办结工单
		tasksOkOrgNum: 0, // 部门已办结工单
	},
});
const loading = ref(false);
// 获取首页数据
const getHomeDataFn = async () => {
	loading.value = true;
	try {
		const { result } = await getHomeData();
		state.data = result;
	} catch (error) {
		console.log(error);
	} finally {
		loading.value = false;
	}
};
getHomeDataFn();
</script>
<style scoped lang="scss">
.statistics {
	display: flex;
	justify-content: space-between;
	&-item {
		height: 200px;
		margin-bottom: 20px;
	}
	&-title {
		background: var(--hotline-bg-main-color);
		border-radius: 16px;
		height: 60px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: var(--el-font-size-medium);
		img {
			width: 83px;
			height: 83px;
			position: absolute;
			left: -22px;
			top: -2px;
		}
	}
	&-number {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40px 20px 0 20px;
		text-align: center;
		&-item-number {
			font-size: 30px;
		}
		&-item-tips {
			margin-top: 12px;
			color: var(--hotline-color-text-main-light);
		}
		&-item-total {
			flex: 1;
			font-size: 30px;
		}
	}
}
</style>
