<template>
  <div>
    <div
      class="mt-10px shadow-default bg-white pl-35px pr-30px pr-35px h-60px rounded-10px relative flex items-center justify-between"
    >
      <h3 class="nav-title">
        推荐课程 -
        <span>
          <!-- 第{{ dealFigureToChinese(ks_num) }}章： -->
          {{ detailData.tmk_kcm }}</span
        >
      </h3>
      <div class="btnDiv">
        <el-button size="large" @click="linkBack" class="w-100px"
          >返回
        </el-button>
      </div>
    </div>
    <div class="flex justify-between w-full mt-20px z-10">
      <div class="bg-white w-full rounded-10px min-w-874px">
        <div
          class="w-full h-300px flex rounded-10px bg_blue_light py-25px px-35px"
        >
          <div class="flex">
            <div class="w-268px h-157px overflow-hidden">
              <img
                class="w-full rounded-10px"
                :src="getFullUrl(detailData.tmk_img)"
                alt=""
              />
            </div>
            <div class="w-850px pl-10px mt-15px">
              <p class="font-medium text-18px text-overflow">
                <!-- 第{{ dealFigureToChinese(ks_num) }}章：  -->
                {{ detailData.tmk_kcm }}
              </p>
              <p class="text-gray-700 text-16px leading-30px">
                责任教师：{{ detailData.tmk_zrjs_xm }}
                <span class="ml-50px">{{ detailData.tmk_ssjg_name }} </span>
              </p>
              <p class="text-gray-700 text-16px">
                {{ detailData.school_name }}
              </p>
              <div class="flex">
                <div>课程简介：</div>
                <div class="gg w-750px h-200px">
                  {{ detailData.tmk_kcjj ? detailData.tmk_kcjj : "无" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shadow-default bg-white-grey mt-4 rounded-10px pb-1">
      <div class="flex px-34px py-10px">
        <div class="title mr-400px">课程章节</div>
        <div class="search-box">
          <input
            class="w-400px"
            type="text"
            placeholder="搜索关键字"
            v-model="form_query.keyword"
          />
          <button type="button" class="search-btn" @click="initData"></button>
        </div>
      </div>
      <div class="px-30px" v-loading="loading" v-if="listData.length > 0">
        <ul class="mt-20px course-list">
          <li v-for="item in listData" @click="toDetail(item)">
            <div class="course-img relative">
              <img :src="item.tmz_img_url" 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.tmk_lll ? item.tmk_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.tmk_dzl ? item.tmk_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.tmz_zjmc }}
              </div>
              <div class="mt-10px">
                <h4 class="text-14px text-hex-999999">
                  {{ item.ex.create_dateline }}
                </h4>
              </div>
            </div>
            <div class="flex justify-between p-15px text-13px bordertop">
              <span class="text-dark-400"
                >责任老师：{{ item.teacher_name }}</span
              >
              <span
                class="ml-10px flex-1 text-hex-999999 text-right text-overflow"
                >{{ item.school_name }}</span
              >
            </div>
          </li>
        </ul>
        <div class="flex justify-center 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 class="py-80px" v-else>
        <nodata></nodata>
      </div>
    </div>
  </div>
</template>
<script setup>
import { tjkc_detail, chapter_list } from "./api";
import { useRoute, useRouter } from "vue-router";
import nodata from "@/pages/xsd/component/noData.vue";
const route = useRoute();
const router = useRouter();
let tmk_id = route.params.tmk_id;
// let ks_num = route.params.i;
let form_query = $ref({
  page: 1,
  limit: 8,
  keyword: "",
  tmk_id: tmk_id,
});
let total = $ref(10);
//工作室详情
let detailData = $ref({});
let cyData = $ref([]);
tjkc_detail({ tmk_id }).then((res) => {
  if (res.code == "1") {
    detailData = res.data.one_info;
  }
});
// 初始化
let loading = $ref(false);
let listData = $ref([]);
function initData() {
  loading = true;
  let data = {
    ...form_query,
  };
  chapter_list(data).then((res) => {
    if (res.code == "1") {
      loading = false;
      listData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
initData();
const linkBack = () => {
  router.back();
};
function toDetail(item) {
  router.push({
    name: "home_tjkc_detail",
    params: {
      tmk_id: item.tmk_id,
      tmz_id: item.tmz_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;
}
.bg_blue_light {
  background: linear-gradient(100deg, #eefafe, #f2faff, #f2f8fe);
}

.shadow-default {
  box-shadow: 0 10px 24px rgba(161, 153, 168, 0.18);
}

.nav-title {
  font-size: 16px;
  color: #949494;

  span {
    font-size: 18px;
    color: #050026;
  }
}

.btnDiv {
  .el-button {
    background: $color;
    border-color: $color;
    color: #fff;
  }
}

.icon-view {
  display: inline-block;
  width: 24px;
  height: 16px;
  background: url("@/assets/home/eye.png") center no-repeat;
  background-size: 24px 16px;
}

.title {
  height: 48px;
  font-size: 18px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: left;
  color: #050026;
  line-height: 48px;
}

.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 {
  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: 19px;
    margin-bottom: 15px;
    cursor: pointer;

    &:nth-child(4n) {
      margin-right: 0;
    }

    .course-img {
      width: 100%;
      height: 151px;
      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;
        }
      }
    }
  }
}

.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>