<template>
	<div class="home"> 
		<div class="title">创建问卷模版</div>
		<div>
			<el-row>
				<el-col :span="8" style=" background-color: #ffffff;">
					<div class="demo-tabs">
						<el-tabs style=" background-color: #ffffff;" :stretch="true" v-model="activeName">
							<el-tab-pane label="题型" name="first">
								<div class="wrap1"> 
									<el-card class="topicCard">
										<template #header>
											<div class="card-header">
											  <span>题型</span>
											</div>
										  </template>
										  <div class="surveyItem" @click="handleAdd('单选')"><el-icon class="iconEle"><CirclePlus /></el-icon>单选题</div>
										  <div class="surveyItem" @click="handleAdd('多选')"><el-icon class="iconEle"><CirclePlus /></el-icon>多选题</div>
										  <div class="surveyItem" @click="handleAdd('问答')"><el-icon class="iconEle"><CirclePlus /></el-icon>问答题</div>
										  <div class="surveyItem" @click="handleAdd('排序')"><el-icon class="iconEle"><CirclePlus /></el-icon>排序</div>
									</el-card>
									
									<el-card class="topicCardTit">
										<div class="surveyTitle"  v-for="o in surverTitData" :key="o" >{{o}}</div>
									</el-card>
								</div>
							</el-tab-pane>
							<el-tab-pane label="大纲" name="second">
								<div class="wrap2">
									<el-tree default-expand-all style="max-width: 600px" :data="surverTreeData" :props="defaultProps" @node-click="handleNodeClick" />
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
					
				</el-col>
				<el-col :span="16" style=" background-color: #ffffff;">
					<right-add ref="surveyAdd" @postSurverData="getSurverData" @postSurverClassData="getSurverClassData" ></right-add>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup>  
	import { ref , onMounted } from 'vue'  
	import leftTopic from './cpns/leftTopic';
	import leftOutline from './cpns/leftOutline';
	import rightAdd from './cpns/rightAdd';

	const surveyAdd = ref(rightAdd);
	const activeName = ref('first')

	function handleAdd(type) {
		surveyAdd.value.addTitle(type)
	}
	const handleNodeClick = (data) => {
        console.log(data)
    }
	const addSurverData = ref([])
	const surverTitData = ref([])
	const surverClassData = ref([])
	const surverTreeData = ref([])
	function getSurverData(data) {
		surverTitData.value = []
		surverTreeData.value = []
		surverTitData.value = getHandleSurverData('title',data)
		// surverClassData.value = getHandleSurverData('class',data)
		data.questionlist.forEach(ele => {
			if (ele.classificationName) {
				if (surverClassData.value.indexOf(ele.classificationName) === -1) {
					surverClassData.value.push(ele.classificationName)
				}
			} 
		});
		surverClassData.value.forEach((eleClass)=>{
			const obj ={}
			obj.label = eleClass
			obj.children = []
			surverTreeData.value.push(obj)
		})
		data.questionlist.forEach(ele => {
			if (ele.classificationName && ele.title) {
				if (surverClassData.value.indexOf(ele.classificationName) !== -1) {
					surverTreeData.value.forEach((eleTree)=>{
						if (eleTree.label === ele.classificationName) {
							const obj ={}
							obj.label = ele.title
							eleTree.children.push(obj)
						}
					})
				}
			} 
		});
	}
	function getHandleSurverData(type,data){
		const resultData = []
		data.questionlist.forEach(ele => {
			if (ele.title && type === 'title') {
				resultData.push(ele.title)
			}
		});
		return resultData
	}
    const data = [
        {
            label: 'Level one 1',
            children: [
                {
                    label: 'Level two 1-1',
                },
            ],
        },
        {
            label: 'Level one 2',
            children: [
                {
                    label: 'Level two 2-1',
                },
                {
                    label: 'Level two 2-2',
                },
            ],
        },
        {
            label: 'Level one 3',
            children: [
                {
                    label: 'Level two 3-1',
                },
                {
                    label: 'Level two 3-2',
                },
            ],
        },
    ]

    const defaultProps = {
        children: 'children',
        label: 'label',
    }
</script>

<style lang="scss" scoped>
.home{
	padding: 15px;
	background-color: #EFEFEF;

	.title{
		background: #ffffff;
		height: 50px;
		line-height: 50px;
		padding-left: 30px;
	}
	.demo-tabs{
		background-color: #EFEFEF;
		margin: 10px;
		padding: 15px;
		.wrap {
			padding: 15px;
			height: calc(100vh - 251px);
			background: #ffffff;
		}
	}
	
}
.wrap2{
	height: calc(100vh - 270px);
}
.wrap1{
	padding: 15px;
    height: calc(100vh - 270px);
    background: #ffffff;
    .topicCard{
        margin-bottom: 15px;
        .surveyItem{
            line-height: 30px;
            cursor: pointer;
            .iconEle{
                vertical-align: -10%; 
                color:#409EFF;
                margin-right: 8px;
            }
        }
        .surveyTitle{
            line-height: 30px;
        }
    }
    .topicCardTit{
        height: calc(100vh - 510px);
        scrollbar-width: none;
		/* firefox */
		-ms-overflow-style: none;
		/* IE 10+ */
		overflow-x: hidden;
		overflow-y: auto;
        line-height: 30px;
    }
}

</style>