<template>
  <view class="profile-page">
	<!-- 顶部导航栏 -->
    <custom-navbar 
      title="个人资料" 
      :show-back="true"
    ></custom-navbar>
    
    <!-- 个人资料列表 -->
    <view class="profile-list">
      <!-- 头像 -->
      <view class="profile-item">
        <text class="item-label">头像</text>
        <view class="item-content avatar-content" @click="chooseAvatar">
          <image :src="!userInfo.head_photo ? baseAvartar : userInfo.head_photo " mode="aspectFill" class="avatar"></image>
        </view>
      </view>
      
      <!-- 昵称 -->
      <view class="profile-item">
        <text class="item-label">昵称</text>
        <view class="item-content">
		  <input type="text"
				 class="item-value item-inp"
				 :value="userInfo.username"
				 @input="editNickname"
				 placeholder="未设置" />
        </view>
      </view>
      
      <!-- 性别 -->
      <view class="profile-item" @click="chooseSex">
        <text class="item-label">性别</text>
        <view class="item-content">
          <text class="item-value">{{userInfo.sex == 1 ? '女' : userInfo.sex == 2 ? '男' : '未设置'}}</text>
        </view>
      </view>
      
      <!-- 所在地 -->
      <view class="profile-item" @click="chooseLocation">
        <text class="item-label">所在地</text>
        <view class="item-content">
          <text class="item-value">{{userInfo.dependency || '未设置'}}</text>
        </view>
      </view>
      
      <!-- 邀请码 -->
      <!-- <view class="profile-item">
        <text class="item-label">邀请码</text>
        <view class="item-content">
          <text class="item-value">{{userInfo.invite_code}}</text>
        </view>
      </view> -->
    </view>
    
    <!-- 编辑按钮 -->
    <view class="edit-btn" @click="saveProfile">
		<text class="edit-text">保存</text>
	</view>
	
	
	<!-- 所在地省市区选择 -->
	<view class="popup" :class="{ show: showLocationPopupFlag }">
			<view class="popup-mask" @click="hideLocationPopup"></view>
			<view class="popup-content">
			  <view class="popup-header">
				<text class="popup-title">选择所在地</text>
				<text class="popup-close" @click="hideLocationPopup">×</text>
			  </view>
			  <view class="region-body">
				<picker-view @change="bindChangeLocation"
							 class="picker-scroll"
							 :indicator-style="indicatorStyle"
							 :value="locationValue">
					<picker-view-column>
						<view class="picker-item" v-for="(item,index) in ChinaCitys" :key="index">{{item.province}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item,index) in locatinCitys" :key="index">{{item.city}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item,index) in locationAreas" :key="index">{{item.area}}</view>
					</picker-view-column>
				</picker-view>
			  </view>
			  <view class="popup-footer">
				<view class="popup-btn cancel" @click="hideLocationPopup">
				  <text class="btn-text">取消</text>
				</view>
				<view class="popup-btn confirm" @click="confirmLocationSelect">
				  <text class="btn-text">确定</text>
				</view>
			  </view>
			</view>
	</view>
	
	<!-- 获取权限提示匡内容 -->
	<view class="permission"
		  :class="{ transform: isShowPer && nowQer === 'xc' }">
		<view class="per-tit">美融融plus 对储存空间/照片权限申请说明</view>
		<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中读取相册和文件内容。</view>
	</view>
	<view class="permission"
		  :class="{ transform: isShowPer && nowQer === 'xj' }">
		<view class="per-tit">美融融plus 对相机拍摄权限申请说明</view>
		<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中所需内容。</view>
	</view>
  </view>
</template>

<script>
import request from '../../utils/request'
import ChinaCitys from '../../static/data/ChinaCitys.json'
import uploadImage from '../../utils/uploadImage'
import permissionUtils from '../../utils/per'
import locationService from '../../utils/locationService';

