<template>
  <div class="topicInfoBox">
    <!-- <el-image :src="question.questionImage" style="width: 80%;pointer-events: none;"></el-image> -->
    <!-- <div class="introduce title">
      [{{ props.type == "select" ? "选择题" : "填空题" }}]{{ props.introduce }}
    </div>
    <div class="introduce tag">
      <el-tag v-for="itme in props.tags" :key="itme.name" type="primary">{{
        itme.name
      }}</el-tag
      >&nbsp;
    </div>
    <div class="introduce hod" >
      <div v-html="props.topicTitle" style="width: 400px;">
        
      </div>
    </div>
    <div class="introduce">
      <el-radio-group v-if="props.type != 'fill_topic'" v-model="radio">
        <el-radio
          v-for="itme in topicSelect"
          :key="itme.key"
          :value="itme.key"
          >{{ itme.key + "." + itme.name }}</el-radio
        >
      </el-radio-group>
      <el-input
        v-else
        v-model="radio"
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
      ></el-input>
    </div>
  -->
    <div class="button">
      <el-button  type="primary"  @click="tupClick"
        >作答</el-button
      > 
    </div>
    <!-- <el-button  type="primary" style="z-index: 9;" @click="show=true">查看答案</el-button>
    <div class="introduce jg" v-if="show">
     
      <span>正确答案：{{ ArrayToString(native.correctAnswer) }}</span>
    </div> -->
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useTopicStore } from "@/stores/topic.js";
import { ElMessage } from "element-plus";
const topStore = useTopicStore();
const radio = ref("");
const show = ref(false);
const props = defineProps({
  id: { type: Number, default: null },
  videoUrl: { type: String, default: null },
  topicList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  native: {
    type: Object,
    default: () => {
      return {
        isAnswer: false,
        analysis: "解析",
        correctAnswer: "正确答案",
        //是否答对
        correct: false,
      };
    },
  },
  question: {
    type: Object,
    default: () => {
      return {};
    },
  },
  type: { type: String, default: null },
  topicTitle: { type: String, default: "题目" },
  introduce: { type: String, default: "介绍" },
  tags: { type: Array, default: null },
});
const tupClick = async () => {
 
  let res = await topStore.submitAnswer(radio.value);

};
const ArrayToString = (arr) => {
  if (arr instanceof Array) {
    return arr.join(",");
  } else if (arr instanceof Object) {
    return arr.toSting();
  } else {
    return arr;
  }
};
const topicSelect = ref([]);
console.log("props.native", props.question);

onMounted(() => {
  topicSelect.value = props.topicList;
  radio.value = props.native.userAnswer ? props.native.userAnswer : null;
});
</script>
<style lang="scss" scoped>
.button{
  z-index: 99;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.topicInfoBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: "KaiTi";
}
.introduce {
  z-index: 9;
  margin: 10px auto;
  width: 90%;
  word-break: normal;
  word-wrap: break-word;
  img {
    width: 60%;
  }
}
.title {
  font-size: 17px;
  line-height: 17px;
  margin-top: 30px;
}
.tag {
  margin-top: 10px;
}
.jg {
  width: 100%;
  height: 17vw;
  box-sizing: border-box;
  padding-top: 19%;
  padding-left: 23%;
  font-family: "黑体";
  font-size: 17px;
  line-height: 17px;
  // background-color: aqua;
  background-image: url("@/assets/image/bltt.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
