<template>
  <div class="c_box">
    <div class="mask" v-if="!isOpen"></div>
    <div class="choice_box">
      <div class="title" style="display: flex;">
        <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>
      <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="scoreList">
        <div
          class="scoreItem"
          v-for="item in Array.from({length:checkJson.big+1},(_,i)=>i)"
					v-if="item>=checkJson.small"
          :key="item"
        >{{item}}</div>
      </div>
      <div class="setScore_box">
        <input
          @click.stop=""
          class="binfo_input"
          type="value"
          v-model.number="checkJson.small"
          @change="numberPan"
        />
        <div>
          <span>~</span>
        </div>
        <input
          @click.stop=""
          class="binfo_input"
          type="value"
          @blur="save"
          @keyup.enter="save"
          v-model.number="checkJson.big"
          @change="numberPan2"
        />
      </div>

      <!-- <div class="detail" v-if="cJson.detail">{{ cJson.detail }}</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
      }
    };
  },
  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();
      });
    },
    numberPan() {
      this.checkJson.small = Number(this.checkJson.small);
      if (/[^\d]/.test(this.checkJson.small) || this.checkJson.small < 0) {
        this.$message.error("请输入大于0的数字");
        this.checkJson.small = 0;
      } else if (this.checkJson.small === "") {
        this.checkJson.small = 0;
      } else if (this.checkJson.big <= this.checkJson.small) {
        this.$message.error("请输入小于" + this.checkJson.big + "的数字");
        this.checkJson.small = this.checkJson.big - 1;
      }
    },
    numberPan2() {
      this.checkJson.big = Number(this.checkJson.big);
      if (/[^\d]/.test(this.checkJson.big) || this.checkJson.big < 0) {
        this.$message.error("请输入大于0的数字");
        this.checkJson.big = this.checkJson.small + 1;
      } else if (this.checkJson.big === "") {
        this.checkJson.big = this.checkJson.small + 1;
      } else if (this.checkJson.big <= this.checkJson.small) {
        this.$message.error("请输入大于" + this.checkJson.small + "的数字");
        this.checkJson.big = this.checkJson.small + 1;
      }
    }
  },
  mounted() {
    // if (!this.cJson || Object.keys(this.cJson).length == 0) {
    //   this.checkJson = {
    //     title: "标题",
    //     detail: "",
    //     small: 0,
    //     big: 10
    //   };
    // } else {
    //   this.checkJson = this.depthCopy(this.cJson2);
    // }
  }
};
</script>

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

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

.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: 1px solid #cad1dc;
}

.binfo_input:focus-visible {
  border: 1px solid #3681fc !important;
}

.setScore_box {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.setScore_box > div {
  margin: auto 20px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.setScore_box > div > span {
  position: relative;
  top: 10px;
}

.setScore_box > input {
  width: 100px;
  height: 40px;
}

.scoreList {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
	margin-top: 20px;
}

.scoreItem{
	width: 35px;
	height: 35px;
	background-color: #DEE0E3;
	color: white;
	border-radius: 8px;
	display: flex;
  justify-content: center;
  align-items: center;
	margin-right: 15px;
	font-size: 18px;
	margin-bottom: 15px;
}
</style>
