<template>
  <div class="c_box">
    <div class="mask" v-if="!isOpen"></div>
    <!-- <div v-if="!cJson">暂未设置题目</div> -->
    <div class="set_box" v-if="!cJson">请设置题目</div>
    <div v-else class="choice_box">
      <div class="title">
        <div style="display: flex;">
          <!-- <span @click.stop="updateTitle()" style="min-width:fit-content">{{
            `（${option[cJson.type].name}）`
          }}</span
          > -->
					<span @click.stop="updateTitle()" v-if="!updateList.title">{{
            cJson.title ? cJson.title : "输入问题"
          }}</span>
          <input
            v-if="updateList.title"
            ref="titleRef"
            class="editInput"
            v-model="checkJson.title"
            @blur="save"
            @keyup.enter="save"
            placeholder="输入问题"
          />
        </div>
        <span style="color: #efa030;" v-if="cJson.score"
          >（{{ "分值：" + cJson.score + "分" }}）</span
        >
      </div>
      <div class="detail" v-if="!updateList.detail" @click.stop="updateDetail()">{{ cJson.detail?cJson.detail:"暂无描述" }}</div>
			  <input
          v-if="updateList.detail"
          ref="detailRef"
          class="editInput"
          v-model="checkJson.detail"
          @blur="save"
          style="margin-top: 10px;color: rgb(136, 139, 146);"
          @keyup.enter="save"
          placeholder="请填写描述说明"
        />
      <div class="choices">
        <div class="choice" :class="{dragTop:(dragIndex!=index&&dragNewIndex==index&&dragIndex>index),dragBottom:(dragIndex!=index&&dragNewIndex==index&&dragIndex<index)}" v-for="(item, index) in cJson.array" :key="index" :draggable="dragIndex==index" @dragStart="dragStart(index)" @dragover.prevent="dragOver(index)"  @dragend="dragEnd()">
          <span class="dragIcon"  @mousedown="setDrag(index)" @mouseup="clearDrag()">
            <img v-if="dragIndex===index" src="../../../../../../assets/icon/test/drag_icon.png">
            <img v-else src="../../../../../../assets/icon/test/drag_icon_active.png">
          </span>
          <div
            class="choice_c"
            v-if="cJson.type == 2"
             @click.stop="updateLabel(index)"
          >
            <el-checkbox
              class="choiceInput"
              v-model="cJson.answer"
              disabled
              :label="index"
            ></el-checkbox
            ><span
              v-if="!updateList.answer || updateList.answerIndex != index"
              :class="{ right: cJson.answer.indexOf(index) != -1 }"

              >{{ item.option ? item.option : "空选项" }}</span
            >
            <input
              v-if="updateList.answer && updateList.answerIndex == index"
              style="background: none;color: #000;"
              class="editInput answerInput"
              :ref="`answerRef${index}`"
              v-model="checkJson.array[index].option"
              @blur="save"
              @keyup.enter="save"
              placeholder="请输入选项标题"
            />

            <!-- <div class="changeIndex">
              <span  @click.stop="changeIndex(index,0)">
                <svg t="1737082063936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4412" width="200" height="200"><path d="M908.8 787.2 512 396.8l-396.8 396.8c-25.6 25.6-70.4 25.6-96 0s-25.6-70.4 0-96l441.6-441.6C480 236.8 492.8 230.4 512 230.4s32 6.4 51.2 19.2l441.6 441.6c25.6 25.6 25.6 70.4 0 96C979.2 819.2 934.4 819.2 908.8 787.2z" p-id="4413"></path></svg>
                </span>
              <span  @click.stop="changeIndex(index,1)">
                <svg style="transform: rotate(180deg);" t="1737082063936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4412" width="200" height="200"><path d="M908.8 787.2 512 396.8l-396.8 396.8c-25.6 25.6-70.4 25.6-96 0s-25.6-70.4 0-96l441.6-441.6C480 236.8 492.8 230.4 512 230.4s32 6.4 51.2 19.2l441.6 441.6c25.6 25.6 25.6 70.4 0 96C979.2 819.2 934.4 819.2 908.8 787.2z" p-id="4413"></path></svg></span>
            </div> -->

            <span
              @click.stop="deleteChoice(index)"
              class="deleteChoice"
              v-if="cJson.array.length>2"
              >×</span
            >

          </div>
          <div
            class="choice_c"
            v-if="cJson.type == 1"
            @click.stop="updateLabel(index)"
          >
            <el-radio
              class="choiceInput"
              v-model="cJson.answer[0]"
              disabled
              :label="index"
            ></el-radio
            ><span
              v-if="!updateList.answer || updateList.answerIndex != index"
              :class="{ right: cJson.answer.indexOf(index) != -1 }"

              >{{ item.option ? item.option : "空选项" }}</span
            >
            <input
              v-if="updateList.answer && updateList.answerIndex == index"
              style="background: none;color: #000;"
              :ref="`answerRef${index}`"
              class="editInput answerInput"
              v-model="checkJson.array[index].option"
              @blur="save"
              @keyup.enter="save"
              placeholder="请输入选项标题"
            />
