<template>
	<div>
		<div class="child-list-wrap">
			<draggable class="list-group" tag="div" v-model="childrenList" v-bind="dragOptions" @start="drag = true" @end="onDragEnd">
				<transition-group type="transition" :name="!drag ? 'flip-list' : null">
					<div class="child-item" v-for="(item,index) in childrenList" :key="index">
						<div class="child-item-question">
							<span class="child-item-question-order">({{ index + 1}})</span>
							<p class="child-item-question-content" v-html="item.question"></p>
						</div>
						<div class="item-tools-wrap">
							<div class="item-tools-t flex-row-center" @click="onEditChild(item,index)">
								<Icon type="ios-brush-outline" />{{$t('evaluation.editItem')}}</div>
							<div class="item-tools-t flex-row-center" @click="onDeleteChild(item,index)">
								<Icon type="ios-archive-outline" />{{$t('evaluation.deleteItem')}}</div>
						</div>
					</div>
				</transition-group>
			</draggable>
		</div>
		<!-- 添加子题弹窗 -->
		<Modal v-model="editChildModal" width="1080" footer-hide class="">
			<div class="modal-header" slot="header">{{$t('evaluation.exerciseList.editChild')}}</div>
			<BaseCreateChild @addFinish='onEditChildFinish' refId="childListEdit" :editItem="curItem" :curPeriodIndex="curPeriodIndex"
			 :curSubjectIndex="curSubjectIndex"></BaseCreateChild>
		</Modal>
	</div>
</template>
<script>
	import draggable from "vuedraggable"
	export default {
		name:'BaseChildList',
		components: {
			draggable
		},
		props: {
			childList: {
				type: Array,
				default: []
			},
			curPeriodIndex: {
				type: Number,
				default: 0,
			},
			curSubjectIndex: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				editChildModal: false,
				drag: false,
				childrenList: [],
				items:[],
				curIndex: null,
				curItem: null
			}
		},
		created() {
			this.childrenList = this.childList
		},
		methods: {
			
			// 拖拽完成之后
			onDragEnd(val) {
				console.log(this.childrenList)
				this.$emit('onEditChildFinish', this.childrenList)
				this.drag = false
			},
			
			onEditChild(item, index) {
				this.curItem = item
				this.curIndex = index
				this.editChildModal = true
			},

			onEditChildFinish(item) {
				console.log(item)
				this.$set(this.childrenList, this.curIndex, item)
				this.editChildModal = false
				this.$emit('onEditChildFinish', this.childrenList)
			},

			onDeleteChild(item, index) {
				this.$Modal.confirm({
					title: this.$t('evaluation.newExercise.modalTip'),
					content: this.$t('evaluation.exerciseList.confirmDelete'),
					onOk: () => {
						this.childrenList.splice(index, 1)
						this.$emit('onEditChildFinish', this.childrenList)
						this.$emit('onDeleteChild', item)
					}
				})

			}


		},
		
		computed: {
			dragOptions() {
				return {
					animation: 200,
					group: "description",
					disabled: false,
					ghostClass: "ghost"
				};
			}
		},
		mounted() {
			// this.childrenList = this.childList
		},

		watch: {
			childList: {
				handler(newValue) {
					if (newValue) {
						console.log(newValue)
						this.childrenList = JSON.parse(JSON.stringify(newValue))
					}
				},
				deep: true
			}
		}

	}
</script>

<style lang="less">
	.child-list-wrap {
		.child-item {
			position: relative;
			margin: 10px 0;
			padding: 20px 10px;
			border: 1px solid #e6e6e6;
			cursor: move;

			&-question {

				&-order {
					display: inline-block;
				}

				&-content {
					display: inline-block;
					margin-left: 5px;
				}
				
				tr,td{
					border-bottom: 1px solid #ccc;
					border-right: 1px solid #ccc;
					padding: 3px 5px;
				}
			}

			&:hover {
				border: 1px solid #01b4ef;

				.item-tools-wrap {
					display: unset;
				}
			}
		}

		.item-tools-wrap {
			position: absolute;
			right: 0;
			top: -30px;
			width: auto;
			height: 30px;
			margin: 0;
			padding: 0;
			background: #01b4ef;
			display: none;
		}

		.item-tools-t {
			height: 100%;
			padding: 0 15px;
			float: left;
			color: white;
			cursor: pointer;
		}

		.item-tools-t:hover {
			background: #4a5ae6;
		}

		/*横向垂直水平居中*/
		.flex-row-center {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	}
</style>
