<template>
	<slot :showDetailDialog="showDetailDialog"></slot>
	<uni-popup ref="alertDialog" :isMaskClick="false">
		<view class="detailModal">
			<uni-icons type="closeempty" size="17" class="closeIcon" @click="closeDetailDialog"></uni-icons>
			<view class="detailContent">
				<view class="title">{{ $t('home.verificationSteps.title') }}</view>
				<view class="desc">{{ $t('home.verificationSteps.desc') }}</view>
				<view class="steps">
					<uni-steps :options="stepList" :active="-1" active-color="#007AFF" direction="column" />
				</view>
				<view class="primaryButton startNow" @click="toComplete">
					{{ $t('home.verificationSteps.startNow') }}
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	name: 'DetailModal',
	props: {
		visible: {
			type: Boolean,
			required: true,
			default: false
		}
	},
	data() {
		return {
			stepList: [
				{
					title: this.$t('home.verificationSteps.step1.title'),
					desc: this.$t('home.verificationSteps.step1.desc')
				},
				{
					title: this.$t('home.verificationSteps.step2.title'),
					desc: this.$t('home.verificationSteps.step2.desc')
				},
				{
					title: this.$t('home.verificationSteps.step3.title'),
					desc: this.$t('home.verificationSteps.step3.desc')
				},
				{
					title: this.$t('home.verificationSteps.step4.title'),
					desc: this.$t('home.verificationSteps.step4.desc')
				}
			]
		};
	},
	methods: {
		toVerifyPage() {},
		showDetailDialog() {
			this.$refs.alertDialog.open();
		},
		closeDetailDialog() {
			this.$refs.alertDialog.close();
		},
		toComplete() {
			this.closeDetailDialog()
			uni.navigateTo({ url: '/pages/user/index' });
		}
	}
};
</script>

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