<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-date-picker
            v-model="kssj"
            type="daterange"
            unlink-panels
            range-separator="-"
            start-placeholder=""
            end-placeholder=""
            value-format="YYYY-MM-DD"
            :shortcuts="shortcuts"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item>
          <remote-select
            placeholder="全部年级"
            v-model="form_query.nj_id"
            to="jcxxgl_zyflgl_nj"
            :fields="['tjzn_id', 'tjzn_njmc']"
          ></remote-select>
        </el-form-item>
        <el-form-item>
          <remote-select
            placeholder="全部班级"
            v-model="form_query.bj_id"
            to="jcxxgl_zyflgl_bj"
            :fields="['tjzb_id', 'tjzb_bjmc']"
          ></remote-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 pb-10px">
        <div
          class="font-semibold justify-center text-center text-lg flex-grow-9"
          style="flex-grow: 9"
        >
          “{{ schoolData.sm_name }}”学校全市排名：<span
            class="text-hex-00a3ff text-lg font-medium"
            >{{ schoolData.rank }}</span
          >
        </div>

        <div
          class="cursor-pointer underline text-hex-00a3ff font-medium text-right"
          style="flex-grow: 1"
          @click="linkTo()"
        >
          师生积分排行榜
        </div>
      </div>

      <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="tjzb_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 { jfpm_list, school_list } from "./api";
const route = useRoute();
const ruleFormRef = ref(null);
const router = useRouter();

let total = $ref(10);
let form_query = $ref({
  page: 1,
  limit: 6,
  keyword: "",
  date_range: [],
  bj_id: "",
  nj_id: "",
});
let schoolData = $ref({});
let tableData = $ref([]);
function initData() {
  const data = {
    ...form_query,
  };
  jfpm_list(data).then((res) => {
    if (res.code == "1") {
      tableData = res.data.page_data;
      schoolData = res.data.school;
      total = res.data.total_rows * 1;
    }
  });
}
initData();
const shortcuts = $ref([
  {
    text: "今天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime());
      return [start, end];
    },
  },
  {
    text: "昨天",
    value: () => {
      const end = new Date();
      const start = new Date();
      end.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
      return [start, end];
    },
  },
  {
    text: "上周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "下周",
    value: () => {
      const end = new Date();
      const start = new Date();
      end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "上个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "下个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
]);

const kssj = ref([]);
const handleDateChange = (val) => {
  if (val) {
    form_query.date_range = val[0] + " - " + val[1];
  } else {
    form_query.date_range = "";
  }
  initData();
};

let multipleSelection = $ref([]);
let handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach((i) => {
    multipleSelection.push(i.id);
  });
};

function exportAll() {
  let ids = multipleSelection.join(",");
  let link =
    window.GLOBAL_CONFIG.api +
    "/txwx/jffl_jfjl_daysum/school_class?api=xls&page=1&limit=10000&token=" +
    user.value.token +
    "&output_id=" +
    ids;
  console.log(link, 44444);
  window.open(link, "_blank");
  // let obj = {
  //   limit: "99999",
  //   id: multipleSelection.join(","),
  // };
  // console.log(obj, 44444);
  // download("/txwx/jffl_jfjl_daysum/school_class", obj);
}
function linkTo() {
  router.push({ name: "jfpm-st" });
}
</script>

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