<template>
  <el-tabs v-model="activeName">
    <el-tab-pane class="pt10" label="体检登记" name="first">
      <el-form :inline="true" :model="firstForm">
        <el-form-item class="mr10" label="年级：">
          <el-select v-model="firstForm.grade" placeholder="请选择年级">
            <el-option
              v-for="item in gradeList"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mr10" label="班级：">
          <el-select v-model="firstForm.class" placeholder="请选择班级">
            <el-option
              v-for="item in classList"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mr10" label="晨午检：">
          <el-select v-model="firstForm.type" placeholder="请选择检查类别">
            <el-option
              v-for="item in typeList"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mr10" label="体检日期：">
          <el-date-picker
            style="width: 100%"
            value-format="yyyy-MM-dd"
            v-model="firstForm.time"
            type="date"
            placeholder="请选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-button type="primary">导出</el-button>
      <el-table
        :data="firstTable"
        tooltip-effect="dark"
        class="mt20"
        style="width: 100%"
      >
        <el-table-column type="selection" align="center" width="55">
        </el-table-column>
        <el-table-column
          label="晨午检"
          prop="cwj"
          width="100"
        ></el-table-column>
        <el-table-column label="年级" prop="nj" width="150"> </el-table-column>
        <el-table-column label="体检日期" prop="tjrq" width="150">
        </el-table-column>
        <el-table-column
          label="应到人数"
          prop="ydrs"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="实到人数"
          prop="sdrs"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="因病缺勤人数"
          prop="ybqqrs"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          label="因事缺勤人数"
          align="center"
          prop="ysqqrs"
          width="150"
        >
        </el-table-column>
        <el-table-column
          label="异常学生人数"
          align="center"
          prop="ycxsrs"
          width="150"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="">查看 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <footer
        class="flex-item-none"
        style="display: flex; justify-content: flex-end; margin-top: 30px"
      >
        <el-pagination
          background
          layout="total,prev, pager, next"
          :page-size="limit"
          :total="total"
          :current-page.sync="cur_page"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </footer>
    </el-tab-pane>
    <el-tab-pane class="pt10" label="异常学生" name="second">
      <el-form :inline="true" :model="secondForm">
        <el-form-item class="mr10" label="年级：">
          <el-select v-model="secondForm.grade" placeholder="请选择年级">
            <el-option
              v-for="item in gradeList"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mr10" label="班级：">
          <el-select v-model="secondForm.class" placeholder="请选择班级">
            <el-option
              v-for="item in classList"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mr10" label="晨午检：">
          <el-select v-model="secondForm.type" placeholder="请选择检查类别">
            <el-option
              v-for="item in typeList"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mr10" label="体检日期：">
          <el-date-picker
            style="width: 100%"
            v-model="secondForm.time"
            type="date"
            placeholder="请选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="mr10" label="体检结果：">
          <el-select v-model="secondForm.tjjg" placeholder="请选择体检结果">
            <el-option
              v-for="item in jgList"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mr10" label="学生姓名：">
          <el-input
            v-model="secondForm.xsxm"
            placeholder="输入学生姓名"
          ></el-input>
        </el-form-item>
        <el-form-item class="mr10" label="学籍号：">
          <el-input
            v-model="secondForm.xsxh"
            placeholder="输入学籍号"
          ></el-input>
        </el-form-item>
        <el-button type="primary">搜索</el-button>
      </el-form>
      <el-button type="primary">导出</el-button>
      <el-table
        :data="secondTable"
        tooltip-effect="dark"
        class="mt20"
        style="width: 100%"
      >
        <el-table-column type="selection" align="center" width="55">
        </el-table-column>
        <el-table-column
          label="学生姓名"
          prop="xsxm"
          width="100"
        ></el-table-column>
        <el-table-column label="学籍号" prop="xsxh" align="center" width="150">
        </el-table-column>
        <el-table-column label="性别" prop="xb" width="100"> </el-table-column>
        <el-table-column label="年龄" prop="nl" align="center" width="100">
        </el-table-column>
        <el-table-column label="晨午检" prop="cwj" width="100">
        </el-table-column>
        <el-table-column label="班级" prop="bj" width="150"> </el-table-column>
        <el-table-column
          label="体检日期"
          align="center"
          prop="tjrq"
          width="150"
        >
        </el-table-column>
        <el-table-column label="体检结果" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.tjjg == 1">正常</span>
            <span v-else class="text-red">异常</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="">查看 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <footer
        class="flex-item-none"
        style="display: flex; justify-content: flex-end; margin-top: 30px"
      >
        <el-pagination
          background
          layout="total,prev, pager, next"
          :page-size="limit"
          :total="total"
          :current-page.sync="cur_page"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </footer>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      activeName: "first",
      limit: 10,
      total: 12,
      cur_page: 1,
      firstForm: {
        grade: "",
        class: "",
        type: "",
        time: "",
      },
      secondForm: {
        grade: "",
        class: "",
        type: "",
        time: "",
        xsxm: "",
        xsxh: "",
        tjjg: "",
      },
      gradeList: [
        {
          label: "六年级",
          value: 1,
        },
        {
          label: "五年级",
          value: 2,
        },
        {
          label: "四年级",
          value: 3,
        },
        {
          label: "三年级",
          value: 4,
        },
      ],
      classList: [
        {
          label: "一班",
          value: 1,
        },
        {
          label: "二班",
          value: 2,
        },
        {
          label: "三班",
          value: 3,
        },
        {
          label: "四班",
          value: 4,
        },
      ],
      typeList: [
        {
          label: "晨检",
          value: 1,
        },
        {
          label: "午检",
          value: 2,
        },
      ],
      jgList: [
        {
          label: "正常",
          value: 1,
        },
        {
          label: "异常",
          value: 2,
        },
      ],
      firstTable: [
        {
          id: 1,
          cwj: "晨检",
          nj: "一年级",
          tjrq: "2022-01-21",
          ydrs: "150",
          sdrs: "148",
          ybqqrs: "1",
          ysqqrs: "1",
          ycxsrs: "0",
        },
        {
          id: 1,
          cwj: "晨检",
          nj: "一年级",
          tjrq: "2022-01-21",
          ydrs: "150",
          sdrs: "148",
          ybqqrs: "1",
          ysqqrs: "1",
          ycxsrs: "0",
        },
        {
          id: 3,
          cwj: "晨检",
          nj: "一年级",
          tjrq: "2022-01-21",
          ydrs: "150",
          sdrs: "148",
          ybqqrs: "1",
          ysqqrs: "1",
          ycxsrs: "0",
        },
        {
          id: 4,
          cwj: "晨检",
          nj: "一年级",
          tjrq: "2022-01-21",
          ydrs: "150",
          sdrs: "148",
          ybqqrs: "1",
          ysqqrs: "1",
          ycxsrs: "0",
        },
        {
          cwj: "午检",
          nj: "一年级",
          tjrq: "2022-01-21",
          ydrs: "150",
          sdrs: "148",
          ybqqrs: "1",
          ysqqrs: "1",
          ycxsrs: "0",
        },
      ],
      secondTable: [
        {
          id: 1,
          xsxm: "田静",
          xsxh: "02369874512",
          xb: "男",
          nl: "12",
          cwj: "晨检",
          bj: "一年级一班",
          tjrq: "2022-01-21",
          tjjg: "2",
        },
        {
          id: 1,
          xsxm: "田静",
          xsxh: "02369874512",
          xb: "男",
          nl: "12",
          cwj: "晨检",
          bj: "一年级一班",
          tjrq: "2022-01-21",
          tjjg: "2",
        },
        {
          id: 3,
          xsxm: "田静",
          xsxh: "02369874512",
          xb: "男",
          nl: "12",
          cwj: "晨检",
          bj: "一年级一班",
          tjrq: "2022-01-21",
          tjjg: "2",
        },
        {
          id: 4,
          xsxm: "田静",
          xsxh: "02369874512",
          xb: "男",
          nl: "12",
          cwj: "晨检",
          bj: "一年级一班",
          tjrq: "2022-01-21",
          tjjg: "2",
        },
        {
          xsxm: "田静",
          xsxh: "02369874512",
          xb: "男",
          nl: "12",
          cwj: "晨检",
          bj: "一年级一班",
          tjrq: "2022-01-21",
          tjjg: "2",
        },
      ],
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.cur_page = val;
    },
  },
};
</script>

<style scoped>
</style>