export default {
  data() {
    return {
      userInfo: {},
	  indicatorStyle: 'height: 68rpx;',
	  baseAvartar: 'https://app.mrrweb.com.cn' + '/public/images/headanimal.png',
	  showLocationPopupFlag: false,
	  locatinCitys: [],
	  locationValue: [],
	  locationAreas: [],
	  ChinaCitys: '',
	  isShowPer: false,
	  nowQer: 'xc'
    }
  },
  onLoad() {
	this.ChinaCitys = ChinaCitys;
	this.locatinCitys = this.ChinaCitys[0].citys;
	this.locationAreas = this.locatinCitys[0].areas;
  	this.getUserInfo();
  },
  methods: {
	getUserInfo() {
		request.post('/user/getuser',{type: 1}).then(result=>{
			this.userInfo = result.data;
			console.log(result)
		})
	},
	hideLocationPopup() {
      this.showLocationPopupFlag = false
	},
	confirmLocationSelect() {
		let valueArr = this.locationValue;
		let index1 = valueArr[0] || 0;
		let index2 = valueArr[1] || 0;
		let index3 = valueArr[2] || 0;
		let province = this.ChinaCitys[index1].province;
		let city = this.locatinCitys[index2].city;
		let area = this.locationAreas[index3].area;
		this.userInfo.dependency = province + '-' + city + '-' + area;
		this.showLocationPopupFlag = false;
	},
	bindChangeLocation(e) {
		this.locationValue = e.detail.value;
		let index1 = e.detail.value[0] || 0;
		let index2 = e.detail.value[1] || 0;
		this.locatinCitys = this.ChinaCitys[index1].citys;
		this.locationAreas = this.locatinCitys[index2].areas;
	},
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    // 选择头像
	// async chooseAvatar() {
	//   if(!this.isShowPer) {
	// 	this.isShowPer = true;
	//   }
	//   const result = await uploadImage.handleUpload(this.userInfo.id,1);
	//   uni.hideLoading();
	//   this.userInfo.head_photo = result;
	// },
	async chooseAvatar() {
	  try {
		const systemInfo = uni.getSystemInfoSync()
		if(systemInfo.platform === 'ios') {
			this.openCamera();
		}else {
			let xcpermission = '';
			let xjpermission = '';
			if(systemInfo.platform === 'ios') {
				xcpermission = 'photo_library',
				xjpermission = 'camera'
			}else {
				xcpermission = `android.permission.READ_EXTERNAL_STORAGE,android.permission.WRITE_EXTERNAL_STORAGE`
				xjpermission = 'android.permission.CAMERA'
			}
			const xcfirstRequest = !plus.storage.getItem(`perm_${xcpermission}`)
			const xjfirstRequest = !plus.storage.getItem(`perm_${xjpermission}`)
			if(xcfirstRequest || xjfirstRequest) {
				this.isShowPer = true;
			}
			
			// 1. 检查权限
			 // const { granted } = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
			 this.nowQer = 'xc';
			 const xc = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
			 this.nowQer = 'xj';
			 const xj = await permissionUtils.checkPermission('camera', '需要相机权限用于拍摄照片');
			this.isShowPer = false;
			this.nowQer = '';
			if (xc.granted && xj.granted) {
			  this.openCamera();
			  return;
			}
			// 2. 显示权限说明弹窗
			const confirm = await this.showPermissionDialog(
			  '相机相册权限申请',
			  '我们需要访问您的相机以及相册以完成更换头像功能'
			);
			
			if (!confirm) return;
			
			// 3. 请求权限
			const result1 = await permissionUtils.requestPermission('photo_library', '我们需要访问您的相册以上传图片');
			const result2 = await permissionUtils.requestPermission('camera', '我们需要访问您的相机以上传图片');
			if (result1 && result2) {
			  this.openCamera();
			} else {
			  locationService.openAppSettings();
			  // uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
			}
		}
		
	  } catch (error) {
		console.error('权限处理出错:', error);
		uni.showToast({ title: '权限检查失败', icon: 'none' });
	  }
	},
	
	// 显示权限说明弹窗
	showPermissionDialog(title, content) {
	  return new Promise((resolve) => {
		uni.showModal({
		  title,
		  content,
		  confirmText: '去开启',
		  success(res) {
			resolve(res.confirm);
		  }
		});
	  });
	},
	
	// 打开相机
	async openCamera() {
	  this.isShowPer = false;
	  const result = await uploadImage.handleUpload(this.userInfo.id,1);
	  uni.hideLoading();
	  this.userInfo.head_photo = result;
	},
   //  chooseAvatar() {
	  
   //    uni.chooseImage({
   //      count: 1,
   //      sizeType: ['compressed'],
   //      sourceType: ['album', 'camera'],
   //      success: (res) => {
   //        this.userInfo.avatar = res.tempFiles[0].path;
   //        // TODO: 上传头像到服务器
		 //  request.uploadImage('/user/uploadphoto',res.tempFiles[0].path,{type: 'image'}).then(result=>{
			// if(result.message == '上传成功') {
			// 	uni.hideLoading();
			// 	this.userInfo.head_photo = result.path;
			// }
		 //  })
   //      }
   //    })
   //  },
    
    // 编辑昵称
    editNickname(e) {
      this.userInfo.username = e.detail.value;
    },
    
    // 选择性别
    chooseSex() {
      uni.showActionSheet({
        itemList: ['男', '女'],
        success: (res) => {
          this.userInfo.sex = [2, 1][res.tapIndex]
        }
      })
    },
    
    // 选择地区
    chooseLocation() {
	  this.showLocationPopupFlag = true;
      // uni.chooseLocation({
      //   success: (res) => {
      //     this.userInfo.location = res.address
      //   }
      // })
    },
    
    // 保存资料
    saveProfile() {
      uni.showLoading({
        title: '保存中...'
      })
	  const data = {
		username
	  }
	  let {username, head_photo, sex, dependency} = this.userInfo;
      request.post('/user/useryhupdate',{username, head_photo, sex, dependency}).then(res=>{
		uni.hideLoading()
		uni.showToast({
		  title: '保存成功！',
		  icon: 'none'
		})
		// 修改上一页页面信息
		const pages = getCurrentPages()
		const prevPage = pages[pages.length - 2]
		if (prevPage) {
		  prevPage.$vm.getUserInfo()
		}
	  })
    }
  }
}
</script>

