<template>
	<view class="configPopup">
		<uv-popup ref="popup" :round="30" :closeOnClickOverlay="!required">
			<view class="content" v-if="required">
				<scroll-view 
				id="scrollView" 
				scroll-y="true" 
				:scroll-top="scrollTop"
				style="height: 100%;">
					<rich-text :nodes="content"></rich-text>
					
					<!-- <view class="uv-parse"
					v-html="content">
					</view> -->
					
					<view class="uni-color-btn" @click="success">
						下一步
					</view>
				</scroll-view>
			</view>
			<view class="content" v-else>
				<rich-text :nodes="text || content"></rich-text>
				<!-- <uv-parse :content="text || content"></uv-parse> -->
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'configPoup',
		props: {
			text: {
				default: ''
			},
			keys: {
				default: [],
			},
			required: {
				default: false,
			},
		},
		data() {
			return {
				content: '',
				index: 0,
				scrollTop : 0,
			}
		},
		created() {
			uni.$on('initConfig', data => {
				this.content = data[this.keys[this.index]]
			})
		},
		methods: {

			//打开配置信息菜单
			open(key) {
				this.content = this.configList[key]
				this.$refs.popup.open('bottom');
			},
			openkeys() {
				this.index = 0
				this.content = this.configList[this.keys[this.index]]
				this.$refs.popup.open('bottom');
			},
			success() {
				console.log('click success');
				if (this.index == this.keys.length - 1) {
					this.$emit('success')
					this.$refs.popup.close();
					return
				}
				this.index++
				this.content = this.configList[this.keys[this.index]]
				
				this.scrollTop = 100
				
				this.$nextTick(res => {
					this.scrollTop = 0
				})

			},
		},

		computed: {
			...mapState(['configList'])
		}
	}
</script>

<style lang="scss" scoped>
	.configPopup {
		.content {
			padding: 30rpx 20rpx;
			overflow: scroll;
			height: 50vh;
			box-sizing: border-box;
			.uv-parse{
				width: 100%;
			}
		}
	}
</style>