<template>
    <div class="co_box">
        <div v-for="(item1, index1) in this.checkJson" :key="index1" class="mc_ti_1" :draggable="isdrag == `${index1}`"
            :class="{
								active: checkC === `x${index1}`,
								showCheckBox: checkC === `x${index1}` && etype==='edit',
                dragOverTop: newIndex === index1 && typeIndex == 'drag-' + index1 && (oldIndex > index1 && (!(newIndex2 || newIndex2 === 0) || !(newIndex3 || newIndex3 === 0))),
                dragOverBottom: newIndex === index1 && typeIndex == 'drag-' + index1 && (oldIndex < index1 || !(!(newIndex2 || newIndex2 === 0) || !(newIndex3 || newIndex3 === 0))),
            }" @click.stop="checkTitle(`${index1}`, 1, item1)" @dragstart="dragStart(item1, index1, `${index1}`)"
            @dragover.prevent="dragOver(index1)" @dragend="dragEnd()">
            <div class="title" :style="{ fontSize: etype == 'order' && '16px' }"  :ref="`x${index1}`">
                <div class="drag" @mousedown="setDrag(`${index1}`)" @mouseup="isdrag = ''"></div>
                <span class="content" v-html="selectType(item1, index1)" v-if="etype == 'edit' || item1.ttype != 1"></span>
                <el-tooltip :content="selectType2(item1, index1)" placement="top" effect="dark" v-else>
                    <span class="content" v-html="selectType(item1, index1)"></span>
                </el-tooltip>

                <!-- {{ selectType(item1, index1) }} -->
                <div class="btnBox">
                    <!-- <div class="edit" @click.stop="editCheck(`${index1}`,item1)" v-if="item1.ttype == 1 && canEdit.indexOf(item1.type) !== -1 && etype == 'edit'"></div> -->
                    <div class="edit" @click.stop="editGroupName(`${index1}`)" v-if="item1.ttype == 2 && etype == 'edit'"></div>
                    <div :class="{ deleteX: etype != 'edit', delete: etype == 'edit' }"
                        @click.stop="deleteCheck(`${index1}`)">
                    </div>
                    <div class="open" v-if="item1.array && item1.array.length" :class="{ isopen: item1.isopen }"
                        @click.stop="openPan(index1)"></div>
                </div>
            </div>
            <div v-if="item1.array && item1.array.length && item1.isopen" class="mc_ti_1_xia">
                <div v-for="(item2, index2) in item1.array" :key="`${index1}-${index2}`" class="mc_ti_2"
                    :draggable="isdrag == `${index1}-${index2}`" :class="{
                        active: checkC === `x${index1}-${index2}`,
												showCheckBox: checkC === `x${index1}-${index2}` && etype==='edit',
                        dragOverTop: newIndex === index1 && newIndex2 === index2 && typeIndex == 'drag2-' + index1 + '-' + index2 && (oldIndex2 > index2  && ( !(newIndex3 || newIndex3 === 0))),
                        dragOverBottom: newIndex === index1 && newIndex2 === index2 && typeIndex == 'drag2-' + index1 + '-' + index2 && (oldIndex2 < index2 || !( !(newIndex3 || newIndex3 === 0))),
                    }" @click.stop="checkTitle(`${index1}-${index2}`, 2, item2)"
                    @dragstart="dragStart2(item2, index1, index2, `${index1}-${index2}`)"
                    @dragover.prevent="dragOver2(index1, index2)" @dragend="dragEnd2()">
                    <div class="title" :style="{ fontSize: etype == 'order' && '16px' }" :ref="`x${index1}-${index2}`">
                        <div class="drag" @mousedown="setDrag(`${index1}-${index2}`)" @mouseup="isdrag = ''"></div>
                        <span class="content" v-html="selectType(item2, index2)"
                            v-if="etype == 'edit' || item2.ttype != 1"></span>
                        <el-tooltip :content="selectType2(item2, index2)" placement="top" effect="dark" v-else>
                            <span class="content" v-html="selectType(item2, index2)"></span>
                        </el-tooltip>
                        <div class="btnBox">
                            <!-- <div class="edit" @click.stop="editCheck(`${index1}-${index2}`,item2)" v-if="item2.ttype == 1 && canEdit.indexOf(item2.type) !== -1 && etype == 'edit'"></div> -->
                            <div class="edit" @click.stop="editGroupName(`${index1}-${index2}`)" v-if="item2.ttype == 2 && etype == 'edit'"></div>
                            <div :class="{ deleteX: etype != 'edit', delete: etype == 'edit' }"
                                @click.stop="deleteCheck(`${index1}-${index2}`)"></div>
                            <div class="open" v-if="item2.array && item2.array.length" :class="{ isopen: item2.isopen }"
                                @click.stop="openPan(index1, index2)"></div>
                        </div>
                    </div>
                    <div v-if="item2.array && item2.array.length && item2.isopen" class="mc_ti_2_xia">
                        <div v-for="(item3, index3) in item2.array" :key="`${index1}-${index2}-${index3}`" class="mc_ti_3"
                            :draggable="isdrag == `${index1}-${index2}-${index3}`" :class="{
                                active: checkC === `x${index1}-${index2}-${index3}`,
                                showCheckBox: checkC === `x${index1}-${index2}-${index3}` && etype==='edit',
                                dragOverTop: newIndex === index1 && newIndex2 === index2 && newIndex3 === index3 && typeIndex == 'drag3-' + index1 + '-' + index2 + '-' + index3 && oldIndex3 > index3,
                                dragOverBottom: newIndex === index1 && newIndex2 === index2 && newIndex3 === index3 && typeIndex == 'drag3-' + index1 + '-' + index2 + '-' + index3 && oldIndex3 < index3,
                            }" @click.stop="checkTitle(`${index1}-${index2}-${index3}`, 3, item3)"
                            @dragstart="dragStart3(item3, index1, index2, index3, `${index1}-${index2}-${index3}`)"
                            @dragover.prevent="dragOver3(index1, index2, index3)" @dragend="dragEnd3()">
                            <div class="title" :style="{ fontSize: etype == 'order' && '16px' }" :ref="`x${index1}-${index2}-${index3}`">
                                <div class="drag" @mousedown="setDrag(`${index1}-${index2}-${index3}`)"
                                    @mouseup="isdrag = ''"></div>
                                <span class="content" v-html="selectType(item3, index3)"
                                    v-if="etype == 'edit' || item3.ttype != 1"></span>
                                <el-tooltip :content="selectType2(item3, index3)" placement="top" effect="dark" v-else>
                                    <span class="content" v-html="selectType(item3, index3)"></span>
                                </el-tooltip>
                                <div class="btnBox">
                                    <!-- <div class="edit" @click.stop="editCheck(`${index1}-${index2}-${index3}`,item3)" v-if="item3.ttype == 1 && canEdit.indexOf(item3.type) !== -1 && etype == 'edit'"></div> -->
                                    <div :class="{ deleteX: etype != 'edit', delete: etype == 'edit' }"
                                        @click.stop="deleteCheck(`${index1}-${index2}-${index3}`)"></div>
                                </div>
                            </div>
                            <div v-if="item3.ttype == 1 && canEdit.indexOf(item3.type) !== -1 && etype == 'edit'"
                                class="edit_box">
                                <div v-if="item3.type == 1">
                                    <choiceX :cJson="item3.json" :cJson2="cJson" @setJson="setJson"  :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 1 && checkC === `x${index1}-${index2}-${index3}`"></choiceX>
                                    <!-- <choiceDialog v-if="item3.type == 1 && checkC === `x${index1}-${index2}-${index3}`"
                                        :cJson="cJson" @setJson="setJson">
                                    </choiceDialog> -->
                                </div>
                                <div v-if="item3.type == 3">
                                    <gapX :cJson="item3.json" :cJson2="cJson" @setJson="setJson"  :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 3 && checkC === `x${index1}-${index2}-${index3}`"></gapX>
                                    <!-- <gapDialog v-if="item3.type == 3 && checkC === `x${index1}-${index2}-${index3}`"
                                        :cJson="cJson" @setJson="setJson">
                                    </gapDialog> -->
                                </div>
                                <div v-if="item3.type == 5">
                                    <fileX :cJson="item3.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 5 && checkC === `x${index1}-${index2}-${index3}`"></fileX>
                                    <!-- <fileDialog v-if="item3.type == 5 && checkC === `x${index1}-${index2}-${index3}`"
                                        :cJson="cJson" @setJson="setJson">
                                    </fileDialog> -->
                                </div>
                                <div v-if="item3.type == 6">
                                    <courseX :cJson="item3.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 6 && checkC === `x${index1}-${index2}-${index3}`"></courseX>
                                    <!-- <courseDialog v-if="item3.type == 6 && checkC === `x${index1}-${index2}-${index3}`"
                                        :cJson="cJson" @setJson="setJson">
                                    </courseDialog> -->
                                </div>
                                <div v-if="item3.type == 7">
                                    <evaX :cJson="item3.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 7 && checkC === `x${index1}-${index2}-${index3}`"></evaX>
                                    <!-- <evaDialog v-if="item3.type == 7 && checkC === `x${index1}-${index2}-${index3}`"
                                        :cJson="cJson" @setJson="setJson">
                                    </evaDialog> -->
                                </div>
                                <div v-if="item3.type == 8">
                                    <timeX :cJson="item3.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 8 && checkC === `x${index1}-${index2}-${index3}`"></timeX>
                                    <!-- <timeDialog v-if="item3.type == 8 && checkC === `x${index1}-${index2}-${index3}`"
                                        :cJson="cJson" @setJson="setJson">
                                    </timeDialog> -->
                                </div>
                                <div v-if="item3.type == 11">
                                    <courseX2 :cJson="item3.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 11 && checkC === `x${index1}-${index2}-${index3}`"></courseX2>
                                    <!-- <courseDialog2 v-if="item3.type == 11 && checkC === `x${index1}-${index2}-${index3}`"
                                        :cJson="cJson" @setJson="setJson">
                                    </courseDialog2>-->
                                </div>
																<div v-if="item3.type == 12">
																	<sweep :cJson="item3.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 12 && checkC === `x${index1}-${index2}-${index3}`"/>
																</div>
                                <div v-if="item3.type == 13">
																	<number :cJson="item3.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}-${index3}`" :isOpen="item3.type == 13 && checkC === `x${index1}-${index2}-${index3}`"/>
																</div>
                            </div>
														<div class="addCheckBox" v-if="checkC === `x${index1}-${index2}-${index3}` && etype==='edit'" @click.stop="">
															<addCheckPopover @addCheck="addCheck" @addQtype="addQtype"/>
														</div>
                        </div>
                    </div>
                    <div v-else-if="item2.ttype == 1 && canEdit.indexOf(item2.type) !== -1 && etype == 'edit'"
                        class="edit_box">
                        <div v-if="item2.type == 1">
                            <choiceX :cJson="item2.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 1 && checkC === `x${index1}-${index2}`"></choiceX>
                            <!-- <choiceDialog v-if="item2.type == 1 && checkC === `x${index1}-${index2}`" :cJson="cJson"
                                @setJson="setJson"></choiceDialog> -->
                        </div>
                        <div v-else-if="item2.type == 3">
                            <gapX :cJson="item2.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 3 && checkC === `x${index1}-${index2}`"></gapX>
                            <!-- <gapDialog v-if="item2.type == 3 && checkC === `x${index1}-${index2}`" :cJson="cJson"
                                @setJson="setJson"></gapDialog> -->
                        </div>
                        <div v-else-if="item2.type == 5">
                            <fileX :cJson="item2.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 5 && checkC === `x${index1}-${index2}`"></fileX>
                            <!-- <fileDialog v-if="item2.type == 5 && checkC === `x${index1}-${index2}`" :cJson="cJson"
                                @setJson="setJson"></fileDialog> -->
                        </div>
                        <div v-else-if="item2.type == 6">
                            <courseX :cJson="item2.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 6 && checkC === `x${index1}-${index2}`"></courseX>
                            <!-- <courseDialog v-if="item2.type == 6 && checkC === `x${index1}-${index2}`" :cJson="cJson"
                                @setJson="setJson"></courseDialog> -->
                        </div>
                        <div v-else-if="item2.type == 7">
                            <evaX :cJson="item2.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 7 && checkC === `x${index1}-${index2}`"></evaX>
                            <!-- <evaDialog v-if="item2.type == 7 && checkC === `x${index1}-${index2}`" :cJson="cJson"
                                @setJson="setJson"></evaDialog> -->
                        </div>
                        <div v-else-if="item2.type == 8">
                            <timeX :cJson="item2.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 8 && checkC === `x${index1}-${index2}`"></timeX>
                            <!-- <timeDialog v-if="item2.type == 8 && checkC === `x${index1}-${index2}`" :cJson="cJson"
                                @setJson="setJson"></timeDialog> -->
                        </div>
                        <div v-else-if="item2.type == 11">
                            <courseX2 :cJson="item2.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 11 && checkC === `x${index1}-${index2}`"></courseX2>
                            <!-- <courseDialog2 v-if="item2.type == 11 && checkC === `x${index1}-${index2}`" :cJson="cJson"
                                @setJson="setJson"></courseDialog2> -->
                        </div>
												<div v-else-if="item2.type == 12">
													<sweep :cJson="item2.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 12 && checkC === `x${index1}-${index2}`"/>
												</div>
                        <div v-else-if="item2.type == 13">
													<number :cJson="item2.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}-${index2}`" :isOpen="item2.type == 13 && checkC === `x${index1}-${index2}`"/>
												</div>
                    </div>
										<div class="addCheckBox" v-if="checkC === `x${index1}-${index2}` && etype==='edit'" @click.stop="">
											<addCheckPopover @addCheck="addCheck" @addQtype="addQtype"/>
										</div>
                </div>
            </div>
            <div v-else-if="item1.ttype == 1 && canEdit.indexOf(item1.type) !== -1 && etype == 'edit'" class="edit_box">
                <div v-if="item1.type == 1">
                    <choiceX :cJson="item1.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 1 && checkC === `x${index1}`"></choiceX>

                    <!-- <choiceDialog v-if="item1.type == 1 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
                    </choiceDialog> -->
                </div>
                <div v-else-if="item1.type == 3">
                    <gapX :cJson="item1.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 3 && checkC === `x${index1}`"></gapX>
                    <!-- <gapDialog v-if="item1.type == 3 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
                    </gapDialog> -->
                </div>
                <div v-else-if="item1.type == 5">
                    <fileX :cJson="item1.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 5 && checkC === `x${index1}`"></fileX>
                    <!-- <fileDialog v-if="item1.type == 5 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
                    </fileDialog> -->
                </div>
                <div v-else-if="item1.type == 6">
                    <courseX :cJson="item1.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 6 && checkC === `x${index1}`"></courseX>
                    <!-- <courseDialog v-if="item1.type == 6 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
                    </courseDialog> -->
                </div>
                <div v-else-if="item1.type == 7">
                    <evaX :cJson="item1.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 7 && checkC === `x${index1}`"></evaX>
                    <!-- <evaDialog v-if="item1.type == 7 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
                    </evaDialog> -->
                </div>
                <div v-else-if="item1.type == 8">
                    <timeX :cJson="item1.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 8 && checkC === `x${index1}`"></timeX>
                    <!-- <timeDialog v-if="item1.type == 8 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
                    </timeDialog> -->
                </div>
                <div v-else-if="item1.type == 11">
                    <courseX2 :cJson="item1.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 11 && checkC === `x${index1}`"></courseX2>
                    <!-- <courseDialog2 v-if="item1.type == 11 && checkC === `x${index1}`" :cJson="cJson" @setJson="setJson">
                    </courseDialog2> -->
                </div>
								<div v-else-if="item1.type == 12">
									<sweep :cJson="item1.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 12 && checkC === `x${index1}`"/>
								</div>
                <div v-else-if="item1.type == 13">
									<number :cJson="item1.json" :cJson2="cJson" @setJson="setJson" :index="`x${index1}`" :isOpen="item1.type == 13 && checkC === `x${index1}`"/>
								</div>
            </div>
						<div class="addCheckBox" v-if="checkC === `x${index1}` && etype==='edit'" @click.stop="">
							<addCheckPopover @addCheck="addCheck" @addQtype="addQtype"/>
						</div>
					</div>
        <el-dialog title="修改名称" :visible.sync="groupDaliog" :append-to-body="true" width="500px"
            :before-close="handleClose" class="dialog_diy">
            <div style="
                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: center;
                ">
                <div style="min-width: fit-content;">分组名称：</div>
                <el-input v-model="groupName" placeholder="请输入要修改的名称"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="groupDaliog = false">取 消</el-button>
                <el-button type="primary" @click="updateGroupName">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import minxinVue from '../minxins/minxin';
