<template>
	<view>
		<view class="authStatusList">
			<view :class="[authStatus.email==0 ? 'authStatusItem' : 'authStatusItemDisable', selectedItem === 'email' ? 'active' : '']" @click="handleSelect('email')">
				<view class="left">
					<image class="icon" src="/static/user/email.svg" mode="aspectFit"></image>
					<text>1.{{ $t('form.personalData.personalInformation.verifyEmail') }}</text>
				</view>
				<view class="right">
					<image class="icon" :src="authStatusMap.email?.[authStatus?.email]?.icon" mode="aspectFit"></image>
					<text class="text" :style="{ color: authStatusMap.email?.[authStatus?.email]?.color }">{{ authStatusMap.email?.[authStatus?.email]?.label }}</text>
				</view>
			</view>
			<view :class="[authStatus.email == 1 ? 'authStatusItem' : 'authStatusItemDisable', selectedItem === 'userInfo' ? 'active' : '']" @click="handleSelect('userInfo')">
				<view class="left">
					<image class="icon" src="/static/user/userInfo.svg" mode="aspectFit"></image>
					<text>2.{{ $t('form.personalData.personalInformation.completePersonalInfo') }}</text>
				</view>
				<!-- 		<view class="right">
						<image class="icon" src="/static/smallSuccess.png" mode="aspectFit"></image>
						<text class="text">已验证</text>
					</view> -->
			</view>
			<view :class="[authStatus.email == 1 && ifImprove == 1 ? 'authStatusItem' : 'authStatusItemDisable', selectedItem === 'identity' ? 'active' : '']" @click="handleSelect('identity')">
				<view class="left">
					<image class="icon" src="/static/user/IDCard.svg" mode="aspectFit"></image>
					<text>3.{{ $t('form.personalData.personalInformation.identityVerification') }}</text>
				</view>
				<view class="right">
					<image class="icon" :src="authStatusMap.identity?.[authStatus?.identity]?.icon" mode="aspectFit"></image>
					<text class="text" :style="{ color: authStatusMap.identity?.[authStatus?.identity]?.color }">{{ authStatusMap.identity?.[authStatus?.identity]?.label }}</text>
				</view>
			</view>
			<view :class="[authStatus.email == 1 && ifImprove == 1 ? 'authStatusItem' : 'authStatusItemDisable', selectedItem === 'address' ? 'active' : '']" @click="handleSelect('address')">
				<view class="left">
					<image class="icon" src="/static/user/position.svg" mode="aspectFit"></image>
					<text>4.{{ $t('form.personalData.personalInformation.residentialVerification') }}</text>
				</view>
				<view class="right">
					<image class="icon" :src="authStatusMap.address?.[authStatus?.address]?.icon" mode="aspectFit"></image>
					<text class="text" :style="{ color: authStatusMap.address?.[authStatus?.address]?.color }">{{ authStatusMap.address?.[authStatus?.address]?.label }}</text>
				</view>
			</view>
		</view>
		<!-- <view>
			<button class="primaryButton" v-show="getBtnVisible()" :disabled="getBtnDisabled()" @click="handleCheckOrComplete">
				{{ getBtnText() }}
			</button>
		</view> -->
		<view class="stepsWrapper">
			<view class="steps">
				<view :class="['stepItem', currentStep >= 1 ? 'active' : '']"></view>
				<view :class="['stepItem', currentStep >= 2 ? 'active' : '']"></view>
				<view :class="['stepItem', currentStep >= 3 ? 'active' : '']"></view>
			</view>
			<text>{{ $t('form.personalData.personalInformation.progress') + `${completePercent}` }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'PersonalInformation',
	props: {
		authStatus: {
			type: Object,
			required: true,
			default: () => ({})
		},
    ifImprove:{
      type: Number,
      required: true,
      default: 0
    }
	},
	data() {
		return {
			authStatusMap: {
				address: {
					0: {
						label: this.$t('form.personalData.personalInformation.notVerified'),
						icon: '/static/smallWarning.png',
						color: '#FF5733',
						proven: false,
						btnText: this.$t('form.verifyNow'),
						btnDisabled: false,
						btnVisible: true
					},
					1: {
						label: this.$t('form.personalData.personalInformation.verified'),
						icon: '/static/smallSuccess.png',
						color: '#14CC9E',
						proven: true,
						btnText: this.$t('common.view'),
						btnDisabled: false,
						btnVisible: true
					},
					2: {
						label: this.$t('form.personalData.personalInformation.underReview'),
						icon: '/static/smallSuccess.png',
						color: '#14CC9E',
						proven: false,
						btnText: this.$t('form.verifyNow'),
						btnDisabled: true,
						btnVisible: true
					}
				},
				email: {
					0: {
						label: this.$t('form.personalData.personalInformation.notVerified'),
						icon: '/static/smallWarning.png',
						color: '#FF5733',
						proven: false,
						btnText: this.$t('form.verifyNow'),
						btnDisabled: false,
						btnVisible: true
					},
					1: {
						label: this.$t('form.personalData.personalInformation.verified'),
						icon: '/static/smallSuccess.png',
						color: '#14CC9E',
						proven: true,
						btnText: this.$t('common.view'),
						btnDisabled: false,
						btnVisible: false
					}
				},
				userInfo: {
					0: {
						label: this.$t('form.personalData.personalInformation.notVerified'),
						icon: '/static/smallWarning.png',
						color: '#FF5733',
						proven: false,
						btnText: this.$t('form.verifyNow'),
						btnDisabled: true,
						btnVisible: true
					},
					1: {
						label: this.$t('form.personalData.personalInformation.verified'),
						icon: '/static/smallSuccess.png',
						color: '#14CC9E',
						proven: true,
						btnText: this.$t('common.view'),
						btnDisabled: false,
						btnVisible: true
					}
				},
				identity: {
					0: {
						label: this.$t('form.personalData.personalInformation.notVerified'),
						icon: '/static/smallWarning.png',
						color: '#FF5733',
						proven: false,
						btnText: this.$t('form.verifyNow'),
						btnDisabled: false,
						btnVisible: true
					},
					1: {
						label: this.$t('form.personalData.personalInformation.verified'),
						icon: '/static/smallSuccess.png',
						color: '#14CC9E',
						proven: true,
						btnText: this.$t('common.view'),
						btnDisabled: false,
						btnVisible: true
					},
					2: {
						label: this.$t('form.personalData.personalInformation.underReview'),
						icon: '/static/smallSuccess.png',
						color: '#14CC9E',
						proven: false,
						btnText: this.$t('form.verifyNow'),
						btnDisabled: true,
						btnVisible: true
					}
				}
			},
			selectedItem: 'email'
		};
	},
	computed: {},
	methods: {
		back() {
			uni.navigateBack();
		},
		getBtnDisabled() {
      if ((this.selectedItem === 'identity' || this.selectedItem === 'address') && this.ifImprove == 0){
        return true;
      }
			if (this.selectedItem === 'email' || (this.authStatus.email == 1)) {
				if (this.selectedItem === 'address' && this.authStatus.identity == 0) {
					return true;
				}
				return this.authStatusMap[this.selectedItem]?.[this.authStatus?.[this.selectedItem]]?.disabled ?? false;
			} else {
				return true;
			}
		},
		getItemDisabled(item) {
			if (this.selectedItem === 'email' || this.authStatus.email == 1) {
				if (this.selectedItem === 'address' && this.authStatus.identity == 0) {
					return true;
				}
				return this.authStatusMap[this.selectedItem]?.[this.authStatus?.[this.selectedItem]]?.disabled ?? false;
			} else {
				return true;
			}
		},
		getBtnVisible() {
			return this.authStatusMap[this.selectedItem]?.[this.authStatus?.[this.selectedItem]]?.btnVisible ?? true;
		},
		getProven() {
			return this.authStatusMap[this.selectedItem]?.[this.authStatus?.[this.selectedItem]]?.proven ?? false;
		},
		getBtnText() {
			return this.authStatusMap[this.selectedItem]?.[this.authStatus?.[this.selectedItem]]?.btnText ?? this.$t('common.view');
		},
		handleCheckOrComplete() {
			uni.navigateTo({
				url: `/pages/user/personalInformation/${this.selectedItem}/index?proven=${this.getProven()}&authStatus=${JSON.stringify(this.authStatus)}`
			});
		},
		handleSelect(val) {
			this.selectedItem = val;
			if (this.getBtnVisible() && !this.getBtnDisabled()) {
				this.handleCheckOrComplete()
			}
		}
	},
	computed: {
		currentStep() {
			const keys = Object.keys(this.authStatus);
			return keys.filter((key) => this.authStatus[key] === 1).length;
		},
		completePercent() {
			const keys = Object.keys(this.authStatus);
			return `${keys.filter((key) => this.authStatus[key] === 1).length} / ${keys.length}`;
		}
	}
};
</script>

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