<template>
  <div
    class="main bg-white-grey rounded-10px py-1 px-4"
    style="font-size: 18px"
  >
    <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.tjzn_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.tjzb_id"
            to="jcxxgl_zyflgl_bj"
            :fields="['tjzb_id', 'tjzb_bjmc']"
          ></remote-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="searchData"> 查询 </el-button>
      </div>
    </div>
    <div>
      <el-tabs
        v-loading="loading"
        v-model="activeName"
        class="demo-tabs text-center"
        @tab-change="handleChange"
      >
        <el-tab-pane label="教师积分排行榜" name="first"></el-tab-pane>
        <el-tab-pane label="学生积分排行榜" name="second"></el-tab-pane>
      </el-tabs>
    </div>

    <!-- 列表 -->
    <div>
      <div v-if="activeName == 'first'">
        <div class="bg-white rounded-md 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>
          <div class="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.tjjd_xm"
                  class="w-40 mx-2"
                  size="small"
                  placeholder="请输搜索关键词"
                  :suffix-icon="Search"
                />
                <el-button type="primary" @click="searchData">搜索</el-button>
              </div>
            </div>
            <el-table
              :data="tableData"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column
                prop="tjjd_id"
                label="ID"
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjjd_xm"
                label="姓名"
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjjd_user_name"
                label="账号"
                width="auto"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="tjzn_name"
                label="年级"
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjzb_name"
                label="班级 "
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjjd_zjf"
                label="总积分 "
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjjd_bjpm"
                label="班级排名 "
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjjd_xxpm"
                label="校排名 "
                width="200"
              ></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(apiName)"
                :hide-on-single-page="false"
              />
            </div>
          </div>
        </div>
      </div>
      <div v-if="activeName == 'second'">
        <div class="bg-white rounded-md mt-4 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>
          <div class="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.tjjd_xm"
                  class="w-40 mx-2"
                  size="small"
                  placeholder="请输搜索关键词"
                  :suffix-icon="Search"
                />
                <el-button type="primary" @click="searchData">搜索</el-button>
              </div>
            </div>
            <el-table
              :data="tableData"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column
                prop="tjjd_id"
                label="ID"
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjjd_xm"
                label="姓名"
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjjd_user_name"
                label="账号"
                width="auto"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="tjzn_name"
                label="年级"
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjzb_name"
                label="班级 "
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjjd_zjf"
                label="总积分 "
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjjd_bjpm"
                label="班级排名 "
                width="200"
              ></el-table-column>
              <el-table-column
                prop="tjjd_xxpm"
                label="校排名 "
                width="200"
              ></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(apiName)"
                :hide-on-single-page="false"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div></div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { user } from "@/store/index";
import { school_list, sjfpm_list, tjfpm_list } from "./api";
const activeName = $ref("first");
const route = useRoute();
const ruleFormRef = ref(null);
const router = useRouter();
let total = $ref(10);
let loading = $ref(false);
let apiName = "";
let form_query = $ref({
  page: 1,
  limit: 6,
  tjjd_xm: "",
  date_range: [],
  tjzn_id: "",
  tjzb_id: "",
});
watch(
  form_query,
  (newValue, oldValue) => {
    apiName = activeName === "first" ? tjfpm_list : sjfpm_list;
    initData(apiName);
  },
  { immediate: true }
);
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(apiName);
  console.log(kssj, 343);
};
const handleChange = (tab) => {
  apiName = tab == "first" ? tjfpm_list : sjfpm_list;
  kssj = [];
  for (let key in form_query) {
    if (key != "limit") form_query[key] = "";
    console.log(key, form_query[key], 222222);
  }

  form_query.page = 1;
  initData(apiName);
};

let tableData = $ref([]);
let schoolData = $ref({});

async function initData(name) {
  loading = true;
  let data = {
    ...form_query,
    // creade_user_id: user.value.user_id
  };
  if (name === tjfpm_list) {
    Object.assign(data, {
      tjjd_role_id: "75",
    });
  } else {
    Object.assign(data, {
      tjjd_role_id: "76",
    });
  }
  const res = await name(data);
  if (res.code == "1") {
    loading = false;
    tableData = res.data.page_data;
    schoolData = res.data.school;
    total = res.data.total_rows * 1;
  } else {
    loading = false;
    ElMessage.error(res.msg);
  }
}

function searchData() {
  apiName = activeName === "first" ? tjfpm_list : sjfpm_list;
  initData(apiName);
}
let multipleSelection = $ref([]);
let handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach((i) => {
    multipleSelection.push(i.tjjd_id);
  });
};

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

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

:deep() .el-tabs__header {
  height: 51px;
  background: #ffffff;
  border-radius: 6px;
  padding: 0 23px;
  margin: 10px 0;
}
:deep() .el-tabs__content {
  background: #ffffff;
  border-radius: 6px;
}
:deep() .el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #f3f3f3;
  z-index: var(--el-index-normal);
}

:deep() .el-tabs__item.is-active {
  color: #00a3ff;
}
</style>