<template>
  <div>
    <div class="search flex justify-between bg-white rounded-md">
      <el-form :inline="true" class="demo-form-inline" size="default">
        <el-form-item>
          <el-select
            v-model="form_query.sm_id"
            filterable
            clearable
            placeholder="全部学校"
          >
            <el-option
              v-for="(item, index) in tableSchoolData"
              :key="index"
              :label="item.sm_name"
              :value="item.sm_name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="initData"> 查询 </el-button>
      </div>
    </div>
    <div class="bg-white rounded-md mt-4 px-23px py-16px">
      <div class="flex justify-between pb-4 btn">
        <div>
          <el-button type="primary" @click="exportAll">导出</el-button>
        </div>
        <!-- <div class="flex content-center">
          <el-input
            v-model="form_query.keyword"
            class="w-40 mx-2"
            size="small"
            placeholder="请输搜索关键词"
            :suffix-icon="Search"
          />
          <el-button type="primary" @click="initData">搜索</el-button>
        </div> -->
      </div>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column
          prop="tjzn_name"
          label="年级"
          width="250"
        ></el-table-column>
        <el-table-column
          prop="sm_name"
          label="学校"
          width="auto"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="tjjd_zjf_sum"
          label="总积分"
          width="300"
        ></el-table-column>
        <el-table-column
          prop="tjjd_zjf_avg"
          label="平均积分"
          width="300"
        ></el-table-column>
        <el-table-column
          prop="rank"
          label="市积分排名 "
          width="300"
        ></el-table-column>
      </el-table>
      <div class="flex justify-end my-10">
        <el-pagination
          v-model:current-page="form_query.page"
          v-model:page-size="form_query.limit"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
          :background="true"
          @current-change="initData"
          :hide-on-single-page="false"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { user } from "@/store/index";
import { school_list, xxjfpm_list } from "./api";
const route = useRoute();
const ruleFormRef = ref(null);
const router = useRouter();
//学校列表
let tableSchoolData = $ref([]);
function initSchoolData() {
  school_list({ limit: 100 }).then((res) => {
    if (res.code === "1") {
      tableSchoolData = res.data.page_data;
    }
  });
}
initSchoolData();
let total = $ref(10);
let form_query = $ref({
  page: 1,
  limit: 6,
  sm_id: "",
  keyword: "",
});

let tableData = $ref([]);
function initData() {
  const data = {
    ...form_query,
  };
  xxjfpm_list(data).then((res) => {
    if (res.code == "1") {
      tableData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
initData();
let multipleSelection = $ref([]);
let handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach((i) => {
    multipleSelection.push(i.id);
  });
};

function exportAll() {
  let obj = {
    limit: "99999",
    output_id: multipleSelection.join(","),
  };
  download("/txwx/jffl_jfjl_daysum/school_grade", obj);
}
</script>

<style lang="scss" scoped>
.search {
  height: 72px;
  line-height: 85px;
  padding: 0 29px;
}
.btn {
  border-bottom: 1px solid #e3e3e3;
}
</style>