<template>
	<div class="component-questionnaire">
		<!-- 问卷的基本操作栏 -->
		<p class="qn-title">{{editItem.name}}</p>
		<p class="qn-description" v-html="editItem.description"></p>
		<div class="qn-item-box">
			<div v-if="items.length === 0" class="no-data-text">
			    <img src="@/assets/icon/no_data.svg" width="120" />
			    <span style="margin-top:15px;color:#808080">暂无题目数据</span>
			</div>
			<!-- 问卷题目单元 -->
			<draggable class="list-group" tag="div" v-model="items" v-bind="dragOptions" @start="drag = true" @end="onDragEnd" v-else>
				<transition-group type="transition" :name="!drag ? 'flip-list' : null">
					<div class="qn-item" v-for="(item,index) in items" :key="index">
						<!-- 题干 -->
						<p class="qn-stem">
							<span style="color: red;" v-show="item.required">* </span>
							<span>{{ index + 1 }}. </span>
							<span>{{ getSimpleText(item.question) }}</span>
							<span>( {{ typeList[item.type] }} )</span>
							<!-- <Tooltip placement="right" v-if="item.description">
								<Icon type="md-help-circle" size='20' color='#7a7a7a' style="margin-left: 10px;" />
								<span slot="content">{{ item.description }}</span>
							</Tooltip> -->
						</p>
						<!-- 单选题-选项 -->
						<RadioGroup v-model="radioModel" v-if="item.type === 'single' || item.type === 'judge'">
							<Radio v-for="(option,optionIndex) in item.option" :key="optionIndex" :label="getSimpleText(option.value)" disabled></Radio>
						</RadioGroup>
						<!-- 多选题-选项 -->
						<CheckboxGroup v-model="multipleModel" v-if="item.type === 'multiple'">
							<Checkbox v-for="(option,optionIndex) in item.option" :key="optionIndex" :label="getSimpleText(option.value)" disabled>
							</Checkbox>
						</CheckboxGroup>
						<!-- 数据分析 -->
						<transition name="indexFade">
						      <div v-show="curIndexList.includes(index)">
								  <BaseQnBar :barId="'bar' + index" :barData="item.result || []" v-if="curIndexList.includes(index) && (item.type === 'single' || item.type ==='multiple')"></BaseQnBar>
							  </div>
						</transition>
						<!-- 工具栏 -->
						<div class="qn-tools" v-show="editable">
							<div class="qn-tools-item" @click="onItemEdit(item,index)">
								<Icon type="md-create" />
								<span>编辑</span>
							</div>
							<div class="qn-tools-item" @click="onItemDelete(index)">
								<Icon type="md-trash" />
								<span>移除</span>
							</div>
							<div class="qn-tools-item" @click="onItemAnalysis(index)" v-if="editItem.status === 300 && (item.type === 'Single' || item.type ==='Multiple')">
								<Icon type="md-podium" />
								<span>统计数据</span>
							</div>
						</div>
					</div>
				</transition-group>
			</draggable>
		</div>

		<!-- 新建题目弹窗 -->
		<Modal v-model="addModal" width="880" footer-hide class="related-modal" @on-visible-change="onModalChange">
			<div class="modal-header" slot="header">新增{{ typeList[curType] }}习题</div>
			<template v-if="isUpdate">
			<vuescroll>
				<!-- <BaseAddItem ref="addItem" :type="curType" :editItem="curItem"></BaseAddItem> -->
				<BaseSingle v-if="curType==='single'" ref="addItem" :editInfo="curItem" @onSave="onSave"></BaseSingle>
				<BaseMultiple v-if="curType==='multiple'" ref="addItem" :editInfo="curItem" @onSave="onSave"></BaseMultiple>
				<BaseJudge v-if="curType==='judge'" ref="addItem" :editInfo="curItem" @onSave="onSave"></BaseJudge>
				<Button class="modal-btn" @click="onConfirmAdd">确认</Button>
			</vuescroll>
			</template>
		</Modal>
	</div>
