<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { getQuestionTags } from '../../api'
import { useAppConfig } from '@/composables/useAppConfig'
const appConfig = useAppConfig()

const route = useRoute()

const modelValue: any = defineModel()

const ruleFormRef = ref<FormInstance>()

const removeQuestion = (index: number) => {
  modelValue.value.splice(index, 1)
}

let options = $ref<{ id: string; name: string }[]>()
onMounted(() => {
  const dom: any = document.querySelectorAll('.app-main')[0]
  dom.style.overflow = 'visible'
  getQuestionTags({ experiment_id: route.query.id as string }).then(res => {
    options = res.data.items
  })
})

const labelTitle = computed(() => {
  return appConfig.system === 'dml' ? '标签目录' : '标签类型'
})
</script>

<template>
  <el-card :id="`site-card${index}`" class="box-card" v-for="(item, index) in modelValue" :key="item">
    <el-icon @click="removeQuestion(index)" v-if="modelValue.length > 1" class="close" size="28" color="#c01c40"><CircleCloseFilled /></el-icon>
    <div class="head-box">
      <el-tabs v-model="item.type" type="card" class="demo-tabs">
        <el-tab-pane :label="labelTitle" :name="201"></el-tab-pane>
        <el-tab-pane label="标签" :name="202"></el-tab-pane>
      </el-tabs>
      <el-form-item label="本题分值" class="head-r">
        <el-input-number v-model="item.score" :min="1" :max="100" controls-position="right" />
      </el-form-item>
    </div>
    <el-form ref="ruleFormRef" label-width="120px" class="demo-ruleForm" status-icon>
      <el-form-item label="题目标题" :required="true">
        <el-input v-model="item.title" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="题干内容">
        <el-input v-model="item.content" :rows="5" type="textarea" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="正确答案" :required="true">
        <span v-if="item.type === 201">创建{{ labelTitle }}成功</span>
        <el-select v-else v-model="item.answer" class="m-2" placeholder="请选择" size="large">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="答案解析">
        <el-input v-model="item.answer_analysis" :rows="5" type="textarea" placeholder="请输入" />
      </el-form-item>
    </el-form>
  </el-card>
</template>
<style lang="scss" scoped>
.close {
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
}
.box-card {
  padding-top: 20px;
  position: relative;
  margin-bottom: 30px;
  overflow: visible;
}
.head-box {
  display: flex;
  margin-bottom: 30px;
  .head-r {
    margin-left: auto;
  }
}
.upload-box {
  display: flex;
  .upload-loading {
    width: 300px;
    display: flex;
    align-items: center;
    &:hover {
      .succ-icon2 {
        display: block;
      }
      .succ-icon1 {
        display: none;
      }
    }
    .succ-icon2 {
      display: none;
      cursor: pointer;
    }
  }
}
</style>
