<template>
  <!-- 成绩查询 成绩单 -->
  <ReportModule :showTitle="false" :showDescribe="false" tableOrChart="table">
    <template #title_left>
      <el-input v-model="state.keyWord" style="width: 200px" placeholder="请输入学号或姓名" class="input_with">
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
      <span class="count_item">应考：293人</span>
      <span class="count_item">实考：280人</span>
      <span class="count_item orange">缺考：13人</span>
    </template>
    <template #title_right>
      <el-checkbox-group class="checkbox_group" v-model="state.checkList">
        <el-checkbox label="显示分组" value="group" />
        <el-checkbox label="显示小题" value="question" />
      </el-checkbox-group>
    </template>
    <template #module_table_chart>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </template>
  </ReportModule>
</template>
<script lang="ts" setup>
import ReportModule from '@/components/ReportModule.vue';
import { Search } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from "vue";
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const state = reactive({
  keyWord: '',
  checkList: ['group']
});
onMounted(() => { });
</script>

<style lang="scss" scoped>
.input_with {
  margin-right: 10px;
}

.count_item {
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  line-height: 24px;
  margin-left: 10px;

  &.orange {
    color: #FB9F34;
  }
}

.checkbox_group {
  :deep(.el-checkbox) {
    margin-right: 10px;

    &:nth-child(1) {
      margin-right: 20px;
    }
  }
}
</style>
