<!-- 个人信息 -->
<template>
	<view class="aircraft-setting">
		<view class="setting-item">
			<text><text>*</text>姓名</text>
			<u-input v-model.trim="form.name" input-align="right" 
			placeholder="请输入姓名" :clearable="false" />
		</view>
		<view class="setting-item">
			<text><text>*</text>手机号码</text>
			<u-input v-model.number="form.phone" input-align="right" 
			placeholder="请输入手机号码" type="number" :clearable="false" />
		</view>
		<view class="setting-item">
			<text><text>*</text>区域</text>
			<u-input v-model="form.areaName" input-align="right" @click="handleClickPick('区域')"
			placeholder="请选择区域" type="select" :clearable="false" />
		</view>
		<view class="setting-item">
			<text>景区</text>
			<u-input v-model="form.scenicName" input-align="right" @click="handleClickPick('景区')"
			placeholder="请选择景区" type="select" :clearable="false" />
		</view>
		<view class="setting-item">
			<text>入职时间</text>
			<u-input v-model="form.hireDate" input-align="right" @click="showTime=true"
			placeholder="请选择入职时间" type="select" :clearable="false" />
		</view>
		<view class="setting-save" @click="submit">保存</view>
		<u-picker mode="selector" v-model="show" :default-selector="getDefaultSelector" :range="pickTitle==='区域'?areas:scenics" 
		range-key="name" confirm-color="#f7c04d" :title="pickTitle+'选择'" @confirm="handleChangePick"></u-picker>
		<u-picker mode="time" v-model="showTime" :params="params" confirm-color="#f7c04d" title="入职时间选择" 
		@confirm="handleChangeTime" :default-time="form.hireDate"></u-picker>
		<u-toast ref="uToast"></u-toast>
		<Loading :show="loading" />
	</view>
</template>

<script>
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	data() {
		return {
			loading: true, // 加载
			form:{
				name: '',
				phone: '',
				areaId: '',
				areaName: '',
				scenicId: '',
				scenicName: '',
				hireDate: ''
			},
			// 入职时间选择显示参数
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: true
			},
			// 区域列表
			areas:[],
			// 景区列表
			scenics: [],
			// 选择器标题
			pickTitle: '区域',
			// 显示选择器
			show: false,
			// 显示时间选择器
			showTime: false,
			// 用户信息
			userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
			isPilot: this.$store.state.user_type == 1,
		}
	},
	computed:{
		// 获取选择器默认值
		getDefaultSelector(){
			const isArea = this.pickTitle === '区域';
			const arr = isArea ? this.areas : this.scenics;
			const index = this.form[isArea?'areaId':'scenicId'];
			return index?[arr.findIndex(item=>item.id === index)]:[0];
		}
	},
	created() {
		this.$nextTick(()=>{
			this.init();
		});
	},
	methods: {
		// 初始化
		async init(){
			let resp = await this.$api.aSelfDetail(this.userMessage.id);
			let res = await this.$api.allAreas();
			if(res.isError){
				this.$refs.uToast.show({type: 'error',title: "区域获取失败!"});
			}else{
				this.areas = res || [];
			}
			if(resp.isError){
				this.$refs.uToast.show({type: 'error',title: "个人信息获取失败!"});
			}else{
				this.form = resp;
				if(resp.areaId){
					let resx = await this.$api.allScenicsByAreaId({areaId: this.form.areaId});
					this.scenics = resx.isError ? [] : resx;
				}
			}
		},
		// 时间选择
		handleChangeTime({year,month,day,hour,minute,second}){
			this.form.hireDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
		},
		// 选择器值改变
		async handleChangePick(index){
			if(this.pickTitle === '区域'){
				const val = this.areas[index[0]];
				if(val.id === this.form.areaId) return;
				this.form.areaId = val.id;
				this.form.areaName = val.name;
				this.form.scenicName = '';
				this.form.scenicId = '';
				let res = await this.$api.allScenicsByAreaId({areaId: val.id});
				if(res.isError){
					this.$refs.uToast.show({type: 'error',title: "景区获取失败!"});
				}else{
					this.scenics = res || [];
				}
			}else{
				const val = this.scenics[index[0]];
				this.form.scenicName = val.name;
				this.form.scenicId = val.id;
			}
		},
		// 点击下拉选择
		handleClickPick(title){
			if(title === '景区' && !this.form.areaId){
				this.$refs.uToast.show({type: 'warning',title: "请选择区域！"});
				return;
			}
			this.show = true;
			this.pickTitle = title;
		},
		// 提交申请
		async submit(){
			const { name, phone, areaId } = this.form;
			if(!name){
				this.$refs.uToast.show({type: 'warning',title: "请填写姓名！"});
				return;
			}else if(!phone||!this.$u.test.mobile(phone)){
				this.$refs.uToast.show({type: 'warning',title: "手机号格式错误！"});
				return;
			}else if(!areaId){
				this.$refs.uToast.show({type: 'warning',title: "请选择区域！"});
				return;
			}else{
				try{
					this.loading = true;
					delete this.form.password;
					let res = await this.$api.aEditSelf(this.form);
					console.log('res',res);
					if(res.isError){
						this.$refs.uToast.show({type: 'error',title: res.message || "个人信息修改失败！"});
						return;
					}
					this.$refs.uToast.show({type: 'success',title: "个人信息修改成功！"});
					this.init();
				}catch(e){
					this.$refs.uToast.show({type: 'error',title: "个人信息修改失败！"});
				}finally{
					this.loading = false;
				}
			}
		},
	},
	onLoad(options) {
		try{
			this.form = JSON.parse(this.$store.state.user_message);
		}catch(e){
			this.form = {};
		}finally{
			this.loading = false;
		}
	},
}
</script>

<style scoped lang="scss">
.aircraft-setting {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	.setting-item{
		padding: 24rpx 0;
		margin: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #EBEDF0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		text{
			text{
				margin-bottom: -20rpx;
				color: #FE020E;
				font-size: 32rpx;
				margin-right: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
			}
		}
	}
	.setting-save{
		margin: auto 32rpx 52rpx;
		border-radius: 40rpx;
		background: #FBCB11;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #020202;
		padding: 22rpx 0;
		&:active{
			margin: auto 42rpx 52rpx;
			padding: 18rpx 0;
			opacity: 0.8;
		}
	}
}
</style>