<template>
  <div>
    <el-descriptions title="摘要详情" :column="3">
      <el-descriptions-item label="活动名称">测评活动</el-descriptions-item>
      <el-descriptions-item label="任务来源">演示-心灵伙伴</el-descriptions-item>
      <el-descriptions-item label="发起人">王丹</el-descriptions-item>
      <el-descriptions-item label="相关量表">
        气质类型测试量表
      </el-descriptions-item>
      <el-descriptions-item label="自动重测">
        <el-radio-group v-model="radio">
          <el-radio :value="0">禁用</el-radio>
          <el-radio :value="1">启用</el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item label="活动类型">
        普测
      </el-descriptions-item>
      <el-descriptions-item label="活动时间">
        2024-04-01至2024-04-30
      </el-descriptions-item>
      <el-descriptions-item label="刷新时间">
        2024-04-22 14：22：04
      </el-descriptions-item>
      <el-descriptions-item label="自动刷新">
        <el-radio-group v-model="radio">
          <el-radio :value="0">禁用</el-radio>
          <el-radio :value="1">启用</el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item label="施测对象">
        学生
      </el-descriptions-item>
      <el-descriptions-item label="拍照验证">
        <el-radio-group v-model="radio">
          <el-radio :value="0">禁用</el-radio>
          <el-radio :value="1">启用</el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item label="参与人员">
        五年级一班
      </el-descriptions-item>
    </el-descriptions>

    <el-card style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>摘要列表</span>
        </div>
      </template>

      <el-row justify="start">
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="年级" prop="grade">
            <el-input v-model="queryParams.grade" placeholder="请输入年级" clearable style="width: 240px"
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="班级" prop="class">
            <el-input v-model="queryParams.class" placeholder="请输入班级" clearable style="width: 240px"
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="用户姓名" prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入用户姓名" clearable style="width: 240px"
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row justify="center">
        <el-table :data="completeTableData" style="width: 100%;">
          <el-table-column prop="scaleName" label="量表" />
          <el-table-column prop="userName" label="用户姓名" />
          <el-table-column prop="gradeClass" label="班级" />
          <el-table-column prop="status" label="不适合原因" />
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const radio = ref(0)

const queryFormRef = ref()
const queryParams = ref({
  grade: '',
  class: '',
  userName: ''
})

function handleQuery() {

}

function resetQuery() {

}

const completeTableData = [
  {
    scaleName: '气质类型测试量表',
    userName: '墨渊',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '白真',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '苏誉',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '白浅',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '凤九',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '张依依',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '赵莹',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '李风茹',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '宁淑萍',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '白清月',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '王兰婷',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '苏枫明嘉',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '贾子又',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '墨渊',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '墨渊',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '墨渊',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '墨渊',
    gradeClass: '五年级一班',
    status: '未测',
  },
  {
    scaleName: '气质类型测试量表',
    userName: '墨渊',
    gradeClass: '五年级一班',
    status: '未测',
  }
]

</script>

<style lang="scss" scoped></style>