<template>
	<view :class="{'gray':store.isgray==1}">
		<view class="nav">
			<view class="user f-row aic">
				<view class="avatar">
					<image @click="toProfile('/pages/useredit/useredit')"
						:src="imgUrl(store.userinfo.avatar)"
						mode="">
					</image>
				</view>
				<view class="f-row aic jcb right">
					<view class="name_job " @click="toProfile('/pages/useredit/useredit')">
						<view class="f-row aic">
							<view class="name">
								{{store.userinfo.realname}}
							</view>
						</view>
						<view class="job">
							{{store.role}}
						</view>
					</view>
					<view class="shezhi">
						<image @click="scan" style="width: 50rpx;height: 50rpx;margin-right: 20rpx;"
							src="../../static/tab/scan.png"></image>
	<!-- 					<image src="../../static/my/shezhi.png" mode="" @click="toProfile('/pages/useredit/useredit')">
						</image> -->
					</view>
				</view>
			</view>
			<view class="f-col aic">
				<view class="msg f-row aic jca">
					<view class="box f-col aic" @click="jump('/pages/task/todotask')">
						<view class="num">
							{{todoNum}}
						</view>
						<text>个人办公</text>
					</view>
					<view class="box f-col aic">
						<view class="num">
							{{step}}
						</view>
						<text>步数</text>
					</view>
					<view class="box f-col aic" @click="jump('/pages/useredit/addressbook')">
						<view class="num">
							34
						</view>
						<text>通讯录</text>
					</view>
				</view>
			</view>
		</view>
		<view class="operate">
			<view class="f-row aic jcb item" v-for="item,i in arr" :key="i" @click="jump(item.path)">
				<view class="left f-row aic">
					<image :src="item.img" mode=""></image>
					<text>{{item.text}}</text>
				</view>
				<view class="right f-row aic">
					<!-- <view class="" v-show="i==0">
						<uni-icons type="right" color="#2C2C2C"></uni-icons>
					</view> -->
					<view class="switch" v-show="i==0" @click="messageSwitch=!messageSwitch">
						<image v-show="messageSwitch" src="../../static/my/open.png" mode=""></image>
						<image v-show="!messageSwitch" src="../../static/my/close.png" mode=""></image>
					</view>
					<view class="switch" v-show="i==2" @click="position">
						<image v-show="positionSwitch" src="../../static/my/open.png" mode=""></image>
						<image v-show="!positionSwitch" src="../../static/my/close.png" mode=""></image>
					</view>
					<view class="version" v-show="i==3">
						当前版本v{{currentVersion}}
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		userProfileApi,
		taskListApi
	} from '@/api/api.js';
	import {
		queryRoleApi
	} from '@/api/login.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		beforeJump,
		getLocation,
		toast,
		getWeather
	} from '@/utils/index.js';
	import {
		imgUrl
	} from '@/utils/index.js';
	import {
		useStore
	} from '@/store';
	const store = useStore();
	import * as StepCounter from '../../uni_modules/wuwx-step-counter';

	const step = ref(0)
	StepCounter.startStepCountingUpdates({
		handler: (numberOfSteps, timestamp, error) => {
			step.value = numberOfSteps
		}
	});
	const currentVersion = ref(plus.runtime.version)
	const arr = ref([
		// {
		// 	img: '../../static/my/biao.png',
		// 	text: '值班表查询',
		// 	path: '/pages/zhiban/index'
		// }, 
		// {
		// 	img: '../../static/my/xiaoxi.png',
		// 	text: '接受消息推送',
		// 	path: ''
		// }
		// , {
		// 	img: '../../static/my/dingwei.png',
		// 	text: '开启定位',
		// 	path: ''
		// }, {
		// 	img: '../../static/my/shengji.png',
		// 	text: '软件升级',
		// 	path: ''
		// },
	])
	const messageSwitch = ref(false)
	const positionSwitch = ref(store.positionSwitch)
	const jump = (url) => {
		if (!url) return
		beforeJump(url, () => {
			uni.navigateTo({
				url
			})
		})
	}
	/**跳转个人资料*/
	const toProfile = (url) => {
		uni.navigateTo({
			url
		})
	}
	/**定位*/
	const position = () => {
		positionSwitch.value = !positionSwitch.value
		uni.setStorageSync('positionSwitch', positionSwitch.value)
		store.setPositionSwitch(positionSwitch.value)
		if (!positionSwitch.value) {
			toast('定位已关闭')
		}
		getLocation()
	}
	/**扫码*/
	const scan = () => {
		uni.scanCode({
			success: function(res) {
				plus.runtime.openWeb(res.result)
			}
		})
	}
	onShow(() => {
		taskList()
	})
	const todoNum = ref(0)
	const taskList = () => {
		taskListApi({
			pageNo: 1,
			pageSize: 4,
			_t: new Date().getTime()
		}).then((res) => {
			if (res.success) {
				todoNum.value = res.result.total
			}
		})
	}
</script>

<style lang="scss" scoped>
	.operate {
		padding: 0 30rpx;
		transform: translateY(-10rpx);
		

		.item {
			height: 104rpx;
			border-bottom: 1px solid #EFEFEF;

			.version {
				font-size: 24rpx;
				color: #888888;
			}
		}

		.switch {
			image {
				width: 68rpx;
				height: 38rpx;
			}
		}

		.left {
			font-size: 28rpx;
			color: #333333;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 30rpx;
			}
		}
	}

	.msg {
		width: 690rpx;
		height: 142rpx;
		background-image: url('../../static/my/bg1.png');
		background-size: 690rpx 142rpx;
		margin-top: 30rpx;

		.box {
			justify-content: center;
			width: 33.33%;

			.num {
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 4rpx;
			}

			text {
				font-size: 24rpx;
				color: #888888;
			}
		}

		.box:not(:last-child) {
			position: relative;

			&::after {
				content: ' ';
				width: 1rpx;
				height: 32rpx;
				background: #D8D8D8;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.nav {
		height: 458rpx;
		background-image: url('../../static/my/navbg.png');
		background-size: 750rpx 458rpx;

		.user {
			padding: 128rpx 30rpx 0 30rpx;

			.right {
				flex: 1;
			}

			.avatar {
				margin-right: 24rpx;

				image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					background-color: #fff;
				}
				
			}

			.name_job {
				.name {
					font-size: 36rpx;
					color: #333333;
				}

				.status {
					padding: 4rpx 12rpx;
					background: #55B800;
					border-radius: 8rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					display: inline-block;
					margin-left: 8rpx;
				}

				.job {
					font-size: 24rpx;
					color: #666666;
					margin-top: 6rpx;
				}
			}

			.shezhi {
				image {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	}
</style>