</template>
<script>
	import draggable from "vuedraggable"
	import BaseSingle from "./BaseSingle.vue"
	import BaseMultiple from "./BaseMultiple.vue"
	import BaseJudge from "./BaseJudge.vue"
	import BaseQnBar from "./BaseQnBar.vue"
	
	export default {
		components: {
			draggable,
			BaseQnBar,
			BaseSingle,
			BaseMultiple,
			BaseJudge
		},
		props: ["editItem","isEdit"],
		data() {
			return {
				curIndexList:[],
				curItem:null,
				isUpdate:false,
				barData:[],
				editIndex:null,
				editable:false,
				isShowAnalysis:false,
				isShowAllAnalysis:false,
				addModal: false,
				drag: false,
				radioModel: '',
				multipleModel: [],
				items: [],
				itemAnswers: [],
				curType: '',
				typeList: {
					'single': '单选',
					'multiple': '多选',
					'complete': '填空',
					'judge':'判断',
					'subjective': '问答'
				}
			};
		},
		created() { },
		methods: {
			// 拖拽完成之后
			onDragEnd() {
				this.drag = false
			},
			
			// 添加题目
			onMenuClick(name) {
				this.curType = name
				this.curItem = null
				this.editIndex = null
				this.addModal = true
				this.$nextTick(() => {
					this.$refs.addItem.resetContent()
				})
			},
			
			// 重置所有富文本编辑器内容 初始化
			onModalChange(val){
				this.isUpdate = val
			},
			
			// 确认添加题目
			onConfirmAdd() {
				this.$refs.addItem.doSave()
			},
			
			onSave(addItem){
				console.log(addItem)
				// 判断获取到的新题是否规范
				if ( this.getSimpleText(addItem.stemContent) && this.checkOptionNull(addItem.optionsContent)){
					let newItem = {
						question: addItem.stemContent,
						option: addItem.optionsContent,
						type: this.editIndex === null ? this.curType : this.curItem.type,
						description:this.editIndex === null ? '' : this.curItem.description,
						required: true,
					}
					console.log(newItem)
					if(this.editIndex === null){
						this.items.push(newItem)
						console.log(this.items)
					}else{
						this.$set(this.items, this.editIndex, newItem)
					}
					this.addModal = false
				}else{
					this.$Message.warning('请填写完整！')
				}
			},

			// 提取富文本内容中的文本
			getSimpleText(html) {
				var r = /<(?!img|video|audio).*?>/g;
				return html.replace(r, "");
			},
			
			// 检测是否有空选项
			checkOptionNull(arr) {
				let flag = true
				for (let i = 0; i < arr.length; i++) {
					if (this.getSimpleText(arr[i].value) === '') {
						flag = false
					}
				}
				return flag
			},

			/* 保存问卷 */
			onSavePaper() {


			},

			/* 编辑单个题目 */
			onItemEdit(item, index) {
				if(this.editIndex === index && this.curItem === item ){
					// this.$refs.addItem.doRender(item)
				}else{
					this.curItem = item
					this.editIndex = index
				}
				this.curType = item.type
				this.addModal = true
			},

			/* 删除单个题目 */
			onItemDelete(index) {
				this.$Modal.confirm({
					title: '提示',
					content: '<p>确认删除该题目？</p>',
					okText: '确认',
					cancelText: '取消',
					onOk: () => {
						this.items.splice(index, 1)
					}
				})
			},
			
			// 开启或关闭查看所有题目的数据分析
			onShowAllAnalysis(){
				this.curIndexList = !this.isShowAllAnalysis ? [... new Set(this.editItem.items.keys())] : []
				this.isShowAllAnalysis = !this.isShowAllAnalysis
			},

			/* 查看单个题目的数据分析 */
			onItemAnalysis(index) {
				if(this.curIndexList.includes(index)){
					this.isShowAnalysis = false
					this.curIndexList.splice(this.curIndexList.indexOf(index) , 1)
				}else{
					this.isShowAnalysis = true
					this.curIndexList.push(index)
				}
				
			}
		},

		mounted() {
            console.log(this.editItem)
            console.log(this.isEdit)
		},
		computed: {
			dragOptions() {
				return {
					animation: 200,
					group: "description",
					disabled: false,
					ghostClass: "ghost"
				};
			}
		},
		watch: {
			editItem: {
				handler(newValue) {
					/** 编辑回显 */
					if (newValue) {
						this.items = newValue.questions || []
						this.isShowAllAnalysis = false
						this.curIndexList = []
						console.log(newValue);
					} else {
						/** 新增 */
					}
				},
				deep: true,
				immediate: true
			},
			isEdit:{
				handler(n,o){
					this.editable = n
				}
			}
		}
	};
</script>

<style lang="less">
	@import "./BaseQuestionnaire.less";
</style>
