<template>
  <div>
    <div class="w-full flex items-center w-full relative min-h-134px">
      <img :src="title" alt="" class="w-full" />
      <div class="absolute title">特色课程</div>
    </div>
    <div class="flex justify-between mt-15px z-10">
      <div class="shadow-default bg-white rounded-10px w-874px h-900px">
        <div class="py-13px px-18px w-full">
          <check-row
            v-model="form_query.tjzn_id"
            label="年级"
            :items="gradeData"
            @click="initData"
          ></check-row>
          <check-row
            v-model="form_query.tjzx_id"
            label="学科"
            :items="subjectData"
            @click="initData"
          ></check-row>
          <div class="search-box mt-20px">
            <input
              type="text"
              placeholder="搜索关键字"
              v-model="form_query.keyword"
            />
            <button type="button" class="search-btn" @click="initData"></button>
          </div>
          <div>
            <div
              class="w-full h-718px relative"
              v-loading="loading"
              v-if="listData.length > 0"
            >
              <ul class="mt-24px course-list">
                <li v-for="item in listData" @click="toDetail(item)">
                  <div class="course-img relative">
                    <img :src="item.ttk_img" alt="" />
                    <!-- <div class="course-fire-tag" v-if="item.hot == '1'"></div> -->
                    <div
                      class="info-bottom pl-7px items-center flex justify-between"
                    >
                      <div>
                        <span
                          class="icon-view inline-block align-middle"
                        ></span>
                        <span
                          class="ml-5px text-14px inline-block text-white align-middle"
                          >{{ item.ttk_lll ? item.ttk_lll : 0 }}</span
                        >
                      </div>
                      <div class="mr-10px">
                        <span
                          class="ml-15px icon-thumb inline-block align-middle"
                        ></span>
                        <span
                          class="ml-5px text-14px text-white inline-block align-middle"
                          >{{ item.ttk_dzl ? item.ttk_dzl : 0 }}</span
                        >
                      </div>
                    </div>
                  </div>
                  <div class="pt-10px pb-15px px-15px border-bottom-1">
                    <div
                      class="text-16px text-dark-400 h-40px leading-20px overflow-hidden"
                    >
                      {{ item.ttk_mc }}
                    </div>
                  </div>
                  <div class="flex justify-between p-15px text-13px bordertop">
                    <span class="text-dark-400"
                      >责任老师：{{ item.ttk_zrjsmc }}</span
                    >
                    <span
                      class="ml-10px flex-1 text-hex-999999 text-right text-overflow"
                      >{{ item.ttk_zrjgmc }}</span
                    >
                  </div>
                </li>
              </ul>
              <div
                class="flex justify-center my-10 absolute bottom-10px left-0 right-0"
              >
                <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>
            <Nodata v-else class="py-50"></Nodata>
          </div>
        </div>
      </div>

      <div class="w-315px">
        <!-- 热门标签 -->
        <div
          class="w-full h-189px py-34px px-22px shadow-default bg-white rounded-10px"
        >
          <div class="flex justify-between items-center mb-28px">
            <h3 class="text-18px font-500">热门标签</h3>
          </div>
          <ul
            v-loading="loading"
            v-if="hotTitleData.length > 0"
            class="gg hot-title-box w-full h-105px"
          >
            <li v-for="(l, i) in hotTitleData" :key="i">
              <div class="hot-title">{{ l }}</div>
            </li>
          </ul>
          <Nodata v-else size="50"></Nodata>
        </div>
        <!--  热门搜索-->
        <div
          class="w-full h-189px my-15px py-34px px-22px shadow-default bg-white rounded-10px"
        >
          <div class="flex justify-between items-center mb-28px">
            <h3 class="text-18px font-500">热门搜索</h3>
          </div>
          <ul
            v-loading="loading"
            v-if="hotSearchData.length > 0"
            class="gg hot-search-box w-full h-105px"
          >
            <li v-for="(l, i) in hotSearchData" :key="i">
              <div class="hot-search">{{ l }}</div>
            </li>
          </ul>
          <Nodata v-else size="50"></Nodata>
        </div>
        <!-- 猜你喜欢 -->
        <div
          class="w-full h-492px py-34px px-22px shadow-default bg-white rounded-10px"
        >
          <div class="flex justify-between items-center mb-28px">
            <h3 class="text-18px font-500">猜你喜欢</h3>
          </div>
          <ul
            class="mt-24px like-list gg w-full h-400px"
            v-if="likeData.length > 0"
          >
            <li v-for="(item, i) in likeData" :key="i">
              <div class="course-img relative">
                <img :src="item.ttk_img" alt="" />
                <!-- <div class="course-fire-tag" v-if="item.hot == '1'"></div> -->
                <div
                  class="info-bottom pl-7px items-center flex justify-between"
                >
                  <div>
                    <span class="icon-view inline-block align-middle"></span>
                    <span
                      class="ml-5px text-14px inline-block text-white align-middle"
                      >{{ item.ttk_lll ? item.ttk_lll : 0 }}</span
                    >
                  </div>
                  <div class="mr-10px">
                    <span
                      class="ml-15px icon-thumb inline-block align-middle"
                    ></span>
                    <span
                      class="ml-5px text-14px text-white inline-block align-middle"
                      >{{ item.ttk_dzl ? item.ttk_dzl : 0 }}</span
                    >
                  </div>
                </div>
              </div>
              <div class="pt-10px pb-15px px-15px border-bottom-1">
                <div
                  class="text-16px text-dark-400 h-40px leading-20px overflow-hidden"
                >
                  {{ item.ttk_mc }}
                </div>
              </div>
              <div class="flex justify-between p-15px text-13px bordertop">
                <span class="text-dark-400"
                  >责任老师：{{ item.ttk_zrjsmc }}</span
                >
                <span
                  class="ml-10px flex-1 text-hex-999999 text-right text-overflow"
                  >{{ item.ttk_zrjgmc }}</span
                >
              </div>
            </li>
          </ul>
          <Nodata v-else size="50"></Nodata>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import title from "~/assets/home/icon-5.png";
