<template>
	<el-form
		ref="form"
		label-width="80px"
		element-loading-background="rgba(0, 0, 0, 0.8)"
	>
		<el-form-item
			label="当前弹窗"
		>
			<el-select v-model="comp.popupType">
				<el-option value="" label="无"></el-option>
				<el-option value="error" label="错误弹窗"></el-option>
				<el-option value="winning1" label="特等奖"></el-option>
				<el-option value="winning2" label="一等奖"></el-option>
				<el-option value="winning3" label="二等奖"></el-option>
				<el-option value="winning4" label="三等奖"></el-option>
				<el-option value="winning5" label="2元换购"></el-option>
				<el-option value="rule" label="活动规则"></el-option>
				<el-option value="register" label="注册弹窗"></el-option>
			</el-select>
		</el-form-item>
		<form-item-list :form-item-list="filterProps()"></form-item-list>
		<el-collapse v-model="activeNames">
			<el-collapse-item v-for="(groupItem,index) in group" :title="groupItem" :name="index" :key="groupItem">
				<form-item-list :form-item-list="filterProps(groupItem)"></form-item-list>
			</el-collapse-item>
		</el-collapse>
	</el-form>
</template>

<script>
	import FormItemList from './FormItemList'

	export default {
		name: 'Props',
		components: {FormItemList},
		props: ['cfg', 'comp'],
		data () {
			return {
				activeNames: '1',
				group: []
			}
		},
		computed: {
			compProps () {
				return this.comp.props
			},
		},
		methods: {
			getGroup () {
				const arr = []
				const compProps = this.compProps
				Object.keys(compProps).forEach(function (key) {
					if (compProps[key].title) {
						const [, groupName] = compProps[key].title.split(',')
						if (groupName) {
							arr.push(groupName)
						}
					}
				})
				return Array.from(new Set(arr))
			},
			filterProps (groupItem) {
				const compProps = this.compProps
				const filterProps = {}
				Object.keys(compProps).forEach(function (key) {
					const item = compProps[key]
					if (item.title) {
						const [, groupName] = item.title.split(',')
						if (!Number(item.readonly) && groupName === groupItem) {
							filterProps[key] = item
						}
					}
				})
				return filterProps
			},
		},
		created () {
			this.mergeCompProps(this.comp)
			this.$set(this.comp, 'popupType', '')
		},
		mounted () {
			this.group = this.getGroup()
		}
	}
</script>

<style scoped>
	.tinymce-textarea {
		visibility: hidden;
		z-index: -1;
	}
</style>
