<template>
  <div class="student-score">
    <div class="part-box">
      <Form ref="FilterForm" label-position="left" inline>
        <FormItem label="科目：">
          <Select v-model="filter.subjectId" placeholder="请选择科目">
            <Option value=""></Option>
          </Select>
        </FormItem>

        <FormItem label="号码：">
          <Select
            v-model="filter.codeType"
            placeholder="请选择号码类型"
            style="width: 150px"
          >
            <Option
              v-for="(val, key) in CODE_TYPE"
              :key="key"
              :value="key"
              :label="val"
            ></Option>
          </Select>
        </FormItem>
        <FormItem>
          <Input
            v-model.trim="filter.code"
            placeholder="请输入号码"
            clearable
          ></Input>
        </FormItem>
        <FormItem label="姓名：">
          <Input
            v-model.trim="filter.name"
            placeholder="请输入姓名"
            clearable
          ></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" icon="ios-search" @click="toSearch"
            >查询</Button
          >
        </FormItem>
      </Form>
      <!--  -->
      <image-action-list
        :data="papers"
        ref="ImageActionList"
        style="text-align:center;"
      ></image-action-list>

      <div class="student-info">
        <table class="table" v-if="curPaper.id">
          <tr>
            <td>姓名</td>
            <td colspan="3">{{ curPaper.studentName }}</td>
          </tr>
          <tr>
            <td>考号</td>
            <td colspan="3">{{ curPaper.examNumber }}</td>
          </tr>
          <tr>
            <td>档位</td>
            <td>A</td>
            <td>B</td>
            <td>C</td>
          </tr>
          <tr>
            <td>分数</td>
            <td>95</td>
            <td>空</td>
            <td>空</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { studentScoreList } from "@/api";
import { CODE_TYPE } from "@/constants/enumerate";
import ImageActionList from "./components/ImageActionList";

export default {
  name: "student-score",
  components: { ImageActionList },
  data() {
    return {
      filter: {
        subjectId: "",
        codeType: "",
        code: "",
        name: ""
      },
      CODE_TYPE,
      papers: [
        {
          id: "1",
          title: "2020105133",
          url:
            "http://127.0.0.1:9000/api/file/image/download/33/1/833/1?random=fa8244bb-8ec4-46c1-a16e-1bd6f3b8848e",
          thumbUrl:
            "http://127.0.0.1:9000/api/file/image/download/33/1/833/2?random=497cc903-c01a-458a-9b4e-82b391cef176"
        },
        {
          id: "2",
          title: "2020105133",
          url:
            "http://127.0.0.1:9000/api/file/image/download/33/1/833/1?random=fa8244bb-8ec4-46c1-a16e-1bd6f3b8848e",
          thumbUrl:
            "http://127.0.0.1:9000/api/file/image/download/33/1/833/2?random=497cc903-c01a-458a-9b4e-82b391cef176"
        },
        {
          id: "3",
          title: "2020105133",
          url:
            "http://127.0.0.1:9000/api/file/image/download/33/1/833/1?random=fa8244bb-8ec4-46c1-a16e-1bd6f3b8848e",
          thumbUrl:
            "http://127.0.0.1:9000/api/file/image/download/33/1/833/2?random=497cc903-c01a-458a-9b4e-82b391cef176"
        }
      ],
      curPaper: { id: "12", studentName: "张三", examNumber: "12345678912" }
    };
  },
  methods: {
    async toSearch() {
      const data = await studentScoreList(this.filter);
      console.log(data);
    }
  }
};
</script>