import choiceDialog from './choice/index.vue'
import choiceX from './choice/choice.vue'
import gapDialog from './GapFilling/index.vue'
import gapX from './GapFilling/gap.vue'
import fileDialog from './file/index.vue'
import fileX from './file/file.vue'
import courseDialog from './course/index.vue'
import courseX from './course/course.vue'
import evaDialog from './evaBox/index.vue'
import evaX from './evaBox/eva.vue'
import timeDialog from './timeBox/index.vue'
import timeX from './timeBox/time.vue'
import courseDialog2 from './course2/index.vue'
import courseX2 from './course2/course.vue'
import addCheckPopover from './addCheckPopover.vue'
import sweep from './sweep/index'
import number from './number/index.vue'
export default {
    mixins: [minxinVue],
    components: {
        choiceDialog,
        choiceX,
        gapDialog,
        gapX,
        fileDialog,
        fileX,
        courseDialog,
        courseX,
        evaDialog,
        evaX,
        timeDialog,
        timeX,
        courseDialog2,
        courseX2,
				addCheckPopover,
				sweep,
        number
    },
    props: {
        checkJson: {
            type: Array,
        },
        checkC: {
            type: String
        },
        etype: {
            type: String,
            default: ""
        },
        cJson: {
            type: Object,
        }
    },
    data() {
        return {
            manualJson: [],
            isdrag: "",
            canEdit: [1, 3, 5, 6, 7, 8, 11,12,13],
            ctype: "",
            dragType: "",
            oldIndex: "",
            newIndex: "",
            oldIndex2: "",
            newIndex2: "",
            oldIndex3: "",
            newIndex3: "",
            oldData: "",
            groupDaliog: false,
            groupName: '',
            groupIndex: ''
            // cJson: {}
        }
    },
    computed: {
        selectType() {
            return function (item, index) {
                if (item.ttype == 1) {
                    let className = "test_icon"
                    if (item.type == 1 && (item.json && item.json.type == 2 || !item.json)) {
                        className += " test_icon_check"
                    } else if (item.type == 1 && item.json && item.json.type == 1) {
                        className += " test_icon_checkO"
                    } else if (item.type == 3) {
                        className += " test_icon_gap"
                    } else if (item.type == 5) {
                        className += " test_icon_file"
                    } else if (item.type == 6 || item.type == 11) {
                        className += " test_course_file"
                    } else if (item.type == 7) {
                        className += " test_eva_file"
                    } else if (item.type == 8) {
                        className += " test_icon_time"
                    }else if (item.type == 12){
												className += " test_icon_sweep"
										}else if(item.type==13){
                        className += ' test_icon_number'
                    }
										let itemType = item.type;
										if(itemType===1){
											if(item.json.type===1){
												itemType = 9;
											}else if(item.json.type==2){
												itemType = 10;
											}
										}
                    return `${this.etype=='edit'?'<span class="test_index">'+(index+1)+'</span>':index+1+'、'}` + "" + (item.json && this.etype != 'edit' ? `<span class='${className}'></span>` : `<span class='${className}'></span>` + this.options2[itemType]) + (item.json && this.etype != 'edit' ? `${item.json.title}` : "");
                } else if (item.ttype == 2) {
                    return `${item.name ? item.name : `第${index + 1}组`}（共${item.array.length}题）`;
                } else if (item.ttype == 3) {
                    return `分页${index + 1}`;
                }
            };
        },
        selectType2() {
            return function (item, index) {
                if (item.ttype == 1) {
                    return (item.json && this.etype != 'edit' ? '' : this.options2[item.type]) + (item.json && this.etype != 'edit' ? `${item.json.title}` : "");
                } else if (item.ttype == 2) {
                    return `${item.name ? item.name : `第${index + 1}组`} （共${item.array.length}题）`;
                } else if (item.ttype == 3) {
                    return `分页${index + 1}`;
                }
            };
        }
    },
    watch: {
        checkJson: {
            handler(newVal) {
                this.manualJson = this.depthCopy(newVal)
            },
            deep: true
        }
    },
    methods: {
        handleClose(done) {
            done();
        },
        setDrag(index) {
            console.log(index);
            this.isdrag = index
        },
        openPan(index1, index2) {
            console.log(this.manualJson);
            if (index2 === 0 || index2) {
                this.manualJson[index1].array[index2].isopen = !this.manualJson[index1].array[index2].isopen
            } else {
                this.manualJson[index1].isopen = !this.manualJson[index1].isopen
            }
            this.$forceUpdate();
            this.$emit("changeJson", this.manualJson);
        },
        checkTitle(index, type, item) {
            let _index = index.split("-");
            let cJson = {}
            if (type == 1 && item.ttype == 1) {
                cJson = this.manualJson[_index[0]].json ? JSON.parse(JSON.stringify(this.manualJson[_index[0]].json)) : '';
            } else if (type == 2 && item.ttype == 1) {
                cJson = this.manualJson[_index[0]].array[_index[1]].json ? JSON.parse(JSON.stringify(this.manualJson[_index[0]].array[_index[1]].json)) : '';
            } else if (type == 3 && item.ttype == 1) {
                cJson = this.manualJson[_index[0]].array[_index[1]].array[_index[2]].json ? JSON.parse(JSON.stringify(this.manualJson[_index[0]].array[_index[1]].array[_index[2]].json)) : '';
            }
            // this.cJson = {type: type, index: _index, item: item}
            // this.cJson = item.json;
            this.$forceUpdate();
            this.ctype = type
            if (this.checkC === "x" + index) {
                this.$emit("update:checkC", "")
            } else {
                this.$emit("update:checkC", 'x' + index)
								if(this.etype==='order'){
									this.$emit("scrollPage",'x' + index)
								}
							}
            this.$forceUpdate();
            // console.log(this.cJson);
            this.$emit("update:cJson", cJson)
        },
        setJson(json,index) {
						let checkC = ""
						if(index){
							checkC = index
						}else{
							checkC = this.checkC
						}
						if(!checkC)return;
            let _index = checkC.replace("x", "").split("-");
            this.$emit("update:cJson", json)
            if (this.ctype == 1) {
                this.manualJson[_index[0]].json = json
            } else if (this.ctype == 2) {
                this.manualJson[_index[0]].array[_index[1]].json = json
            } else if (this.ctype == 3) {
                this.manualJson[_index[0]].array[_index[1]].array[_index[2]].json = json
            }
            this.$forceUpdate();
            this.$emit("changeJson", this.manualJson);
        },
        deleteCheck(index) {
            let _check = index.split("-")
            let string = ""
            if (_check.length == 1) {
                if (this.manualJson[_check[0]].ttype == 1) {
                    string = "确定删除该题目吗?"
                } else if (this.manualJson[_check[0]].ttype == 2) {
                    string = "删除该分组将会同步删除该分组下所有内容，是否继续操作?"
                } else if (this.manualJson[_check[0]].ttype == 3) {
                    string = "删除该分页将会同步删除该分页下所有内容，是否继续操作?"
                }
            } else if (_check.length == 2) {
                if (this.manualJson[_check[0]].array[_check[1]].ttype == 1) {
                    string = "确定删除该题目吗?"
                } else if (this.manualJson[_check[0]].array[_check[1]].ttype == 2) {
                    string = "删除该分组将会同步删除该分组下所有内容，是否继续操作?"
                }
            } else if (_check.length == 3) {
                string = "确定删除该题目吗?"
            }
            this.$confirm(string, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    if (_check.length == 1) {
                        this.manualJson.splice(_check[0], 1)
                    } else if (_check.length == 2) {
                        this.manualJson[_check[0]].array.splice(_check[1], 1)
                    } else if (_check.length == 3) {
                        this.manualJson[_check[0]].array[_check[1]].array.splice(_check[2], 1)
                    }
                    this.$emit("update:checkC", "")
                    this.$emit("changeJson", this.manualJson);
                    this.$forceUpdate()
                })
                .catch(() => { });
        },
        editGroupName(index){
            let _check = index.split("-")
            let name  = ''
            if (_check.length == 1) {
                name = this.manualJson[_check[0]].name ? this.manualJson[_check[0]].name : ''
            } else if (_check.length == 2) {
                name = this.manualJson[_check[0]].array[_check[1]].name ? this.manualJson[_check[0]].array[_check[1]].name : ''
            }
            this.groupName = name
            this.groupDaliog = true
            this.groupIndex = index
        },
        updateGroupName(){
            let _check = this.groupIndex.split("-")
            let name  = this.groupName
            if(!name){
                this.$message.error("请输入分组名称");
                return;
            }
            if (_check.length == 1) {
                this.manualJson[_check[0]].name = name
            } else if (_check.length == 2) {
                this.manualJson[_check[0]].array[_check[1]].name = name
            }
            this.$forceUpdate();
            this.$emit("changeJson", this.manualJson);
            this.groupDaliog = false
        },
        editCheck(index, item) {

        },
        setJsonCheck(newItems){
            let _index = this.checkC.replace("x", "").split("-");
            let cJson = {}
            if (this.ctype == 1) {
                cJson = newItems[_index[0]].json ? JSON.parse(JSON.stringify(newItems[_index[0]].json)) : '';
            } else if (this.ctype == 2) {
                cJson = newItems[_index[0]].array[_index[1]].json ? JSON.parse(JSON.stringify(newItems[_index[0]].array[_index[1]].json)) : '';
            } else if (this.ctype == 3) {
                cJson = newItems[_index[0]].array[_index[1]].array[_index[2]].json ? JSON.parse(JSON.stringify(newItems[_index[0]].array[_index[1]].array[_index[2]].json)) : '';
            }
            this.$emit("update:cJson", cJson)
            this.$forceUpdate()
        },
        dragStart(val, i, index) {
            if (this.isdrag != index) {
                return
            }
            this.dragType = 'drag'
            this.oldIndex = i;
            this.oldData = val;
        },
        dragOver(i) {
            // if(this.dragType != 'drag'){
            //     return
            // }
            this.typeIndex = "drag-" + i
            this.newIndex = i;
        },
        dragEnd() {
            if (this.dragType != 'drag') {
                this.typeIndex = "";
                this.newIndex = "";
                this.dragType = "";
                this.isdrag = "";
                return;
            }

            if (this.oldIndex == this.newIndex) {
                this.typeIndex = "";
                this.newIndex = "";
                this.dragType = "";
                this.isdrag = "";
                return;
            }

            let newItems = [...this.manualJson];
            // 删除老的节点
            newItems.splice(this.oldIndex, 1);
            // 在列表中目标位置增加新的节点
            newItems.splice(this.newIndex, 0, this.oldData);
            console.log('................',...newItems);
            /* 修改选中的并且切换的题目 */
            this.setJsonCheck(newItems)

            this.$emit("changeJson", [...newItems]);

            this.typeIndex = "";
            this.newIndex = "";
            this.dragType = "";
            this.isdrag = "";
            this.$forceUpdate()
        },
        dragStart2(val, i, j, index) {
            if (this.isdrag != index) {
                return
            }
            this.dragType = 'drag2'
            this.oldIndex = i;
            this.oldIndex2 = j;
            this.oldData = val;
        },
        dragOver2(i, j) {
            // if(this.dragType != 'drag2'){
            //     return
            // }
            this.typeIndex = "drag2-" + i + '-' + j
            this.newIndex = i;
            this.newIndex2 = j;
            // console.log(i, j);
        },
        dragEnd2() {
            if (this.dragType != 'drag2') {
                this.typeIndex = "";
                this.newIndex = "";
                this.newIndex2 = "";
                this.dragType = "";
                this.isdrag = "";
                return;
            }

            if (this.oldIndex == this.newIndex && this.oldIndex2 == this.newIndex2) {
                this.typeIndex = "";
                this.newIndex = "";
                this.newIndex2 = "";
                this.dragType = "";
                this.isdrag = "";
                return;
            }

            let newItems = [...this.manualJson];
            // 删除老的节点
            newItems[this.oldIndex].array.splice(this.oldIndex2, 1);
            // 在列表中目标位置增加新的节点
            if ((this.newIndex3 || this.newIndex3 === 0) && newItems[this.newIndex].array[this.newIndex2] && newItems[this.newIndex].array[this.newIndex2].array && this.oldData.ttype == 1) {
                newItems[this.newIndex].array[this.newIndex2].array.splice(this.newIndex3, 0, this.oldData);
            } else if (newItems[this.newIndex].array[this.newIndex2] && newItems[this.newIndex].array[this.newIndex2].array && this.oldData.ttype == 1) {
                newItems[this.newIndex].array[this.newIndex2].array.push(this.oldData)
            } else if (newItems[this.newIndex].array && newItems[this.newIndex].array.length && newItems[this.newIndex].array[0].ttype == 1 && this.oldData.ttype == 2) {
                this.oldData.array = [...this.oldData.array, ...newItems[this.newIndex].array]
                newItems[this.newIndex].array[0] = this.oldData
            } else {
                newItems[this.newIndex].array.splice(this.newIndex2, 0, this.oldData);
            }

            /* 修改选中的并且切换的题目 */
            this.setJsonCheck(newItems)


            this.$emit("changeJson", [...newItems]);
            this.typeIndex = "";
            this.newIndex = "";
            this.newIndex2 = "";
            this.dragType = "";
            this.isdrag = "";
            this.$forceUpdate()
        },
        dragStart3(val, i, j, k, index) {
            if (this.isdrag != index) {
                return
            }
            this.dragType = 'drag3'
            this.oldIndex = i;
            this.oldIndex2 = j;
            this.oldIndex3 = k;
            this.oldData = val;
        },
        dragOver3(i, j, k) {
            // if(this.dragType != 'drag3'){
            //     return
            // }
            this.typeIndex = "drag3-" + i + '-' + j + '-' + k
            this.newIndex = i;
            this.newIndex2 = j;
            this.newIndex3 = k;
            console.log(i, j, k);
        },
        dragEnd3() {
            if (this.dragType != 'drag3') {
                this.typeIndex = "";
                this.newIndex = "";
                this.newIndex2 = "";
                this.newIndex3 = "";
                this.dragType = "";
                this.isdrag = "";
                return;
            }

            if (this.oldIndex == this.newIndex && this.oldIndex2 == this.newIndex2 && this.oldIndex3 == this.newIndex3) {
                this.typeIndex = "";
                this.newIndex = "";
                this.newIndex2 = "";
                this.newIndex3 = "";
                this.dragType = "";
                this.isdrag = "";
                return;
            }

            let newItems = [...this.manualJson];
            // 删除老的节点
            newItems[this.oldIndex].array[this.oldIndex2].array.splice(this.oldIndex3, 1);
            if (newItems[this.newIndex].array[this.newIndex2] && newItems[this.newIndex].array[this.newIndex2].array) {
                // 在列表中目标位置增加新的节点
                newItems[this.newIndex].array[this.newIndex2].array.splice(this.newIndex3, 0, this.oldData);
            } else if (newItems[this.newIndex].array[0] && newItems[this.newIndex].array[0].ttype == 2 && this.oldData.ttype == 1) {
                // 在列表中目标位置增加新的节点
                newItems[this.newIndex].array[0].array.push(this.oldData)
            } else {
                newItems[this.newIndex].array.splice(this.newIndex2, 0, this.oldData);
            }

            /* 修改选中的并且切换的题目 */
            this.setJsonCheck(newItems)


            this.$emit("changeJson", [...newItems]);
            this.typeIndex = "";
            this.newIndex = "";
            this.newIndex2 = "";
            this.newIndex3 = "";
            this.dragType = "";
            this.isdrag = "";
            this.$forceUpdate()
        },
				addCheck(value){
					this.$emit('addCheck',value)
				},
				addQtype(type){
					this.$emit('addQtype',type)
				},
				scrollPage(index){
					let scrollEl = this.$parent.$refs['eContentRef']
					let moveEl = this.$refs[index]
					if(scrollEl && moveEl){
						scrollEl.scrollTo({
							top:moveEl[0].offsetTop - 100,
							behavior:"smooth"
						})
					}
				}
    },
    mounted() {
        this.manualJson = this.depthCopy(this.checkJson);
    },
}
</script>

