<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { Document, CircleCheck, CircleClose, CircleCloseFilled } from '@element-plus/icons-vue'
import AppUpload from '@/components/base/AppUpload.vue'
import type { UploadFile } from 'element-plus'

const modelValue: any = defineModel()

const ruleFormRef = ref<FormInstance>()

// 移除上传文件
const handleRemove = (file: UploadFile) => {
  if (file) {
    modelValue.value.forEach((item: any) => {
      const index = item.files.findIndex((cItem: { url: string }) => cItem.url === file.url)
      item.files.splice(index, 1)
    })
  }
}

const handleDownload = (file: any) => {
  if (file) {
    modelValue.value.forEach((i: any) => {
      const item: any = i.files.find((item: any) => item.url === file.url)
      if (item) item.is_download = file.is_download
    })
  }
}

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

const options = $ref<{ id: number; name: string }[]>([
  { id: 401, name: '文本资料' },
  { id: 402, name: '图片资料' },
  { id: 403, name: '语音资料' },
  { id: 404, name: '视频资料' },
  { id: 405, name: 'H5资料' },
  { id: 406, name: '二维码资料' },
  { id: 407, name: '小程序资料' },
  { id: 408, name: '卡券资料' },
])
onMounted(() => {
  const dom: any = document.querySelectorAll('.app-main')[0]
  dom.style.overflow = 'visible'
})

const getTips = function (n: number) {
  const tipText: any = {
    402: '试题文件支持格式包含：png  jpg jpeg ,大小不超过5M',
    403: '试题文件支持格式包含：mp3 wav,大小不超过5M',
    404: '试题文件支持格式包含：帧率为25fps/输出码率为4M/输出格式为mp4，建议采用格式工厂等工具处理后上传。',
    405: '试题文件支持格式包含：png  jpg jpeg ,大小不超过5M',
    406: '试题文件支持格式包含：png  jpg jpeg ,大小不超过5M',
    407: '试题文件支持格式包含：png  jpg jpeg ,大小不超过5M',
    508: '试题文件支持格式包含：png  jpg jpeg ,大小不超过5M',
  }
  return tipText[n]
}
</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-select v-model="item.type" 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 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>上传成功</span>
      </el-form-item>
      <el-form-item label="答案解析">
        <el-input v-model="item.answer_analysis" :rows="5" type="textarea" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="试题文件" v-if="item.type !== 401">
        <AppUpload v-model="item.files">
          <template #tip>{{ getTips(item.type) }}</template>
          <template #file="{ file }">
            <div class="upload-box">
              <div class="upload-loading">
                <el-icon style="margin-right: 5px"><Document /></el-icon>
                <p style="margin-right: 5px">{{ file.name }}</p>
                <p v-if="file.status === 'uploading'">{{ file.percentage }}%</p>
                <template v-if="file.status === 'success'">
                  <el-icon class="succ-icon1" color="#67c23a" size="18" style="margin-left: 30px"
                    ><CircleCheck
                  /></el-icon>
                  <el-icon class="succ-icon2" size="18" style="margin-left: 30px" @click="handleRemove(file)"
                    ><CircleClose
                  /></el-icon>
                </template>
              </div>
              <el-switch
                @change="handleDownload(file)"
                v-model="file.is_download"
                size="large"
                active-text="能否下载" />
            </div>
          </template>
        </AppUpload>
      </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>
