<template>
	<template v-if="currentPage === 'home'">
		<view>
			<image src="/static/image/carousel.png" style="width: 100%" mode="widthFix"></image>
		</view>
		<view class="container">
			<view class="title">我的任务</view>
			<view class="flex flex-wrap gap-32">
				<view class="app-item" @tap="openTask('todo')">
					<view class="item-icon item-number mb-6">
						<text>{{ task.todoCount }}</text>
					</view>
					<view class="item-name mb-6">待处理</view>
				</view>
				<view class="app-item" @tap="openTask('done')">
					<view class="item-icon item-number mb-6">
						<text>{{ task.doneCount }}</text>
					</view>
					<view class="item-name">已办结</view>
				</view>
			</view>
		</view>
		<!-- <view class="container">
			<view class="title">问题处置</view>
			<view class="flex flex-wrap gap-32">
				<view class="app-item" @tap="openTask('todo')">
					<view class="item-icon item-number mb-6">
						<text>{{ task.todoCount }}</text>
					</view>
					<view class="item-name mb-6">待处理</view>
				</view>
			</view>
		</view> -->
		<view class="container">
			<view class="title">督察应用</view>
			<view class="flex flex-wrap app-container">
				<view class="app-item" @tap="openTaskProblem">
					<view class="item-icon mb-6">
						<image src="/static/icon/ic_camera.png"></image>
					</view>
					<view class="item-name">问题随拍</view>
				</view>
				<view class="app-item" @tap="openNegative">
					<view class="item-icon mb-6">
						<image src="/static/icon/ic_warning.png"></image>
					</view>
					<view class="item-name">问题清单</view>
				</view>
				<view class="app-item" @tap="openSelfexamination">
					<view class="item-icon mb-6">
						<image src="/static/icon/ic_selfexamination.png"></image>
					</view>
					<view class="item-name">所队自查</view>
				</view>
				
				<view class="app-item" @tap="openDuty">
					<view class="item-icon mb-6">
						<image src="/static/icon/ic_card.png"></image>
					</view>
					<view class="item-name">值班报备</view>
				</view>
				<view class="app-item" @tap="openComfort">
					<view class="item-icon mb-6">
						<image src="/static/icon/ic_apply.png"></image>
					</view>
					<view class="item-name">抚慰申请</view>
				</view>
				<view class="app-item" @tap="openBooks">
					<view class="item-icon mb-6">
						<image src="/static/icon/ic_book.png"></image>
					</view>
					<view class="item-name">知识库</view>
				</view>
			</view>
		</view>
	</template>
	<template v-else>
		<view class="wrapper">
			<view class="center-card flex gap-12">
				<view class="avatar">
					<net-image :filepath="store.state.user.avatarUrl" v-if="store.state.user.avatarUrl" />
					<image src="/static/police.png" v-else></image>
				</view>
				<view class="flex flex-col justify-between">
					<view>
						<view class="name mb-6">{{ store.state.user.nickName }}</view>
						<view class="second mb-6">{{ store.state.user.departName }}</view>
						<view class="second">{{ }}</view>
					</view>
					<view class="info flex">
						<view>警号：</view>
						<view class="mr-20">{{ store.state.user.empNo }}</view>
					</view>
				</view>
				<view class="edit-btn">
					<image src="/static/edit.png" style="height: 37px" mode="heightFix"></image>
				</view>
			</view>
			<view class="panel">
				<view class="panel-h" @tap="openManual">
					<image src="/static/icon/ic_c_book.png" style="height: 27px; width: 27px"></image>
					<view class="panel-c">
						<text class="panel-text">使用手册</text>
						<uni-icons type="right" size="20" color="#666" />
					</view>
					
				</view>
				<view class="panel-h" @tap="openFeedback">
					<image src="/static/icon/ic_c_message.png" style="height: 27px; width: 27px"></image>
					
					<view class="panel-c">
						<text class="panel-text">意见反馈</text>
						<uni-icons type="right" size="20" color="#666" />
					</view>
				</view>
				<view class="panel-h" @tap="openAbout">
					<image src="/static/icon/ic_c_app.png" style="height: 27px; width: 27px"></image>
					
					<view class="panel-c">
						<text class="panel-text">关于APP</text>
						<uni-icons type="right" size="20" color="#666" />
					</view>
				</view>
			</view>
		</view>
	</template>
	<view class="tab-bar">
		<view v-for="item in tabBars" :class="currentPage === item.name ? 'tab-bar-item active': 'tab-bar-item'" @tap="currentPage = item.name">
			<uni-icons :type="item.icon" size="50rpx"></uni-icons>
			<view>{{ item.text }}</view>
		</view>
		<view class="tab-bar-item_center"  @tap="openCamera">
			<image src="/static/camer.png" class="tab-bar-item_center-icon" mode="widthFix"></image>
			<view>随手拍</view>
		</view>
	</view>
</template>

