<template>
	<Header :title="title"></Header>
	<view class="edit-profile" :style="{ height: `calc(100vh - ${appStore.headerStyle.height}px)`, backgroundColor: themeStore.bgColor }">
		<view class="edit-profile-body" :style="{ backgroundColor: themeStore.lightBgColor }">
			<template v-if="fieldName == 'birthday'">
				<view class="edit-profile-birthday">
					<view
						class="edit-profile-birthday-item"
						:style="{ backgroundColor: themeStore.birthdayItemBgColor, borderColor: themeStore.birthdayItemBorderColor }"
						@click="showSelectList('month')"
					>
						<view class="edit-profile-birthday-item-content">
							<view :style="{ color: birthday.month != '' ? themeStore.text.inputColor : themeStore.text.noValueColor }" class="edit-profile-birthday-item-value">
								{{ birthday.month == '' ? 'Month' : birthday.month }}
							</view>
							<theme-image v-if="birthday.month != ''" class="launch-image-size" src="@/static/account/icon/right.png"></theme-image>
						</view>
					</view>
					<view class="edit-profile-birthday-item" :style="{ backgroundColor: themeStore.birthdayItemBgColor, borderColor: themeStore.birthdayItemBorderColor }">
						<view class="edit-profile-birthday-item-content">
							<!-- <view :class="birthday.day != '' ? 'edit-profile-birthday-item-value' : 'edit-profile-birthday-item-novalue'">
								{{ birthday.day == '' ? 'Day' : birthday.day }}
							</view>
							<theme-image v-if="birthday.day != ''" class="launch-image-size" src="@/static/account/icon/right.png"></theme-image> -->
							<input
								v-model="birthday.day"
								type="number"
								:style="{ color: themeStore.text.inputColor }"
								:placeholder-style="JSON.stringify({ color: themeStore.text.placeholderColor })"
								maxlength="2"
								placeholder="Day"
								class="edit-profile-birthday-item-input"
							/>
						</view>
					</view>

					<view class="edit-profile-birthday-item" :style="{ backgroundColor: themeStore.birthdayItemBgColor, borderColor: themeStore.birthdayItemBorderColor }">
						<view class="edit-profile-birthday-item-content">
							<!-- <view :class="birthday.year != '' ? 'edit-profile-birthday-item-value' : 'edit-profile-birthday-item-novalue'">
								{{ birthday.year == '' ? 'Year' : birthday.year }}
							</view> -->
							<input
								v-model="birthday.year"
								type="number"
								:style="{ color: themeStore.text.inputColor }"
								:placeholder-style="JSON.stringify({ color: themeStore.text.placeholderColor })"
								maxlength="4"
								placeholder="Year"
								class="edit-profile-birthday-item-input"
							/>
							<!-- <picker
								mode="date"
								@change="dateChange"
							>
								Year
							</picker> -->
							<!-- <theme-image v-if="birthday.year != ''" class="launch-image-size" src="@/static/account/icon/right.png"></theme-image> -->
						</view>
					</view>
				</view>
				<view class="tip" :style="{ color: themeStore.text.tip }">cannot be modifed once set</view>
				<view class="list" v-if="selectVisible" :style="[dynamicStyle, { backgroundColor: themeStore.list.bgColor, borderColor: themeStore.list.borderColor }]">
					<view class="list-content">
						<view
							class="list-item"
							:style="{ color: birthday[selectType] == item ? themeStore.text.selectItemActiveColor : themeStore.text.selectItemColor }"
							v-for="(item, index) in selectList"
							:key="index"
							@click="selectMonthCheck(item, index)"
						>
							{{ item }}
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="edit-profile-other">
					<view class="edit-profile-other-input" :style="{ backgroundColor: themeStore.birthdayItemBgColor, borderColor: themeStore.itemBorderColor }">
						<input class="other-input" :style="{ color: themeStore.text.inputColor }" type="text" v-model="inputValue" />
						<theme-image @click="clearInput" src="@/static/account/icon/clear.png" class="clear-image"></theme-image>
					</view>
				</view>
			</template>
			<view class="submit-btn" :style="{ background: themeStore2.theme.button.normal, color: themeStore2.theme.button.textNormal }" @click="submit">{{ $t('account.button.save') }}</view>
		</view>
	</view>
</template>

<script setup>
import Header from '../Header/Header.vue';
import { ref, onMounted, getCurrentInstance, reactive } from 'vue';
import { DayList, MonthList, YearList } from '../../constants/birthday.js';
import { editNickNameApi, editProfileApi } from '@/api/account.js';
import { convertBirthday } from '@/module/utils/convertBirthday.js';
import { useAppStore } from '@/store/useAppStore';
import { useUserStore } from '@/store/useUserStore.js'
import { useI18n } from 'vue-i18n';
import { useThemeStore } from '@/store/useThemeStore';

const themeStore2 = useThemeStore()
const themeStore = useThemeStore().theme.account.profileEdit;
const { t } = useI18n();
const appStore = useAppStore();
const userStore = useUserStore()

let title = ref('');
let fieldName = ref('');
// 修改生日相关参数
let dynamicStyle = reactive({
	top: 0,
	left: 0,
	height: 0
});
let selectVisible = ref(false);
let selectType = ref('');
let selectList = ref([]);
let birthday = reactive({
	day: '',
	month: t('account.month.January'),
	year: '',
	monthIndex: 0
});
// 修改其他参数
let inputValue = ref('');
/**
 * 清空输入框
 */
