<template>
	<view class="page">
		<uni-nav-bar background-color="linear-gradient(180deg, #007aff, #fff)" status-bar :border="false"
			title="个人中心" />
		<view class="user" :style="{ paddingTop: navHeight + 'px' }">
			<image class="avatar" src="@img/profile.png"></image>
			<view class="name">
				<text>{{ name }}</text>
				<text>某部门</text>
			</view>
		</view>

		<view class="card">
			<view class="important">
				<view class="item" @click="redirectWorkPage()">
					<uni-badge style="width: 80rpx;height: 80rpx; margin-bottom: 10rpx;" class="uni-badge-left-margin"
						:is-dot="false" :text="undoneCount" :customStyle="{
							fontSize: '14px',
							padding: '2px 6px',
							height: '24px'
						}" absolute="rightTop" size="small">
						<image src="@img/work.png"></image>
					</uni-badge>
					<text>未完成工作</text>
				</view>
				<view class="item" @click="redirectReportWeekPage()">
					<image src="@img/report.png"></image>
					<text>我的周报</text>
				</view>
				<view class="item" @click="redirectContractPage()">
					<image src="@img/contract.png"></image>
					<text>我的合同</text>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="menu">
				<view class="item" @click="redirectInfoPage()">
					<image src="@img/idcard.png"></image>
					<text>个人资料</text>
					<image class="arrow" src="@img/right.png"></image>
				</view>
				<view class="item" @click="redirectCustomerPage()">
					<image src="@img/customer.png"></image>
					<text>客户管理</text>
					<image class="arrow" src="@img/right.png"></image>
				</view>
				<view class="item" @click="redirecArchivePage()">
					<image src="@img/archiver.png"></image>
					<text>归档文件</text>
					<image class="arrow" src="@img/right.png"></image>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="menu">
				<button open-type="feedback" style="background: transparent; border: none;text-align: left;padding: 0;"
					class="contract-btn">
					<view class="item">
						<image src="@img/bug.png"></image>
						<text>BUG反馈</text>
						<image class="arrow" src="@img/right.png"></image>
					</view>
				</button>
				<button open-type="contact" style="background: transparent; border: none;text-align: left;padding: 0;"
					class="contract-btn">
					<view class="item">
						<image src="@img/kefu.png"></image>
						<text>联系客服</text>
						<image class="arrow" src="@img/right.png"></image>
					</view>
				</button>
				<view class="item" @click="redirectVersionPage()">
					<image src="@img/version.png"></image>
					<text>版本记录
						<text class="ver-text">v1.1.6</text>
					</text>
					<image class="arrow" src="@img/right.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup lang="ts">
import { getSelfInfo } from '@/api/base/client';
import { getWorkUndoneCount } from '@/api/project-center/work';
import { useEmitt } from '@/logics/mitt/useEmitt';
import { SelfInfoResParams } from '@/types/client';
import { getHeaderHeight } from '@/utils';

const navHeight = ref(0) //顶部导航区域高度
const undoneCount = ref(0)
const name = ref()
const { emitter } = useEmitt()


/**
* 获取个人账号信息
*/
const getUserInfo = async () => {
	const result: SelfInfoResParams = await getSelfInfo()
	name.value = result.name
}

const redirectWorkPage = async () => {
	uni.switchTab({
		url: `/pages/work/index`,
		success: () => {
			emitter.emit('get_incomplete_work_list', 0)
		},
	})
}

const redirectReportWeekPage = async () => {
	uni.navigateTo({ url: '/pages/profile/week-report/index' })
}

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

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

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

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

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

const getUndoneCount = async () => {
	const { undone_count } = await getWorkUndoneCount()
	undoneCount.value = undone_count
}

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
	name: 'set_user_name',
	callback: (new_name: string) => {
		name.value = new_name
	}
})



onShow(() => {
	getUndoneCount()
})

onMounted(() => {
	navHeight.value = getHeaderHeight().navHeight
	getUserInfo()
	getUndoneCount()
})
</script>

<style lang="scss">
.page {
	background: linear-gradient(180deg, #007aff, #fff);
	min-height: 100vh;

	.user {
		display: flex;
		align-items: center;
		padding: 25rpx;

		&:active {
			background: #3c8a3e;
		}

		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}

		.right {
			width: 30rpx;
			height: 30rpx;
		}

		.name {
			height: 80rpx;
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			color: #fff;
			justify-content: space-between;

			text {
				&:nth-child(1) {
					font-size: 16px;
					font-weight: bold;
				}

				&:nth-child(2) {
					font-size: 12px;
					color: #f0f0f0;
				}
			}
		}
	}

	.card {
		background: #fff;
		box-sizing: border-box;
		width: 700rpx;
		margin: auto;
		padding: 15rpx;
		margin-top: 20rpx;
		border-radius: 12rpx;

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

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

				image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 12px;

				}
			}
		}

		.menu {
			button::after {
				border: none;
			}

			.item {
				display: flex;
				height: 100rpx;
				align-items: center;
				padding-left: 20rpx;
				box-sizing: border-box;
				width: 100%;

				&:active {
					background: #f0f0f0;
				}

				image {
					height: 45rpx;
					width: 45rpx;
				}

				text {
					font-size: 28rpx;
					color: #444;
					padding-left: 15rpx;
					box-sizing: border-box;
					width: calc(100% - 100rpx);

					.ver-text {
						font-size: 26rpx;
						position: relative;
						top: 1rpx;
						color: #007aff;
						width: auto;
						float: right;
						margin-right: 10rpx;
					}
				}



				.arrow {
					width: 26rpx;
					height: 26rpx;
				}
			}
		}
	}

}
</style>