<style scoped>
.co_box {
    width: 100%;
}

.mc_ti_1 {
    width: 100%;
    min-height: 40px;
    /* border: 1px solid #bcbcbc00; */
    padding: 10px 0 0;
    box-sizing: border-box;
    margin-bottom: 10px;
    overflow: hidden;
}



.mc_ti_1+.mc_ti_1 {
    margin-top: 10px;
}

.mc_ti_1>.title {
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: calc(100% - 20px);
    margin: 0 auto 10px;
}

.mc_ti_1_xia,
.mc_ti_2_xia {
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.mc_ti_2 {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0 0;
    /* border: 1px solid #bcbcbc00; */
    overflow: hidden;
}

.mc_ti_2+.mc_ti_2 {
    margin-top: 10px;
}

.mc_ti_2>.title {
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    word-break: break-all;
    width: calc(100% - 20px);
    margin: 0 auto 10px;
}

.mc_ti_3 {
    padding: 10px 0 0;
    width: 100%;
    box-sizing: border-box;
    /* border: 1px solid #bcbcbc00; */
    overflow: hidden;
}

.mc_ti_3+.mc_ti_3 {
    margin-top: 10px;
}

.mc_ti_3>.title {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: calc(100% - 20px);
    margin: 0 auto 10px;
}

.mc_ti_1>.title>.drag,
.mc_ti_2>.title>.drag,
.mc_ti_3>.title>.drag {
    display: block;
    background-image: url('../../../../../assets/icon/test/drag_icon.png');
    background-size: 100% 100%;
    min-width: 16px;
    min-height: 16px;
    margin-right: 10px;
    cursor: pointer;
}

.mc_ti_1>.title>.btnBox,
.mc_ti_2>.title>.btnBox,
.mc_ti_3>.title>.btnBox {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.mc_ti_1>.title>.btnBox .open,
.mc_ti_2>.title>.btnBox .open {
    display: block;
    background-image: url('../../../../../assets/icon/new/u_arrow.png');
    background-size: 100% 100%;
    width: 15px;
    height: 15px;
    cursor: pointer;
    transition: all .5s;
    transform: rotate(-90deg);
}

.mc_ti_1>.title>.btnBox .delete,
.mc_ti_2>.title>.btnBox .delete,
.mc_ti_3>.title>.btnBox .delete {
    display: block;
    background-image: url('../../../../../assets/icon/new/delete_u.png');
    /* background-image: url('../../../../../assets/icon/test/delete_test_icon2.png'); */
    background-size: 100% 100%;
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 10px;
}

.mc_ti_1>.title>.btnBox .deleteX,
.mc_ti_2>.title>.btnBox .deleteX,
.mc_ti_3>.title>.btnBox .deleteX {
    display: block;
    /* background-image: url('../../../../../assets/icon/new/delete_u.png'); */
    background-image: url('../../../../../assets/icon/test/delete_test_icon2.png');
    background-size: 100% 100%;
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 10px;
}


.mc_ti_1>.title>.btnBox .edit,
.mc_ti_2>.title>.btnBox .edit,
.mc_ti_3>.title>.btnBox .edit {
    display: block;
    background-image: url('../../../../../assets/icon/new/edit_u.png');
    background-size: 100% 100%;
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 10px;
}

.mc_ti_1>.title>.btnBox .isopen,
.mc_ti_2>.title>.btnBox .isopen {
    transform: rotate(0deg);
}

.mc_ti_1.active,
.mc_ti_2.active,
.mc_ti_3.active {
    /* border: 1px solid #0062ff; */
    /* background: rgb(239, 240, 241); */
		/* background-color: #fff;
		border-radius: 5px;
		border: 1px solid #E0EAFB;
		box-shadow: 0 0 2px 0px #cdddf8; */
		background-color: #fff;
}

.mc_ti_1.active,
.mc_ti_2.active,
.mc_ti_3.active{
	background-color: #fff;
	box-shadow: 1px 1px 20px 4px rgba(29, 57, 131, 0.05), 0px 4px 10px 0px rgba(29, 57, 131, 0.08);
	border:solid 1px #3681FC !important;
	border-radius: 6px;
}

.mc_ti_1,
.mc_ti_2,
.mc_ti_3{
	border: solid 1px #fff;
	/* padding-bottom: 10px; */
}

.mc_ti_1:hover,
.mc_ti_2:hover,
.mc_ti_3:hover {
	background-color: #fff;
	box-shadow: 1px 1px 20px 4px rgba(29, 57, 131, 0.05), 0px 4px 10px 0px rgba(29, 57, 131, 0.08);
	border: 1px solid #E0EAFB;
	border-radius: 6px;
}



.mc_ti_1.active>.title>.drag,
.mc_ti_2.active>.title>.drag,
.mc_ti_3.active>.title>.drag {
    background-image: url('../../../../../assets/icon/test/drag_icon_active.png');
}

.mc_ti_1>.title>.content,
.mc_ti_2>.title>.content,
.mc_ti_3>.title>.content {
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit_box {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0 0;
}


.dragOverTop {
    border-top: 2px solid #0061FF !important;
    border-radius: 0 !important;
    margin-top: 10px;
}

.dragOverBottom {
    border-bottom: 2px solid #0061FF !important;
    border-radius: 0 !important;
    margin-top: 10px;
}


.dialog_diy>>>.el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.content>>>.test_index{
	margin-right: 20px;
	font-size: 28px;
	font-weight: bold;

	color: #AECCFE;
}

.active>>>.test_index{
	color: #3681FC;
}

.showCheckBox{
	position: relative;
	margin-bottom: 60px;
	overflow: visible;
}

.addCheckBox{
	position: absolute;
	bottom: -50px;

}
</style>