<!--
            <div class="changeIndex">
              <span  @click.stop="changeIndex(index,0)">
                <svg t="1737082063936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4412" width="200" height="200"><path d="M908.8 787.2 512 396.8l-396.8 396.8c-25.6 25.6-70.4 25.6-96 0s-25.6-70.4 0-96l441.6-441.6C480 236.8 492.8 230.4 512 230.4s32 6.4 51.2 19.2l441.6 441.6c25.6 25.6 25.6 70.4 0 96C979.2 819.2 934.4 819.2 908.8 787.2z" p-id="4413"></path></svg>
                </span>
              <span  @click.stop="changeIndex(index,1)">
                <svg style="transform: rotate(180deg);" t="1737082063936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4412" width="200" height="200"><path d="M908.8 787.2 512 396.8l-396.8 396.8c-25.6 25.6-70.4 25.6-96 0s-25.6-70.4 0-96l441.6-441.6C480 236.8 492.8 230.4 512 230.4s32 6.4 51.2 19.2l441.6 441.6c25.6 25.6 25.6 70.4 0 96C979.2 819.2 934.4 819.2 908.8 787.2z" p-id="4413"></path></svg></span>
            </div> -->

            <span
              @click.stop="deleteChoice(index)"
                v-if="cJson.array.length>2"
              class="deleteChoice"
              >×</span
            >

          </div>
        </div>
      </div>

      <div class="choiceBottom">
				<el-button type="primary" size="mini" @click.stop="addChoice">添加选项</el-button>
			</div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  props: {
    cJson: {
      type: Object
    },
		cJson2:{
			type:Object
		},
    isOpen: {
      type: Boolean,
      default: false
    },
    index: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      option: {
        1: { name: "单选题" },
        2: { name: "多选题" }
      },
      checkJson: {},
      updateList: {
        title: false,
        answer: false,
        detail:false,
        answerIndex: 0
      },
      dragIndex:null,
      dragNewIndex:null,
    };
  },
  watch: {
    checkJson: {
      handler(newVal) {
        this.$emit("setJson", newVal, this.index);
      },
      deep: true
    },
		isOpen(newValue) {
      if (newValue) {
        if (!this.cJson2 || Object.keys(this.cJson2).length == 0) {
          this.checkJson = {
            title: "标题",
            type: 1,
            answer: ""
          };
        } else {
          this.checkJson = this.depthCopy(this.cJson2);
        }
      }
    }
  },
  methods: {
    depthCopy(s) {
      return JSON.parse(JSON.stringify(s));
    },
    updateTitle() {
      this.updateList.title = true;
       if(this.cJson.title=="标题")this.checkJson.title = ""
      this.$nextTick(() => {
        this.$refs["titleRef"].focus();
      });
    },
    updateLabel(index) {
      this.updateList.answerIndex = index;
      this.updateList.answer = true;
      this.$nextTick(() => {
        console.log(this.$refs[`answerRef${index}`]);
        this.$refs[`answerRef${index}`][0].focus();
      });
    },
    updateDetail(){
      this.updateList.detail = true;
      this.$nextTick(() => {
        this.$refs[`detailRef`].focus();
      });
    },
    save() {
      for (let key in this.updateList) {
        if (typeof this.updateList[key] === "boolean") {
          this.updateList[key] = false;
        }
      }
    },
    updateAnswer(index) {
			return;
      if (this.cJson.type == 1) {
        if (this.checkJson.answer.indexOf(index) == -1) {
          this.checkJson.answer = [index];
        }
      } else if (this.cJson.type == 2) {
        if (!this.checkJson.answer) {
          this.checkJson.answer = [];
        }
        if (!this.checkJson.answer.includes(index)) {
          this.checkJson.answer.push(index);
        } else {
          this.checkJson.answer.splice(this.checkJson.answer.indexOf(index), 1);
        }
      }
    },
    deleteChoice(index) {
      this.checkJson.array.splice(index, 1);
      if (this.checkJson.answer.indexOf(index) != -1) {
        this.checkJson.answer.splice(this.checkJson.answer.indexOf(index), 1);
      }
    },
		addChoice(){
			this.checkJson.array.push({ option: "选项" + (this.checkJson.array.length + 1), img: "" })
		},
    changeIndex(index,type){
      if (type == 0 && index != 0) { // 上移
        const item = this.checkJson.array.splice(index, 1)[0];
        this.checkJson.array.splice(index - 1, 0, item);
        // this.$message.info("上移");
      } else if (type == 1 && index != this.checkJson.array.length - 1) { // 下移
        const item = this.checkJson.array.splice(index, 1)[0];
        this.checkJson.array.splice(index + 1, 0, item);
        // this.$message.info("下移");
      }
    },
    setDrag(index){
      this.dragIndex = index;
    },
    clearDrag(){
      this.dragIndex = null;
    },
    dragStart(index){

    },
    dragOver(index){
      this.dragNewIndex = index;
    },
    dragEnd(){
      if(this.dragIndex == this.dragNewIndex){
        this.dragIndex = null;
        this.dragNewIndex = null;
        return;
      }else{
        const item = this.checkJson.array.splice(this.dragIndex, 1)[0];
        this.checkJson.array.splice(this.dragNewIndex, 0, item);

        // if(this.dragIndex > this.dragNewIndex){
        //   console.log("上面")
        // }else if(this.dragIndex < this.dragNewIndex){
        //   console.log("下面")
        // }
        this.dragIndex = null;
        this.dragNewIndex = null;
      }
    }
  },
  mounted() {
    // if (!this.cJson || Object.keys(this.cJson).length == 0) {
    //   this.checkJson = {
    //     title: "标题",
    //     type: 1,
    //     array: [
    //       { option: "选项1", img: "" },
    //       { option: "选项2", img: "" }
    //     ],
    //     answer: ""
    //   };
    // } else {
    //   this.checkJson = this.depthCopy(this.cJson2);
    // }
  }
};
</script>