<script lang="uts">
	import permision from '@/common/permission'
	import { getToken } from '@/common/auth'
	import store from '@/store'
	import { setToken } from '@/common/auth'
	import { login } from '@/api/auth'
	import { getTaskCount } from '@/api/task'
	
	let _this;
	export default {
		data() {
			return {
				task: {
					todoCount: 0,
					doneCount: 0
				},
				user: {},
				currentPage: 'home',
				tabBars: [
					{
						text: '首页',
						icon: 'home',
						name: 'home'
					},
					{
						text: '我的',
						icon: 'person',
						name: 'center'
					}
				]
			}
		},
		setup() {
			return {
				store
			}
		},
		async onShow() {
			_this = this;
			const url = 'http://172.20.10.3:8080/app/';
			const env = 'prod';
			// const url = 'http://192.168.3.22:8080/app/'
			// #ifdef APP-PLUS
			if (env === 'dev') {
				if (!store.state.requestUrl) {
					store.commit('setRequestUrl', url + 'forward')
				}
				if (!getToken() || !store.state.hasLogin) {
					const userData = await login({ empNo: '012893' });
					setToken(userData.token);
					store.commit('setUser', userData.user)
				}
			} else {
				const event = plus.android.importClass('com.maker.supervise.Event')
				if (!store.state.requestUrl) {
					const requestUrl = event.getRequestUrl()
					store.commit('setRequestUrl', requestUrl)
				}
				if (!store.state.appCredential) {
					const appCredential = encodeURIComponent(event.getAppCredential())
					store.commit('setAppCredential', appCredential)
				}
				if (!store.state.userCredential) {
					const userCredential = encodeURIComponent(event.getUserCredential())
					store.commit('setUserCredential', userCredential)
				}
				if (!getToken() || !store.state.hasLogin) {
					const userData = await login({ empNo: event.getEmpNo() });
					setToken(userData.token);
					store.commit('setUser', userData.user)
				}
			}
			//	#endif
			
			const data = await getTaskCount()
			if (data) {
				_this.task = data;
			}
		},
		methods: {
			openDeveloping() {
				uni.showModal({
					title: '温馨提示',
					content: '功能开发中...',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			openTask(taskStatus) {
				uni.navigateTo({
				    url: '/pages/task/index?taskStatus=' + taskStatus
				});
			},
			async openCamera() {
				// #ifdef APP-PLUS
				let status = await permision.requestAndroid('android.permission.CAMERA');
				if (status === null || status === 1) {
					uni.navigateTo({
					    url: '/pages/common/camera'
					});
				} else {
					uni.showModal({
						content: "没有开启相机权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				//	#endif
				
				// #ifdef H5
				uni.navigateTo({
				    url: '/pages/common/camera'
				});
				//	#endif
			},
			openNegative() {
				uni.navigateTo({
				    url: '/pages/negative/index'
				});
			},
			openDuty() {
				uni.navigateTo({
				    url: '/pages/duty/index'
				});
			},
			openComfort() {
				uni.navigateTo({
				    url: '/pages/comfort/list'
				});
			},
			openBooks() {
				uni.navigateTo({
				    url: '/pages/books/index'
				});
			},
			openSelfexamination() {
				uni.navigateTo({
				    url: '/pages/task/selfexamination/list'
				});
			},
			openTaskProblem() {
				uni.navigateTo({
				    url: '/pages/task/problem/list'
				});
			},
			openFeedback() {
				uni.navigateTo({
					url: `/pages/center/feedback`
				});
			},
			openManual() {
				uni.navigateTo({
					url: `/pages/center/manual`
				});
			},
			openAbout() {
				uni.navigateTo({
					url: `/pages/center/about`
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx 30rpx;
	.title {
		font-size: 28rpx;
		font-weight: 700;
		margin-bottom: 24rpx;
	}
}
.app-item {
	width: 124rpx;
	.item-icon {
		width: 124rpx;
		height: 124rpx;
		line-height: 124rpx;
		text-align: center;
		background: #F3F3F3;
		border-radius: 24rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.item-name {
		font-size: 26rpx;
		text-align: center;
	}
	.item-number {
		font-size: 42rpx;
		font-weight: 700;
	}
}
.app-container {
	gap: 24rpx 64rpx;
}
.tab-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 96rpx;
	display: flex;
	box-shadow: inset 0 1px 0 0 #E4E4E4;
	.tab-bar-item {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 12px;
		color: #666;
		.uni-icons {
			color: #666 !important;
		}
		&.active {
			color: var(--primary-color);
			.uni-icons {
				color: var(--primary-color) !important;
			}
		}
	}
	
	.tab-bar-item_center {
		position: absolute;
		left: 50%;
		top: -48rpx;
		transform: translateX(-50%);
		font-size: 12px;
		color: #666;
		text-align: center;
		.tab-bar-item_center-icon {
			width: 96rpx;
			display: block;
		}
	}
}

.center-card {
		box-shadow: 0px 10rpx 26rpx 6rpx rgba(0, 0, 0, 0.08);
		margin: 24rpx;
		padding: 24rpx;
		position: relative;
		.name {
			font-size: 28rpx;
			line-height: 40rpx;
		}

		.second {
			font-size: 24rpx;
			line-height: 34rpx;
			color: #666;
		}

		.info {
			font-size: 24rpx;
		}

		.edit-btn {
			position: absolute;
			bottom: 0;
			right: 0;
			image {
				display: block;
			}
		}
	}
	.panel {
		padding: 0 24rpx;
		.panel-h {
			display: flex;
			align-items: center;
			gap: 0 24rpx;
			.panel-c {
				height: 90rpx;
				line-height: 90rpx;
				box-shadow: inset 0 -1px 0 0 #eee;
				width: calc(100% - 80rpx);
				display: flex;
				justify-content: space-between;
			}
		}
	}
	.avatar {
		width: 136rpx;
		height: 205rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>