<template>
	<view class="page">
		<customHead mode='searchNav' :title='headtitle'></customHead>
		<view class="my-top">

			<!-- 用户信息 -->
			<view class="user-info">
				<view class="portrait">
					<image height="100%" width='100%' :src='imag'>
					</image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>{{userInfo.name || "微信用户"}}</text>
					</view>
					<view class="rank">
						<text>{{userInfo.accent}}</text>
					</view>
				</view>
				<view class="user-right" @click="UpdateUserIs">
					<image src="../../static/right.png"></image>
				</view>

				<!-- <u-modal v-model="isShow" :content="userInfo.accent" title="编辑" show-cancel-button="true"
					confirm="Updateuser">
					<view>
						<view style="display: flex;align-items: center;">
							<span>头像:</span>
							<u-upload ref="uUpload" :action="action" :auto-upload="true" @on-success="saveImage"
								max-count="1"></u-upload>
						</view>

						<view style="display: flex;align-items: center;">
							<span>姓名:</span>
							<u-input v-model="wdnmd.name" :type="type" :border="border" />
						</view>
					</view>

					<u-button @click="Updateuser">提交</u-button>
				</u-modal> -->

				<u-popup v-model="isShow" mode="bottom">
					<view class="headImage-Box">
						<view style="padding-left: 45%; font-size: 40rpx; padding-top: 30rpx; ">头像</view>
						<view style="display: flex; padding-top: 30rpx;">
							 
							<view style="display: flex;align-items: center; padding-left: 40rpx;">
								<span style = "width: 100rpx; padding-left: 20rpx;">姓名:</span>
								<u-input v-model="wdnmd.name" :type="type" :border="border" />
							</view>
							<view style="display: flex;align-items: center;padding-left: 4%;">
								<!-- <span style = "width: 80rpx;">头像:</span> -->
								<u-upload ref="uUpload" width="180" height="180" :action="action" :auto-upload="true"
									@on-success="saveImage" max-count="1"></u-upload>
							</view>
						</view>
						<view class="btns-box">
							<button @click="Updateuser">确认</button>
							<button @click="isShow = false">取消</button>
						</view>
						
					</view>
				</u-popup>
				<!-- 修改用户信息 -->
				<!-- <view class="userInfoUpdate" v-if="isShow">
					<u-input v-model="value" :type="type" :border="border" />
				</view> -->

			</view>
		</view>

		<view class="main">
			<view class="my-banner" @click="GoFindWork">
				<image src="../../static/my1.png" mode="widthFix"></image>
			</view>
			<view class="message-list">
				<view class="titleall-box">
					<view class="titleall-left">
						<view class="titleall-left-line"></view>服务与工具
					</view>
				</view>
				<view class="list" @click="GoFindWork">
					<view class="icon-data">
						<view class="icon">
							<image src="/static/my-icon1.png" mode=""></image>
						</view>
						<view class="data">
							<view class="title">
								<text>个人信息</text>
							</view>
						</view>
					</view>
					<view class="more">
						<text class="iconfont icon-more"></text>
					</view>
				</view>
				<view class="list" @click="GoOpinion">
					<view class="icon-data">
						<view class="icon">
							<image src="/static/my-icon3.png" mode=""></image>
						</view>
						<view class="data">
							<view class="title">
								<text>意见反馈</text>
							</view>
						</view>
					</view>
					<view class="more">
						<text class="iconfont icon-more"></text>
					</view>
				</view>
				<view class="list" @click="GetDetail('389271103194793221')">
					<view class="icon-data">
						<view class="icon">
							<image src="/static/my-icon4.png" mode=""></image>
						</view>
						<view class="data">
							<view class="title">
								<text>防骗指南</text>
							</view>
						</view>
					</view>
					<view class="more">
						<text class="iconfont icon-more"></text>
					</view>
				</view>
				<view class="list" @click="GetDetail('389270722012251397')">
					<view class="icon-data">
						<view class="icon">
							<image src="/static/my-icon5.png" mode=""></image>
						</view>
						<view class="data">
							<view class="title">
								<text>关于我们</text>
							</view>
						</view>
					</view>
					<view class="more">
						<text class="iconfont icon-more"></text>
					</view>
				</view>
				<view class="list" @click="GetDetail('389271127152657669')">
					<view class="icon-data">
						<view class="icon">
							<image src="/static/my-icon6.png" mode=""></image>
						</view>
						<view class="data">
							<view class="title">
								<text>合作单位</text>
							</view>
						</view>
					</view>
					<view class="more">
						<text class="iconfont icon-more"></text>
					</view>
				</view>
				<view class="list" @click="GetDetail('389271160438654213')">
					<view class="icon-data">
						<view class="icon">
							<image src="/static/my-icon7.png" mode=""></image>
						</view>
						<view class="data">
							<view class="title">
								<text>关注公众号</text>
							</view>
						</view>
					</view>
					<view class="more">
						<text class="iconfont icon-more"></text>
					</view>
				</view>
				<view class="list" @click="Getlogin">
					<view class="icon-data">
						<view class="icon">
							<image src="/static/my-icon1.png" mode=""></image>
						</view>
						<view class="data">
							<view class="title">
								<text>退出</text>
							</view>
						</view>
					</view>
					<view class="more">
						<text class="iconfont icon-more"></text>
					</view>
				</view>
				<view class="list" v-if="false">
					<view class="icon-data">
						<view class="icon">
							<image src="/static/my-icon8.png" mode=""></image>
						</view>
						<view class="data">
							<view class="title">
								<text>分享给朋友</text>
							</view>
						</view>
					</view>
					<view class="more">
						<text class="iconfont icon-more"></text>
					</view>
				</view>
			</view>
			<view class="my-phone">
				<view>客服电话：654564</view>
				<view>彭州市人社局监督电话：541516</view>
				<view>备案号：6556121212</view>
			</view>
		</view>
		<!-- <u-button type="primary">主要按钮</u-button>
		<u-button type="success">成功按钮</u-button>
		<u-button type="info">信息按钮</u-button>
		<u-button type="warning">警告按钮</u-button>
		<u-button type="error">危险按钮</u-button> -->
		<!-- tabbar -->
		<TabBar :tabBarShow="3"></TabBar>
	</view>
