<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'

import { useMaterial } from '../../composables/useQuestion'

defineEmits(['remove'])

const route = useRoute()

const modelValue: any = defineModel()

const formRef = ref<FormInstance>()
const form = reactive({ questions: modelValue })

const options = [
  { id: 401, name: '文本', type: '1' },
  { id: 402, name: '图片', type: '2' },
  { id: 403, name: '语音', type: '3' },
  { id: 404, name: '视频', type: '4' },
  { id: 405, name: 'H5', type: '5' },
  { id: 406, name: '二维码', type: '6' },
  { id: 407, name: '小程序', type: '7' },
  { id: 408, name: '卡券', type: '8' },
]

const aiOptions = [
  { label: '文心一言', value: '1' },
  { label: 'DeepSeek', value: '2' },
  { label: '通义千问', value: '3' },
  { label: '天工', value: '4' },
]

const { materialList } = useMaterial(route.query.id as string)

function filterMateriaList(id: number) {
  const option = options.find((item) => item.id === id)
  return materialList.value.filter((item) => item.type === option?.type)
}

defineExpose({ formRef })
</script>

<template>
  <el-form ref="formRef" label-width="120px" :model="form" scroll-to-error>
    <el-card :id="`site-card${index}`" class="box-card" v-for="(item, index) in modelValue" :key="item">
      <el-icon @click="$emit('remove', index)" v-if="modelValue.length > 1" class="close" size="28" color="#c01c40">
        <CircleCloseFilled />
      </el-icon>
      <div class="head-box">
        <el-form-item
          label="本题分值"
          class="head-r"
          :prop="`questions.${index}.score`"
          :rules="{ required: true, message: '请输入' }">
          <el-input-number v-model="item.score" :min="0" :max="100" controls-position="right" />
        </el-form-item>
      </div>
      <el-form-item label="题目标题" :prop="`questions.${index}.title`" :rules="{ required: true, message: '请输入' }">
        <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="营销物料类别"
        :prop="`questions.${index}.type`"
        :rules="{ required: true, message: '请选择' }">
        <el-radio-group v-model="item.type" placeholder="请选择">
          <el-radio v-for="item in options" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="参考答案"
        :prop="`questions.${index}.answer.choose`"
        :rules="{ required: true, message: '请选择' }">
        <el-select v-model="item.answer.choose" placeholder="请选择" clearable>
          <el-option
            v-for="materia in filterMateriaList(item.type)"
            :key="materia.id"
            :label="materia.name"
            :value="materia.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="评分AI"
        :prop="`questions.${index}.answer.ai`"
        :rules="{ required: true, message: '请选择' }">
        <el-select v-model="item.answer.ai" placeholder="请选择">
          <el-option v-for="item in aiOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="答案解析" v-if="false">
        <el-input v-model="item.answer_analysis" :rows="5" type="textarea" placeholder="请输入" />
      </el-form-item>
    </el-card>
  </el-form>
</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>
