<!--
 * @Author: XHC
 * @Date: 2025-05-19 15:19:14
 * @LastEditors: XHC
 * @LastEditTime: 2025-05-23 16:02:51
 * @Description: 我的
-->
<template>
    <view class="my">
		<view class="avatar-box">
			<uni-file-picker class="avatar" return-type="object" :value="file" :del-icon="false" disable-preview :imageStyles="imageStyles"
				file-mediatype="image">选择</uni-file-picker>
			<text class="name">用户名</text>
		</view>
		<view class="info">
			<view class="info-item" v-for="(item, index) in infoData" :key="index">
				<text class="title">{{ item.title }}</text>：
				<text>{{ item.value }}</text>
			</view>
		</view>
		<view class="list">
			<uni-card class="list-item" v-for="(item, index) in listData" :key="index">
				<uni-row :gutter="30">
					<uni-col :span="2">
						<uni-icons fontFamily="iconfont" color="#1469BD" size="20">{{item.icon}}</uni-icons> 
					</uni-col>
					<uni-col :span="20">
						<text class="title">{{ item.title }}</text>
					</uni-col>
					<uni-col :span="2">
						<uni-icons type="right" color="#1469BD" size="20"></uni-icons>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
	 </view>
</template>

<script setup>
import { reactive, ref } from 'vue';

let imageStyles = reactive({
	width:86,
	height:86,
	border: {
		color:"#0C5DAE",
		radius: '50%',
		width: 2,
	}
})

let file = reactive({
	name:"avatar.png",
	extname:"png",
	url:"/static/index/logo.png",
})

// 个人信息
let infoData = reactive([
	{ title: '工号', value: '101200022' },
	{ title: '电话号码', value: '15979318624' },
	{ title: '岗位', value: '巡检员' },
	{ title: '部门', value: '运行部' },
])

let listData = reactive([
	{ icon: '\ue637', title: '巡检统计' },
	{ icon: '\ue656', title: '系统反馈' },
	{ icon: '\ue610', title: '紧急联系' },
	{ icon: '\ue650', title: '关于' },
])

</script>

<style lang="scss" scoped>
.my {
	.avatar-box {
		display: flex;
		flex-direction: column;
    	align-items: center;
		.avatar {
			width: auto;
		}
		.name {
			color: #045BB7;
		}
	}
	.info {
		margin: -100rpx 30rpx 0;
		padding-top: 130rpx;
		background: url("@/static/image/my/info-bg.png") no-repeat;
    	background-size: 100% 100%;
		.info-item {
			margin: 0 50rpx;
			padding: 30rpx 10rpx;
			border-top: 1rpx solid #fff;
		}
		.title{
			width: 130rpx;
			display: inline-block;
			color: #828186;
			text-align-last: justify;
		}
	}
	.list {
		.list-item {
			padding: 15rpx!important;
		}
		.title {
			font-size: 34rpx;
			color: #000;
		}
	}
}
</style>