<style>
.profile-page {
	
}
.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 999;
}
/* 列表样式 */
.profile-list {
  background-color: #FFFFFF;
  box-shadow: 0 4rpx 16rpx 0 rgba(210, 213, 224, 0.50);
  padding: 0 24rpx;
  box-sizing: border-box;
}

.profile-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}
.profile-item:last-child {
  border-bottom: none;
}

.item-label {
  font-size: 28rpx;
  color: #333333;
}

.item-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.item-value {
  font-size: 28rpx;
  color: #333333;
  /* margin-right: 16rpx; */
}

.avatar-content {
  height: 108rpx;
}

.avatar {
  width: 108rpx;
  height: 108rpx;
  border-radius: 54rpx;
  background-color: #333333;
}

/* .arrow-icon {
  width: 32rpx;
  height: 32rpx;
} */

/* 编辑按钮 */
.edit-btn {
  position: fixed;
  bottom: 24rpx;
  left: 60rpx;
  width: 630rpx;
  height: 96rpx;
  background: #E8101E;
  border-radius: 58rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-text {
  font-size: 40rpx;
  color: #FFFFFF;
}

.region-body {
  flex: 1;
  overflow: hidden;
}
.item-inp {
	text-align: right;
}
.picker-scroll {
  height: 400rpx;
}
.popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: relative;
  background-color: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.popup.show .popup-content {
  transform: translateY(0);
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.popup-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

.popup-close {
  font-size: 40rpx;
  color: #999999;
  padding: 16rpx;
}

.popup-body {
  max-height: 600rpx;
  overflow-y: auto;
}

.region-tabs {
  display: flex;
  border-bottom: 1rpx solid #EEEEEE;
  margin-bottom: 20rpx;
}

.region-tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666666;
  position: relative;
}

.region-tab.active {
  color: #E8101E;
  font-weight: 500;
}

.region-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #E8101E;
  border-radius: 2rpx;
}

.region-body {
  flex: 1;
  overflow: hidden;
}

.region-scroll {
  height: 100%;
}
.picker-scroll {
  height: 400rpx;
}
.picker-item {
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
}

.popup-footer {
  display: flex;
  margin-top: 32rpx;
}

.popup-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 16rpx;
}

.popup-btn.cancel {
  background-color: #F5F5F5;
}

.popup-btn.confirm {
  background: linear-gradient(90deg, #E8101E 0%, #FF618F 100%);
}

.popup-btn .btn-text {
  font-size: 32rpx;
  font-weight: 500;
}

.popup-btn.cancel .btn-text {
  color: #666666;
}

.popup-btn.confirm .btn-text {
  color: #FFFFFF;
}
/* #ifdef APP-PLUS */
/* .permission {
	padding-top: calc(var(--status-bar-height) + 88rpx + 20rpx)
} */
.permission.transform {
	top: calc(var(--status-bar-height) + 88rpx + 20rpx);
	opacity: 1;
	visibility: visible;
}
/* #endif */
/* 平台适配 */
/* #ifdef H5 */
.profile-page {
  padding-bottom: env(safe-area-inset-bottom);
}

/* #endif */

/* #ifdef MP-WEIXIN */
.custom-nav {
  padding-top: calc(var(--status-bar-height) + constant(safe-area-inset-top));
  padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
}
/* #endif */
</style> 