<template>
  <div class="c_box">
    <div class="choice_box">
      <div class="title" style="display: flex;">
        <span style="min-width: fit-content;">{{ tindex + 1 + '、' }}</span>
        <span>{{ checkJson.title }}</span>
      </div>
      <div
        class="detail"
        v-if="checkJson.detail"
        v-html="checkJson.detail"
        style="color: #00000099;margin-top: 5px;"
      ></div>

      <div class="choices">
        <el-input-number :controls="false" v-model="checkJson.answer2" :precision="numberTypePrecision" :placeholder="numberTypePlaceholder[checkJson.type]"></el-input-number>
        <span v-if="checkJson.type=='4'">%</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tindex: {
      type: Number
    },
    cJson: {
      type: Object
    },
    checktype: {
      type: Number,
      default: 1
    },
    see: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      option: {
        1: { name: '附件' }
      },
      userid: this.$route.query.userid,
      checkJson: {
				title:"",
				detail:""
			},
      numberTypePlaceholder:{
            "1":"请输入整数",
            "2":"请输入数字并保留一位小数",
            "3":"请输入数字并保留两位小数",
            "4":"请输入百分比"
          },
    }
  },
  watch: {
    checkJson: {
      handler(newValue) {
        this.$emit('update:cJson', newValue)
      },
      deep: true
    }
  },
  computed:{
    numberTypePrecision(){
      let _result = 0;
      if(this.checkJson.type=='1'){
        _result = 0
      }else if(this.checkJson.type=='2'){
        _result = 1
      }else if(this.checkJson.type=='3'){
        _result = 2
      }else if(this.checkJson.type=='4'){
        _result = 0
      }

      return _result
    }
  },
  methods: {
    depthCopy(s) {
      return JSON.parse(JSON.stringify(s))
    },
  },
  mounted() {
    this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
  }
}
</script>

<style scoped>
.c_box {
  width: 100%;
  position: relative;
}

/* .mask {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
} */

.choice_box {
  white-space: pre-line;
}

.choice_box > .title {
  font-weight: bold;
  width: 100%;
  word-break: break-all;
}

.choice_box > .choices {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.choices > .page {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.choices>span{
  font-size: 20px;
}

.p_page {
  margin: 0 10px;
}

.course {
  display: flex;
  align-items: center;
  cursor: pointer;
}

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

.course > .banner {
  min-width: 100px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #3896fc;
  box-sizing: border-box;
  padding: 5px;
  margin-right: 15px;
}
.course > .banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course > .content {
  max-width: calc(100% - 100px - 15px);
}
.course > .content > .c_c {
  display: flex;
}
.course > .content > .c_c + .c_c {
  margin-top: 5px;
}
.course > .content > .c_c span:nth-child(1) {
  min-width: fit-content;
}
.course > .content > .c_c span:nth-child(2) {
  word-break: break-word;
}
</style>