const clearInput = () => {
	inputValue.value = '';
};
/**
 * 选中生日项
 */
const selectMonthCheck = (value, index) => {
	birthday.month = value;
	birthday.monthIndex = index;
	selectVisible.value = false;
};
/**
 * 修改After高度，实现动画效果
 */
const showSelectList = (type) => {
	selectVisible.value = !selectVisible.value;
	selectType.value = type;

	if (type == 'month') {
		selectList.value = MonthList;
		dynamicStyle.top = '158rpx';
		dynamicStyle.left = '40rpx';
		dynamicStyle.height = '0rpx';
	}

	setTimeout(() => {
		dynamicStyle.height = '741rpx';
	}, 0.5);
};
/**
 * 修改昵称
 */
const editNickName = async () => {
	const { code, data } = await editNickNameApi({
		[fieldName.value]: inputValue.value
	});
	if (code == 200) {
		uni.navigateBack()
	}
};
/**
 * 修改用户信息
 */
const editProfile = async (value) => {
	const { code, data } = await editProfileApi({
		[fieldName.value]: value
	});
	if (code == 200) {
		uni.navigateBack()
	}
};
/**
 * 保存按钮点击
 */
const submit = async () => {
	if (fieldName.value == 'nikeName') {
		editNickName();
		return;
	}
	if (fieldName.value == 'birthday') {
		
		let month = birthday.monthIndex + 1 > 9 ? birthday.monthIndex + 1 : '0' + (birthday.monthIndex + 1);
		let params = birthday.year + month + birthday.day;
		editProfile(params);
		return;
	} else {
		editProfile(inputValue.value);
	}
};
onMounted(() => {
	const instance = getCurrentInstance().proxy;
	const eventChannel = instance.getOpenerEventChannel();
	eventChannel.on('getProfileItem', function (data) {
		title.value = data.name;
		fieldName.value = data.fieldName;
		if (data.fieldName == 'birthday') {
			if (data.fieldNameValue != '') {
				let { year, day, month, monthIndex } = convertBirthday(data.fieldNameValue);
				birthday.monthIndex = monthIndex;
				birthday.day = day;
				birthday.year = year;
				birthday.month = month;
				
			}
		} else {
			inputValue.value = data.fieldNameValue;
		}
	});
});
</script>

<style lang="scss" scoped>
$after-height: 0rpx;
.edit-profile {
	width: 100vw;
	// height: calc(100vh - 88rpx);
	// background: #2c0303;
	box-sizing: border-box;
	padding-top: 10rpx;
	.edit-profile-body {
		height: 100%;
		// background: #610606;
		box-sizing: border-box;
		padding: 60rpx 25rpx 0 25rpx;
		position: relative;
		.tip {
			font-size: 24rpx;
			// color: #ffde01;
			margin-top: 67rpx;
		}
		.list {
			width: 197rpx;
			height: 0rpx;
			// background: #7d1616;
			border-radius: 10rpx;
			border: 2px solid;
			position: absolute;
			overflow: hidden;
			transition: height 0.5s ease;
			.list-content {
				width: 100%;
				height: 100%;
				overflow-y: auto;
				display: flex;
				justify-content: flex-start;
				flex-direction: column;
				box-sizing: border-box;
				padding: 10rpx 0;
				text-align: center;
				.list-item {
					height: 60rpx;
					// color: #fff;
					line-height: 60rpx;
					font-size: 24rpx;
				}
				.list-item-active {
					// color: #ffde00;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 24rpx;
				}
			}
		}
		.edit-profile-birthday {
			width: 100%;
			display: flex;
			justify-content: space-between;
			.edit-profile-birthday-item {
				width: 228rpx;
				height: 80rpx;
				// background: #3d0303;
				border-radius: 20rpx;
				border: 1px solid;
				.edit-profile-birthday-item-content {
					width: 100%;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					align-items: center;
					font-size: 24rpx;

					line-height: 80rpx;
					text-align: center;
					padding-right: 12rpx;
					.edit-profile-birthday-item-value {
						width: calc(100% - 24rpx);
						// color: #fff;
					}
					.edit-profile-birthday-item-novalue {
						width: 100%;
						// color: #963333;
					}

					// .uni-input-placeholder {
					// 	// color: #963333;
					// }

					.edit-profile-birthday-item-input {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						// color: #fff;
						border: none;
						outline: none;
					}
					.launch-image-size {
						width: 12rpx;
						height: 22rpx;
					}
				}
			}
		}
		.edit-profile-other {
			width: 100%;
			.edit-profile-other-input {
				width: 100%;
				// background: #3d0303;
				border-radius: 20rpx;
				height: 90rpx;
				border: 3px solid;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.other-input {
					width: calc(100% - 73rpx);
					height: 90rpx;
					border: none;
					outline: none;
					box-shadow: none;
					box-sizing: border-box;
					padding-left: 30rpx;
					font-size: 30rpx;
					line-height: 90rpx;
					color: #fff;
				}
				.clear-image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.submit-btn {
			width: 100%;
			height: 90rpx;
			// background: linear-gradient(-90deg, #f78b22, #e34e04);
			border-radius: 45rpx;
			margin-top: 37rpx;
			text-align: center;
			line-height: 90rpx;
			// color: #fff;
			font-size: 36rpx;
		}
	}
}
</style>
