<template>
  <NavHeader/>
  <bread-crumb/>
  <div class="w-1200px m-auto">
    <div class="relative -mt-40px flex justify-end">
      <button type="button" class="back-btn" @click="linkTo('process')">返回</button>
    </div>
    <div class="mt-10px w-full bg-hex-fff py-20px px-15px">
      <div class="flex items-center">
        <el-select v-model="sm_id" placeholder="全部学校" size="large" @change="filterSchool">
          <el-option label="全部" value=""
          />
          <el-option
            v-for="item in school_list"
            :key="item.sm_id"
            :label="item.sm_name"
            :value="item.sm_id"
          />
        </el-select>
        <el-select class="ml-20px" v-model="cm_id" :disabled="sm_id === ''" placeholder="全部班级" size="large"
                   @change="filterData">
          <el-option label="全部" value=""
          />
          <el-option
            v-for="item in classes_list"
            :key="item.cm_id"
            :label="item.cm_name"
            :value="item.cm_id"
          />
        </el-select>
        <el-input
          v-model="keyword"
          class="ml-20px"
          style="width: 200px;"
          size="large"
          @keyup.enter="filterData"
          @clear="filterData"
          clearable
          placeholder="请输入关键字"
        />
        <el-button color="#003eee" class="ml-20px" type="primary" size="large" @click="filterData">搜索</el-button>
      </div>
      <div v-if="tableData.length > 0">
        <table class="mt-20px data-table" cellpadding="0" cellspacing="0">
          <tr>
            <th>学校</th>
            <th>班级</th>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
            <th>主观题得分</th>
            <th>客观题得分</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in tableData">
            <td>{{ item.sm_name }}</td>
            <td>{{item.cm_name}}</td>
            <td>{{item.student_no}}</td>
            <td>{{item.user_realname}}</td>
            <td>{{item.ysk_cj}}</td>
            <td>{{item.ysk_cj_zg}}</td>
            <td>{{item.ysk_cj_kg}}</td>
            <td>
               <button type="button" class="op-btn" @click="toRevise(item)">修改成绩</button>
            </td>
          </tr>
        </table>
        <div class="mt-20px page-new flex justify-end">
          <el-pagination v-model:current-page="cur_page" v-model:page-size="limit" layout="total,prev, pager, next"
                         :total="total" :background="true" @current-change="handleSelectionChange"></el-pagination>
        </div>
      </div>
      <div v-else class="no-data">
        <div>
          <h3 class="no-data-img"></h3>
          <h4 class="mt-25px text-18px text-hex-0048e5 text-center">暂无数据</h4>
        </div>
      </div>
    </div>

  </div>

  <commonFooter/>
</template>
<route lang="json">
{
"meta":{
"title":"修改成绩",
"breadcrumb":true
}
}
</route>
<script setup>
import {useRouter} from "vue-router";
import request from "~/utils/request";
import {REQUEST} from "~/utils/request";
import {user} from "~/store";

const router = useRouter();
const route = useRoute();
const linkTo = (name) => {
  router.push({name});
};
let ze_id = $ref('')
let sm_id = $ref('');
let cm_id = $ref('');
let school_list = $ref([]);
let classes_list = $ref([]);
let keyword = $ref('');
let tableData = $ref([]);
let limit = $ref(10);
let total = $ref(0);
let cur_page = $ref(1);

function getListData() {
  let data = {
    ze_id: ze_id,
    sm_id: sm_id,
    cm_id: cm_id,
    keyword: keyword,
    page: cur_page,
    limit: limit,
  };
  request({
    url: "/yzy/xsjjdtk/index",
    data: data,
  }).then((res) => {
    if (res.code === '1') {
      tableData = res.data.page_data;
      total = Number(res.data.total_rows);
      cur_page = Number(res.data.page_now);
    }
  })
}

function getSchool() {
  let data = {
    ze_id: ze_id
  };
  request({
    url: "/yzy/xsjjdtk/school_class",
    data: data,
  }).then((res) => {
    if (res.code === '1') {
      school_list = res.data.list;
    }
  })
}

function filterData() {
  cur_page = 1;
  getListData();
}

function filterSchool() {
  for (let i in school_list) {
    if (school_list[i].sm_id === sm_id) {
      classes_list = school_list[i].classes;
    }
  }
  filterData();
}
function toRevise(item) {
  router.push({name:'process-xgfs-ze_id-ysk_id',params:{ze_id:item.ze_id,ysk_id:item.ysk_id}});
}
const handleSelectionChange = (val) => {
  cur_page = val;
  getListData();
};
if (route.params.id) {
  ze_id = route.params.id;
  getListData();
  getSchool();
}
</script>

<style lang="scss" scoped>
$color: #0048e5;
::v-deep .el-pagination.is-background .btn-next.is-active,
::v-deep .el-pagination.is-background .btn-prev.is-active,
::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: $color;
}

.data-table {
  width: 100%;
  table-layout: fixed;

  tr:nth-child(even) {
    background: #F1F7FF;
  }

  th {
    height: 74px;
    background: $color;
    font-weight: normal;
    text-align: center;
    font-size: 16px;
    color: #fff;
    &:first-child{
      border-radius: 6px 0 0 0;
    }
    &:last-child{
      border-radius: 0 6px 0 0;
    }
  }

  td {
    padding: 15px 0;
    font-size: 16px;
    color: #474747;
    text-align: center;
  }
}

.no-data {
  width: 100%;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;

  .no-data-img {
    width: 233px;
    height: 199px;
    background: url("/images/no-data.png") center no-repeat;
  }
}
.op-btn {
  width: 82px;
  height: 30px;
  background: #fff;
  border: 1px solid #003eee;
  border-radius: 2px;
  font-size: 14px;
  color: #003eee;
  text-align: center;
  &:disabled{
    background: #ccc;
    border-color: #ccc;
    color: #fff;
    pointer-events: none;
  }
}
</style>
