<template>
  <div class="relative mt-10px content-box px-50px pt-15px pb-25px">
    <div class="flex justify-end mb-15px">
      <el-select
        v-model="type"
        class="shadow-default"
        placeholder="切换类别"
        size="large"
        @change="filterData"
        clearable
        filterable
      >
        <el-option
          v-for="item in typeList"
          :key="item.v"
          :label="item.n"
          :value="item.v"
        />
      </el-select>
    </div>

    <div v-if="listData.length > 0">
      <ul class="team-list">
        <li v-for="item in listData">
          <div class="width-30">
            <h3 class="text-14px color-171721 leading-18px">
              {{ item.ex.create_dateline }}
            </h3>
          </div>
          <div class="width-30">
            <h3 class="text-14px color-171721 leading-18px" v-if="type === '1'">
              特色课程
            </h3>
            <h3 class="text-14px color-171721 leading-18px" v-if="type === '2'">
              名师资源
            </h3>
            <h3 class="text-14px color-171721 leading-18px" v-if="type === '3'">
              家庭教育
            </h3>
          </div>
          <div class="width-30">
            <h3 class="text-14px color-171721 leading-18px">
              {{ item.kc_name }}
            </h3>
          </div>
          <div class="width-10">
            <h3 class="text-14px color-171721 leading-18px">
              {{ item.join_num }}人
            </h3>
          </div>
        </li>
      </ul>
      <div class="mt-30px flex justify-center">
        <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="py-80px text-center">
      <div>
        <img
          src="/images/icon-no-data.png"
          width="138"
          class="block m-0-auto"
          alt=""
        />
        <h3 class="text-18px color-050026 mt-20px">暂无数据，敬请期待！</h3>
      </div>
    </div>
  </div>
</template>

<script setup>
import { tskc_team_list, mszy_team_list, jtjy_team_list } from "./api.js";
import { user } from "@/store/index";
const user_id = user.value?.user_id;
let limit = $ref(8);
let total = $ref(0);
let cur_page = $ref(1);
let listData = $ref([]);
let type = $ref("1");
const typeList = [
  {
    v: "1",
    n: "特色课程",
  },
  {
    v: "2",
    n: "名师资源",
  },
  {
    v: "3",
    n: "家庭教育",
  },
];

function getListData() {
  let data = {
    page: cur_page,
    limit: limit,
    user_id: user_id,
  };
  switch (type) {
    case "1":
      tskc_team_list(data).then((res) => {
        if (res.code === "1") {
          listData = res.data.page_data;
          total = Number(res.data.total_rows);
          cur_page = Number(res.data.page_now);
        }
      });
      break;
    case "2":
      mszy_team_list(data).then((res) => {
        if (res.code === "1") {
          listData = res.data.page_data;
          total = Number(res.data.total_rows);
          cur_page = Number(res.data.page_now);
        }
      });
      break;
    case "3":
      jtjy_team_list(data).then((res) => {
        if (res.code === "1") {
          listData = res.data.page_data;
          total = Number(res.data.total_rows);
          cur_page = Number(res.data.page_now);
        }
      });
      break;
  }
}

let handleSelectionChange = (val) => {
  cur_page = val;
  getListData();
};

function filterData() {
  cur_page = 1;
  getListData();
}
getListData();
</script>

<style lang="scss" scoped>
$color: #1259a1;
.content-box {
  width: 100%;
  background: #fcfeff;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(161, 153, 168, 0.18);
}

.team-list {
  width: 100%;
  min-height: 480px;

  li {
    width: 100%;
    display: flex;
    padding: 20px 15px;
    border-bottom: 2px dashed rgba(110, 88, 197, 0.5);
    line-height: 20px;
  }
}
::v-deep .el-pagination.is-background .el-pager li.is-active {
  background: $color;
}
::v-deep .el-pager li:hover {
  color: $color;
}
</style>