<template>
	<view class="card_mine">
		<view class="card_backdrop">
			<view class="box_backdrop">
				<view class="card_avatar">
					<uv-avatar :src="'http://182.43.195.17:99/prod-api' + userData.avatar"
						:text="getName(userData.userName)" shape="square" size="70" fontSize="30"
						randomBgColor></uv-avatar>
				</view>
				<view class="mine_title_login">
					<view class="mine_name">{{userData.userName}}</view>
					<view class="mine_phone">{{userData.phonenumber}}</view>
				</view>
				<view class="card_work_box">
					<view class="work_item_box" v-for="(item,index) in workData" :key="index" @click="workOrder(index)">
						<view class="ball_work_card center_in">
							<text :style="{color:item.color}" class="iconfont work_icon"
								:class="'icon-'+ item.icon"></text>
						</view>
						<view class="work_title_item">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card_set_box" @click="changePassword">
			<view style="width:34rpx;heigth:34rpx;margin: 0rpx 10rpx 0rpx 30rpx;">
				<text class="iconfont icon_mine_set">&#xe637;</text>
			</view>
			<span style="font-size: 30rpx;">修改密码</span>
		</view>
		<view class="card_set_box" @click="logOut">
			<view style="width:34rpx;heigth:34rpx;margin: 0rpx 10rpx 0rpx 30rpx;">
				<text class="iconfont icon_mine_set">&#xe628;</text>
			</view>
			<span style="font-size: 30rpx;">退出登录</span>
		</view>
		<uv-modal ref="modal" content='退出后将无法查看信息通知。' align="center" showCancelButton @confirm="confirm"></uv-modal>
	</view>
</template>

<script setup lang="ts">
	import { deleteLocalStorage } from "@/utils/cache";
	import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
	import { ref, watch } from 'vue'
	const props = defineProps({
		userInfo: {
			type: Object,
			default: () => ({})
		},
		workTypeData: {
			type: Array,
			default: () => ([])
		},
	});
	const userData : any = ref({})
	const modal : any = ref(null)
	const title = ref('Hello')
	const disabled = ref(true)

	const workData : any = ref([])
	// 工单
	function workOrder(params : any) {
		uni.navigateTo({
			url: '/pages/workOrder/index?current=' + params,
		})
	}
	// 修改密码
	function changePassword() {
		uni.navigateTo({
			url: '/pages/mine/passwd',
		})
	}
	// 退出登录
	function logOut() {
		modal.value.open();
	}
	// 确定退出登录
	function confirm() {
		deleteLocalStorage("token");
		uni.navigateTo({
			url: '/pages/login/index',
		})
	}
	onShow(() => {
	})
	// 获取名字首字符
	function getName(params : any) {
		let title = ''
		if (params) {
			title = params.charAt(0)
		}
		return title
	}
	const goLogin = () => {
		uni.navigateTo({
			url: '/pages/login/index',
		})
	}
	watch(() => props.userInfo, (newVal) => {
		userData.value = newVal
		workData.value = props.workTypeData
	},
		{ deep: true, immediate: true }
	);
</script>

<style lang="scss" scoped>
	.card_mine {
		width: 100%;
	}

	.card_backdrop {
		position: relative;
		width: 100%;
		height: 470rpx;
	}

	.card_backdrop:after {
		content: "";
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		width: 150%;
		height: 400rpx;
		// background-color: rgba(34, 196, 148, 1);
		background-image: linear-gradient(to right, rgba(79, 185, 156, .6) 0%, rgba(34, 196, 148, 1) 100%);
		border-bottom-left-radius: 120%;
		border-bottom-right-radius: 120%;
	}

	.box_backdrop {
		position: absolute;
		z-index: 1;
		left: 30rpx;
		right: 30rpx;
		top: 150rpx;
		border-radius: 10rpx;
		background-color: rgba(65, 81, 121, .8);
	}

	.card_avatar {
		position: absolute;
		top: -40rpx;
		left: 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		border-radius: 4px;
	}

	.mine_title_login {
		display: flex;
		justify-content: center;
		flex-direction: column;
		height: 100rpx;
		color: #fff;
		font-size: 32rpx;
		padding-left: 200rpx;
	}

	.mine_name {
		font-weight: bold;
		font-size: 32rpx;
	}

	.mine_phone {
		margin-top: 5rpx;
		font-size: 28rpx;
		color: #909399;
	}

	.work_icon {
		font-size: 90rpx;
	}

	.card_work_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		color: #fff;
	}

	.ball_work_card {
		width: 90rpx;
		height: 90rpx;
		padding: 10rpx;
		border-radius: 50%;
		// background-color: #ffffff;
	}

	.work_item_box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.work_title_item {
		margin-top: 10rpx;
		font-size: 28rpx;
	}

	.card_set_box {
		display: flex;
		align-items: center;
		width: calc(100% - 60rpx);
		height: 90rpx;
		margin: 20rpx 30rpx 0rpx 30rpx;
		color: #fff;
		border-radius: 10rpx;
		background-color: rgba(85, 110, 143, .3);
	}

	.icon_mine_set {
		font-size: 34rpx;
	}
</style>