</template>

<script>
	import BASE_URL from '@/common/config.js'
	import service from '@/service/service.js'
	import customHead from "@/components/xy-customhead/xy-customhead.vue";
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			TabBar,
			customHead
		},

		data() {
			return {
				imag: 'https://zgxcx.antissoft.com/api/File/Image/annexpic/20230213_394738582306161925.jpg',
				wdnmd: {
					headIcon: [],
					name: "",
				},
				action: 'https://zgxcx.antissoft.com/api/file/Uploader/annexpic',
				filesArr: [],
				BASE_URL: "",
				headtitle: '铭钛招聘',
				scrollTop: 0,
				isHotline: false,
				userInfo: {},
				isShow: false,
			};
		},
		onReady() {
			uni.hideTabBar();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			// this.userInfo = service.getUser();
			this.GetUser();
		},
		methods: {
			GetUser() {
				this.API.GetUserInfo().then(res => {
					console.log('res', res);
					this.userInfo = res.data;
					console.log('this.userInfo', this.userInfo);
					console.log('sds', BASE_URL + this.userInfo.headIcon[0].url);
					if (this.userInfo.headIcon[0].url != null) {
						this.imag = BASE_URL + this.userInfo.headIcon[0].url;
					}
					console.log('是的哇大大', imag);
				})
			},
			saveImage(e) {
				console.log('dwa', e);
				// let url = JSON.parse(e.data)
				// console.log(url.data);
				this.wdnmd.headIcon.push(e.data);
				console.log('sdasedfse', this.wdnmd.headIcon);
			},
			Updateuser() {
				// console.log('sdwds', this.wdnmd);
				this.API.Updateuser(this.wdnmd).then(res => {
					console.log(res)
					if (res.code == 200) {
						console.log('修改成功!');
						this.GetUser();
					}
				})
			},
			// 如果您不需要进行太多的处理，直接如下即可
			// files = this.$refs.uUpload.lists;
			// console.log(files)
			UpdateUserIs() {
				this.isShow = true;
			},
			Getlogin() {
				uni.navigateTo({
					url: '/pages/Login/index'
				})
			},
			GoFindWork() {
				uni.navigateTo({
					url: '/pages/FindWord/FindWord'
				})
			},
			GoOpinion() {
				uni.navigateTo({
					url: '/pages/Opinion/Opinion'
				})
			},
			/**
			 * 详情页面
			 */
			GetDetail(id) {
				uni.navigateTo({
					url: '/pages/Detail/Detail?id=' + id,
				})
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails',
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			},
			/**
			 * 用户信息点击
			 * @param {Number} type
			 */
			onUserInfo() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'my.scss';

	.headImage-Box {
		width: 100%;
		height: 550rpx; 
		border: 2px solid rgb(49,57,89);
		// border-radius: 40rpx;

	}

	/deep/.u-upload {
		// display: flex;
		// align-items: center;
		// justify-content: center;
		margin-left: 60rpx;
		position: relative;
		right: 60rpx;
	}
	.btns-box{
		display: flex; 
		margin-top: 100rpx;
		button{
			width: 200rpx;
			height: 80rpx;
			align-items: center;
		}
	}
	
</style>
