<template>
  <div class="detail-question-part">
    <div class="detail-question-header">
      <div>
        <el-tag size="mini" effect="dark" type="success">{{
          question.questionType | questionType
        }}</el-tag>
        <span class="inline-middle margin-left-10">小题分数：</span>
        <el-input-number
          v-model="score"
          placeholder="请输入小题分数"
          size="mini"
          :step="0.1"
          :min="0.1"
          :max="999"
          :controls="false"
          :precision="1"
          step-strictly
          @change="scoreChange"
        >
        </el-input-number>
      </div>
      <div v-if="showAction">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          title="编辑"
          @click.stop="editQuestion"
        ></el-button>
        <el-button
          class="btn-danger"
          size="mini"
          type="text"
          icon="el-icon-delete"
          title="删除"
          @click.stop="removeQuestion"
        ></el-button>
      </div>
    </div>
    <div class="detail-question-body">
      <question-base-preview
        :question="question"
        :question-serialno="questionSerialno"
      ></question-base-preview>
    </div>
  </div>
</template>

<script>
import QuestionBasePreview from "../../question/components/QuestionBasePreview.vue";

export default {
  name: "BuildPaperQuestionBase",
  components: { QuestionBasePreview },
  props: {
    value: {
      type: Number,
      default: undefined,
    },
    question: {
      type: Object,
      default() {
        return {};
      },
    },
    questionSerialno: {
      type: [String, Number],
      default: null,
    },
    showAction: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      score: "",
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.score = val;
      },
    },
  },
  methods: {
    scoreChange() {
      this.$emit("input", this.score);
    },
    editQuestion() {
      this.$emit("on-edit", this.question);
    },
    removeQuestion() {
      this.$emit("on-remove", this.question);
    },
  },
};
</script>
