<template>
  <div class="c_box">
    <div class="mask" v-if="!isOpen"></div>
    <!-- <div v-if="!cJson">暂未设置题目</div> -->
    <div class="choice_box">
      <div class="title" style="display: flex;">
        <span v-if="!updateList.title" @click.stop="updateTitle()">{{ 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>
      <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>
  </div>
</template>

<script>
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,
        detail: false,
      }
    };
  },
  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));
    },
		save() {
      for (let key in this.updateList) {
        this.updateList[key] = false;
      }
    },
		updateTitle(){
			this.updateList.title = true;
			this.$nextTick(()=>{
				this.$refs["titleRef"].focus();
			})
		},
		updateDetail(){
			this.updateList.detail = true;
			this.$nextTick(()=>{
				this.$refs["detailRef"].focus();
			})
		}
  },
  mounted() {
    // if (!this.cJson || Object.keys(this.cJson).length == 0) {
    //   this.checkJson = {
    //     title: "标题",
    //     detail: ""
    //   };
    // } else {
    //   this.checkJson = this.depthCopy(this.cJson2);
    //   this.courses = this.checkJson.courses;
    // }
  }
};
</script>

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

.choice_box > .detail {
  width: 100%;
  word-break: break-all;
  color: rgb(136, 139, 146);
  margin: 10px 0 0;
}

.choice_box > .choices {
  margin-top: 10px;
}

.binfo_input {
  width: 100%;
  margin: 0;
  padding: 10px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 5px;
  background: #fff;
  font-size: 16px;
  resize: none;
  font-family: "Microsoft YaHei";
  min-height: 120px;
  /* border: 1px solid #3682fc00; */
  border: 1.5px solid #e0e0e0;
}

.binfo_input > div {
  border: 1.5px dashed #dfdfdf;
  height: 120px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(249, 250, 251);
  color: rgb(124, 124, 124);
  border-radius: 5px;
}
</style>
