<template>
  <div class="c_box">
    <div class="mask" v-show="!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>{{ `（${option[cJson.type].name}）` }}</div><div v-html="cJson.title"></div></div> -->
      <div class="title">
        <div style="display: flex;">
          <!-- <span @click.stop="updateTitle()" style="min-width:fit-content">{{
            `（${option[cJson.type].name}）`
          }}</span> -->
          <span v-if="!updateList.title" @click.stop="updateTitle()">{{
            cJson.title ? cJson.title : "输入问题"
          }}</span>
					<!-- <span v-if="!cJson.title && !updateList.title" class="t_empty" @click.stop="updateTitle()">请填写标题</span> -->
          <input
            v-if="updateList.title"
            ref="titleRef"
            class="editInput"
            v-model="checkJson.title"
            @blur="save"
            @keyup.enter="save"
            placeholder="输入问题"
          />
          <span style="min-width: fit-content;color: #efa030;">{{
            cJson.score ? "（分值：" + cJson.score + "分）" : ""
          }}</span>
        </div>

        <span
          style="color: #efa030;display: flex;margin-top: 5px;line-height: 18px;"
        >
          <!-- <span
            style="min-width: fit-content;"
            @click.stop="updateAnswer()"
            v-if="!cJson.answer && !updateList.answer"
            >暂无参考答案</span
          >
          <span style="min-width: fit-content;display: flex;" v-else>
            <span style="min-width: fit-content;" @click.stop="updateAnswer()"
              >参考答案：</span
            >
            <span v-if="!updateList.answer" @click.stop="updateAnswer()">{{
              cJson.answer
            }}</span>
          </span> -->

          <input
            v-if="updateList.answer"
            ref="answerRef"
            class="editInput answerInput"
            v-model="checkJson.answer"
            @blur="save"
            @keyup.enter="save"
            placeholder="请填写参考答案"
          />
        </span>
        <!-- </div><div v-html="cJson.title"></div> -->
      </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">
        <textarea
          readonly
          rows="2"
          class="binfo_input binfo_textarea"
          cols
          placeholder="填写者回答区"
        ></textarea>
      </div>
    </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,
        brief: false,
        answer: false
      }
    };
  },
  watch: {
    checkJson: {
      handler(newVal) {
        // console.log("测试测试保存",newVal)
        this.$emit("setJson", newVal, this.index);
        console.log("gapW", this.cJson);
      },
      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));
    },
    numberPan() {
      if (/[^\d]/.test(this.checkJson.score) || this.checkJson.score < 0) {
        this.$message.error("请输入大于0的数字");
        this.checkJson.score = "";
      }
    },
    updateTitle() {
      this.updateList.title = true;
      this.$nextTick(() => {
        // 聚焦到输入框
        this.$refs["titleRef"].focus();
      });
    },
    updateDetail(){
      this.updateList.detail = true;
      this.$nextTick(() => {
        // 聚焦到输入框
        this.$refs["detailRef"].focus();
      });
    },
    updateAnswer() {
      this.updateList.answer = true;
      this.$nextTick(() => {
        // 聚焦到输入框
        this.$refs["answerRef"].focus();
      });
    },
    save() {
      for (let key in this.updateList) {
        this.updateList[key] = false;
      }
    }
  },
  mounted() {

  }
};
</script>

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

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

.binfo_textarea {
  border: 1.5px solid #cad1dc;
  font-size: 16px;
  resize: none;
  /* background: #f6f6f6; */
  font-family: "Microsoft YaHei";
}

.binfo_input:focus-visible {
  border: 1.5px solid #3681fc !important;
}
</style>
