<template>
  <div class="student-score">
    <div class="part-box">
      <Form ref="FilterForm" label-position="left" inline>
        <FormItem label="工作文件夹：" v-if="IS_INSPECTION">
          <Select
            v-model="filter.workId"
            placeholder="请选择工作文件夹"
            style="width: 150px"
          >
            <Option
              v-for="(work, windex) in works"
              :key="windex"
              :value="work.id"
              :label="work.name"
            ></Option>
          </Select>
        </FormItem>
        <FormItem label="考区：" v-if="IS_INSPECTION">
          <Select v-model="filter.areaDode" placeholder="请选择考区">
            <Option value=""></Option>
          </Select>
        </FormItem>

        <FormItem label="科目：">
          <Select v-model="filter.subjectId" placeholder="请选择科目">
            <Option value=""></Option>
          </Select>
        </FormItem>

        <FormItem label="号码：">
          <Select
            v-model="filter.codeType"
            placeholder="号码类型"
            style="width: 100px"
          >
            <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>
      <!--  -->
      <div class="student-score-content">
        <table class="table" v-if="curStudent.id">
          <tr>
            <td></td>
            <td :colspan="curStudent.scores.length">
              <image-action-list
                :data="curStudent.scores"
                :column-number="3"
                loop
                ref="ImageActionList"
              ></image-action-list>
            </td>
          </tr>
          <tr>
            <td>姓名</td>
            <td :colspan="curStudent.scores.length">{{ curStudent.name }}</td>
          </tr>
          <tr>
            <td>考号</td>
            <td :colspan="curStudent.scores.length">
              {{ curStudent.examNumber }}
            </td>
          </tr>
          <tr>
            <td>总分</td>
            <td :colspan="curStudent.scores.length">
              {{ curStudent.sumScore }}
            </td>
          </tr>
          <tr>
            <td>档位</td>
            <td v-for="(score, sindex) in curStudent.scores" :key="sindex">
              {{ score.grade }}
            </td>
          </tr>
          <tr>
            <td>分数</td>
            <td v-for="(score, sindex) in curStudent.scores" :key="sindex">
              {{ score.score }}
            </td>
          </tr>
        </table>
      </div>

      <div class="part-page" v-if="total > 1">
        <Page
          :current="current"
          :total="total"
          :page-size="size"
          show-total
          show-elevator
          @on-change="toPage"
        ></Page>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "student-score",
  components: { ImageActionList },
  data() {
    return {
      filter: {
        workId: this.$route.params && this.$route.params.workId,
        areaDode: "",
        subjectId: "",
        codeType: "",
        code: "",
        name: ""
      },
      CODE_TYPE,
      IS_INSPECTION: false,
      works: [],
      current: 1,
      total: 2,
      size: 1,
      curUserRoleType: "",
      curStudent: {},
      students: [
        {
          id: "12",
          name: "李刚",
          examNumber: "2020105133",
          sumScore: 240,
          scores: [
            {
              id: "1",
              subjectName: "素描",
              title: "2020105133",
              score: "95",
              grade: "A",
              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: "1",
              subjectName: "速写",
              title: "2020105133",
              score: "85",
              grade: "B",
              url:
                "http://127.0.0.1:9000/api/file/image/download/31/1/734/1?random=676176fc-24cd-407a-a7bc-fabc49bd2dbc",
              thumbUrl:
                "http://127.0.0.1:9000/api/file/image/download/31/1/734/2?random=d8d100c5-ac64-4b5a-a2fe-bce2dd8aed0f"
            },
            {
              id: "1",
              subjectName: "色彩",
              title: "2020105133",
              score: "90",
              grade: "A",
              url:
                "http://127.0.0.1:9000/api/file/image/download/31/1/733/1?random=e2966291-ffba-4b19-985d-0cad9ae1b75b",
              thumbUrl:
                "http://127.0.0.1:9000/api/file/image/download/31/1/733/2?random=5d16ebc7-0e52-493c-93fa-4850db5e2632"
            }
          ]
        },
        {
          id: "122",
          name: "李刚1",
          examNumber: "2020105132",
          sumScore: 242,
          scores: [
            {
              id: "1",
              subjectName: "素描",
              title: "2020105133",
              score: "95",
              grade: "A",
              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: "1",
              subjectName: "速写",
              title: "2020105133",
              score: "85",
              grade: "B",
              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: "1",
              subjectName: "色彩",
              title: "2020105133",
              score: "90",
              grade: "A",
              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"
            }
          ]
        }
      ]
    };
  },
  mounted() {
    this.IS_INSPECTION =
      this.$ls.get("user", { role: "" }).role === "INSPECTION";
    this.total = this.students.length;
    this.toPage(1);
    if (this.IS_INSPECTION) this.getWorkList();
  },
  methods: {
    async getWorkList() {
      const data = await workList();
      this.works = data.map(item => {
        return {
          id: item.id,
          name: item.name
        };
      });
    },
    async toSearch() {
      if (!this.filter.code || !this.filter.name) {
        this.$Message.error("号码和姓名必须填写一个");
        return;
      }
      const data = await studentScoreList(this.filter);
      console.log(data);
      this.total = data.length;
    },
    toPage(page) {
      this.current = page;
      this.curStudent = this.students[page - 1];
    }
  }
};
</script>
