<template>
	<view class="content">
		<!-- #ifdef APP -->
		<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="left: 20rpx;"></text>
		<!-- #endif -->
		
		<view class="header">
			<view class="headportrait" @click="uploadAvatar()">
				<image :src="optionForm.headPicture ? optionForm.headPicture  :companyLogo" mode="widthFix"></image>
			</view>
		</view>
<!-- 		<view class="linechart">
			<echarts ref="echart" :option="option" style="height: 300px;"></echarts>
		</view> -->
		<view class="band">
			<view class="contentItem">
				<text class="left">姓名</text>
				<input 
					class="user-input" 
					v-model="optionForm.realName" 
					type="text" 
					placeholder="请输入姓名" 
					maxlength="10" 
				/>
				
			</view>
			<view class="contentItem">
				<text class="left">昵称</text>
				<input class="user-input" v-model="optionForm.nickName" maxlength="10" type="text"
					placeholder="请输入2~10个字符" />
			</view>
		<!-- 	<view class="contentItem">
				<text>个人简介</text>
				<textarea class="user-textarea" v-model="optionForm.userDescription" placeholder="请输入个人简介"></textarea>
			</view> -->
		</view>
		<view class="footer">
			<button class="user-button" @tap="submitinfo">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		CommonUpload
	} from '@/util/uploaderFile'
	import Echarts from '@/components/charts/charts.vue'
	import EchartsEl from '@/components/echarts/echarts-el.vue'
	import api from "@/api/api";
	import common from '../../common/common';
	import {companyInfo} from "@/environments/environment";
	import dataHandling from "@/util/dataHandling";
	export default {
		data() {
			return {
				isComposing: false,
				// 敏感词列表（可扩展）
				bannedWords: ["admin", "test", "root", "password"],
				companyType : companyInfo.companyType,
				companyLogo : '../../static/logo2.png',
				dataForm: {
					loginId: "1",
					targetType: "5",
					targetId: "1",
					targetNo: "6",
					targetUseFor: "12",
					targetSeq: "0"
				},
				optionForm: {},
				option :{
				  xAxis: {
				    type: 'category',
				    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				  },
				  yAxis: {
				    type: 'value'
				  },
				  series: [
				    {
				      data: [120, 200, 150, 80, 70, 110, 130],
				      type: 'bar',
				      showBackground: true,
				      backgroundStyle: {
				        color: 'rgba(180, 180, 180, 0.2)'
				      }
				    }
				  ]
				}
			}
		},
		components: {
			Echarts,
			EchartsEl
		},
		onLoad(options) {
			if(this.companyType == '1'){
				this.companyLogo='../../static/myteam/Group1633.png';
			}else if(this.companyType == '2'){
				this.companyLogo='../../static/logo2.png';
			}
			this.optionForm = JSON.parse(options.customerBasicInfo)
		},
		methods: {
			handleKeyDown(e) {
				console.log('this.isComposing',this.isComposing);
			    const key = e.key;
			    if (this.isComposing || ["Backspace", "Delete", "ArrowLeft", "ArrowRight"].includes(key)) return;
			    if (!/^[a-zA-Z0-9\u4e00-\u9fa5]$/.test(key)) {
			      e.preventDefault();
			      uni.showToast({ title: "请输入汉字", icon: "none" });
			    }
			  },
			 handleInput(e) {
				 if (this.isComposing) return; // 正在输入拼音，不处理
			      let value = e.detail.value;
			
			      // 1. 过滤特殊字符（仅允许英文、数字、汉字）
			      value = value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, "");
				  
			
			      // 2. 检查敏感词
			      const hasBannedWord = this.bannedWords.some(word => 
			        value.toLowerCase().includes(word.toLowerCase())
			      );
			      if (hasBannedWord) {
			        uni.showToast({
			          title: "包含敏感词汇，请修改",
			          icon: "none"
			        });
			        value = value.replace(new RegExp(this.bannedWords.join("|"), "gi"), "");
			      }
			
			      // 3. 限制长度（20字符）
			      if (value.length > 20) {
			        value = value.slice(0, 20);
			        uni.showToast({
			          title: "最多输入20个字符",
			          icon: "none"
			        });
			      }
			
			      // 4. 更新数据
			      this.optionForm.realName = value;
				  this.$nextTick(() => this.optionForm.realName = value); // iOS 兼容
			    },
			handleCompositionEnd(e) {
			    this.isComposing = false;
			    this.handleInput(e); // 拼音输入结束，检查内容
			  },
			
			
			
			goBack() {
				let back = getCurrentPages();
				if (back && back.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			uploadAvatar(event) {
				let that = this;
				CommonUpload(that.dataForm).then(res => {
					this.optionForm.headPicture = res.data.filePath
				})
			},
			// 修改个人资料接口
			submitinfo() {
				if(!this.optionForm.realName || this.optionForm.realName.length <= 0){
					uni.showToast({title: '请填写真实姓名',duration: 2000,icon: 'none'});
					return;
				}else if (!common.nameValid(this.optionForm.realName)) {
					let that = this;
					uni.showToast({title: '请填写真实姓名',duration: 2000,icon: 'none'});
					this.optionForm.realName = ''
					return
				}else if (this.optionForm.nickName&&this.optionForm.nickName.length<2) {
					uni.showToast({title: '昵称为2~10个字符',duration: 2000,icon: 'none'});
					return
				}else{
					this.saveUserInfo();
				}
			},
			saveUserInfo(){
				let UserRequestVO = {
					id: uni.getStorageSync('cffp_userId'),
					realName: this.optionForm.realName,
					nickName: this.optionForm.nickName,
					headPicture: this.optionForm.headPicture,
					userDescription: this.optionForm.userDescription
				}
				api.updateinfo(UserRequestVO).then(res => {
					if (res.success) {
						uni.showToast({title: '修改成功',duration: 2000,icon: 'none'});
						dataHandling.pocessTracking(
						  '个人资料',
						  `成功修改个人资料`,
						  '点击',
						  2,
						  '个人资料',
						  'pages/personalCenter/user-information'
						)
						uni.$emit("handClick", {data: this.optionForm});
						setTimeout(() => {
							uni.navigateBack({delta: 1});
						}, 1000)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.input-tip {
	  color: #ff5a5f;
	  font-size: 12px;
	  margin-left: 10px;
	}
	.content {
		padding-top: 20rpx;
		width: 100vw;
	}

	.user-input {
		text-align: right;
		padding-right: 15rpx;
		flex: 1;
	}

	.user-textarea {
		border: 1px solid #C7C7C7;
		width: 540rpx;
		height: 270rpx;
		border-radius: 10rpx;
	}

	.band {
		margin: 0 20rpx;
		font-size: 26rpx;
	}

	.header {
		display: flex;
		justify-content: center;
	}

	.headportrait {
	  width: 200rpx;
	  height: 200rpx;
	  border-radius: 50%;
	  overflow: hidden;
	  position: relative;
	  /* 添加以下属性强制硬件加速 */
	  transform: translateZ(0);
	  -webkit-transform: translateZ(0);
	  backface-visibility: hidden;
	  -webkit-backface-visibility: hidden;
	}
	
	.headportrait image {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  /* 同样为图片添加硬件加速 */
	  transform: translateZ(0);
	  -webkit-transform: translateZ(0);
	}

	/* 	.headportrait-img {
		width: 260rpx;
		height: 260rpx;
		border-radius: 50%;
	    background-size: cover;
	    background-repeat: no-repeat center;
	} */
	.contentItem {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #E4E4E4;
		padding: 20rpx;
		.left{
			width: 120rpx;
		}
	}

	.footer {
		width: 500rpx;
		height: 80rpx;
		opacity: 1;
		margin: 80rpx auto;
	}

	.user-button {
		color: #FFFFFF;
		background: #20269B;
		border-radius: 80px;
	}
</style>