<style scoped>
@import "../../global_styles.css";

.choice_box > .choices > .choice {
  word-break: break-all;
  position: relative;
}
.choice_box > .choices > .choice + .choice {
  margin-top: 5px;
}
.choice_box > .choices > .choice > .choice_c {
  display: flex;
  padding: 10px 0 15px 10px;
  border: solid 1px #3681fc;
  background-color: rgba(224, 234, 251, 0.4);
  border-radius: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
  width: calc(100% - 50px - 50px - 25px);
  margin-left: 25px;
}
.choice_box > .choices > .choice > .choice_c > span {
  /* padding-right: 50px; */
  /* margin-left: 10px; */
}
.choice_box > .choices > .choice > .choice_c > .el-checkbox {
  margin-top: 4px;
  margin-right: 10px;
}
.choice_box > .choices > .choice > .choice_c > .el-radio {
  margin-top: 4px;
  margin-right: 10px;
}
.choice_c >>> .el-checkbox__label {
  display: none;
}

.choice_c >>> .el-radio__label {
  display: none;
}

.choice_c .right {
  color: #efa030;
}
/* .choice_c .right::after {
  content: "（正确答案）";
} */

/* .choice:hover > .choice_c > .deleteChoice {
  display: flex;
} */

.deleteChoice {
  max-width: 25px;
  max-height: 25px;
  min-width: 25px;
  min-height: 25px;
  position: absolute;
  right: -30px;
  transform: translateY(2px);
  border-radius: 5px;
  color: #646a73 !important;
  background-color: #fff;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  padding-right: 0 !important;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  box-sizing: border-box;
}

.deleteChoice:hover {
  background-color: #e8e9e9;
}

.changeIndex{
  width: 16px;
  height: 45px;
  position: absolute;
  right: -25px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  transform: translateY(2px);
  /* background-color: red; */
}

.changeIndex>span{
  width: 20px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  background-color: #fff;
  /* background-color: yellow; */
}

.changeIndex>span:hover{
  background-color: #e8e9e9;
}

.changeIndex>span>svg{
  width: 100%;
  height: 100%;
}

.dragIcon{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0,-60%);
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: block;
}

.dragIcon>img{
  width: 100%;
  height: 100%;
}

.dragTop::after{
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  top: -6px;
  background-color: #409EFF;
}

.dragBottom::after{
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -6px;
  background-color: #409EFF;
}
</style>