import Nodata from "@/pages/xsd/component/noData.vue";
import { tskc_list, grade_list, subject_list, hot_list } from "./api";
import { useRouter } from "vue-router";
const router = useRouter();
let form_query = $ref({
  page: 1,
  limit: 6,
  keyword: "",
  tjzx_id: "",
  tjzn_id: "",
});
let total = $ref(10);
let subjectData = $ref([]);
let gradeData = $ref([]);

grade_list({ limit: 9999, page: 1 }).then((res) => {
  if (res.code == "1") {
    gradeData = [{ n: "全部", v: null }].concat(
      res.data.page_data.map(({ tjzn_id, tjzn_njmc }) => ({
        v: tjzn_id,
        n: tjzn_njmc,
      }))
    );
  }
});
subject_list({ limit: 9999, page: 1 }).then((res) => {
  if (res.code == "1") {
    subjectData = [{ n: "全部", v: null }].concat(
      res.data.page_data.map(({ tjzx_id, tjzx_xkmc }) => ({
        v: tjzx_id,
        n: tjzx_xkmc,
      }))
    );
  }
});

// 初始化
let loading = $ref(false);
let listData = $ref([]);
let hotTitleData = $ref([]);
let hotSearchData = $ref([]);
let likeData = $ref([]);
function initData() {
  loading = true;
  let data = {
    ...form_query,
  };
  tskc_list(data).then((res) => {
    if (res.code == "1") {
      loading = false;
      listData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
initData();
function rightData() {
  hot_list({ type: "1", module: "1" }).then((res) => {
    if (res.code == "1") {
      loading = false;
      hotTitleData = [];
      for (let key in res.data) {
        hotTitleData.push(res.data[key].tsl_value);
      }
    }
  });

  hot_list({ type: "2", module: "1" }).then((res) => {
    if (res.code == "1") {
      loading = false;
      hotSearchData = [];
      for (let key in res.data) {
        hotSearchData.push(res.data[key].tsl_value);
      }
    }
  });
  tskc_list({ limit: 5, you_like: "1" }).then((res) => {
    if (res.code == "1") {
      loading = false;
      likeData = res.data.page_data;
    }
  });
}
rightData();
function toDetail(item) {
  router.push({
    name: "home_tskc_chapter",
    params: {
      ttk_id: item.ttk_id,
    },
  });
}
</script>
<style lang="scss" scoped>
$color: #1259a1;
::v-deep .el-pagination.is-background .el-pager li.is-active {
  background: $color;
}
::v-deep .el-pager li:hover {
  color: $color;
}
.course-fire-tag {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 27px;
  background: url("/images/icon-fire.png") center no-repeat;
  background-size: 26px 27px;
}
.title {
  font-size: 30px;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  padding-left: 100px;
  line-height: 30px;
  letter-spacing: 0.23px;
  text-shadow: 0px 2px 3px 0px rgba(0, 14, 51, 0.31);
}

.bg-white-grey {
  background: #fcfeff;
}

.search-box {
  width: 300px;
  height: 48px;
  background: #f6f8fa;
  border-radius: 8px;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;

  input {
    flex: 1;
    height: 48px;
    border: 0;
    font-size: 16px;
    color: #333;
    outline: none;
    background: #f6f8fa;
  }

  .search-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: $color url("/images/icon-search.png") center no-repeat;
    background-size: 13px 13px;
  }
}

.bordertop {
  border-top: 1px solid #eeeeee;
}
.course-list,
.like-list {
  display: flex;
  flex-wrap: wrap;
  li {
    min-width: 0;
    width: 268px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
    margin-right: 15px;
    margin-bottom: 20px;
    cursor: pointer;

    .course-img {
      width: 100%;
      height: 157px;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
      img {
        width: 100%;
      }
      .info-bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 30;
        width: 152px;
        height: 27px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0 10px 0 0;
        display: flex;

        .icon-view {
          width: 24px;
          height: 16px;
          background: url("/images/icon/view.png") center no-repeat;
          background-size: 24px 16px;
        }

        .icon-thumb {
          width: 17px;
          height: 16px;
          background: url("/images/icon/thumb.png") center no-repeat;
          background-size: 17px 16px;
        }
      }
    }
  }
}
.course-list li:nth-child(3n) {
  margin-right: 0;
}
.hot-title-box {
  display: flex;
  flex-wrap: wrap;
  li {
    // width: 78px;
    height: 30px;
    margin-right: 16px;
    margin-bottom: 20px;
    // &:nth-child(3n) {
    //   margin-right: 0;
    // }
    .hot-title {
      height: 29px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: center;
      color: #666666;
      line-height: 29px;
      background: rgba(#000000, 0.05);
      border-radius: 18px;
      padding: 0 10px;
      word-wrap: break-word;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }
}
.hot-search-box {
  display: flex;
  flex-wrap: wrap;
  li {
    // width: 70px;
    height: 30px;
    margin-right: 16px;
    margin-bottom: 20px;
    // &:nth-child(3n) {
    //   margin-right: 0;
    // }
    .hot-search {
      height: 29px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: left;
      color: #666666;
      line-height: 29px;
      word-wrap: break-word;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }
}
.border_b {
  border-bottom: 1px dashed #e4e6e8;
}
.text-gray {
  font-size: 14px;
  text-align: left;
  color: #9d9ab9;
}
.text-black {
  font-size: 14px;
  text-align: left;
  color: #050026;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
::v-deep .el-pagination button {
  background: transparent;
}
.gg {
  overflow-x: hidden;
  overflow-y: scroll;
  line-height: 30px;
}

/*滚动条样式*/
.gg::-webkit-scrollbar {
  width: 3px;
  height: 200px;
}

/* 上下滚动的滚动条颜色 */
.gg::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px #1259a1;
  background: #1259a1;
}

/* 滚动条的整体背景颜色 */
.gg::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px white;
  border-radius: 0;
  background: white;
}
</style>