<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>{{ detailData.ttk_mc }}</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.ttk_img)"
                alt=""
              />
            </div>
            <div class="w-850px pl-10px mt-15px">
              <p class="font-medium text-18px text-overflow">
                {{ detailData.ttk_mc }}
              </p>
              <p class="text-gray-700 text-16px leading-30px">
                责任教师：{{ detailData.ttk_zrjsmc }}
                <span class="ml-50px">{{ detailData.ttk_zrjgmc }} </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"
                  v-html="detailData.ttk_brief ? detailData.ttk_brief : '无'"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div></div>
    </div>
    <div class="flex justify-between mt-15px z-10">
      <div class="shadow-default bg-white rounded-10px w-874px h-777px">
        <div class="py-13px px-18px w-full">
          <div class="flex justify-between px-34px py-10px">
            <div class="title">课程章节</div>
            <div class="search-box">
              <input
                class="w-400px"
                type="text"
                placeholder="搜索关键字"
                v-model="form_query.ttz_mc"
              />
              <button
                type="button"
                class="search-btn"
                @click="initData"
              ></button>
            </div>
          </div>
          <div>
            <div
              class="w-full h-700px 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.ttz_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.ttz_lll ? item.ttz_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.ttz_dzl ? item.ttz_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.ttz_mc }}
                    </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.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-550px 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="tableData.length > 0"
            class="gg w-full h-460px"
          >
            <li
              class="text-14px flex items-center h-50px w-full border_b justify-between"
            >
              <p class="text-gray w-1/5">姓名</p>
              <p class="text-gray w-1/3">单位</p>
              <p class="text-gray w-1/4">学科/专业</p>
            </li>

            <li
              v-for="(l, i) in tableData"
              :key="i"
              class="text-14px flex items-center h-70px w-full border_b justify-between"
            >
              <p class="text-black w-1/5">{{ l.ttt_cymc }}</p>
              <p class="text-black w-1/3">{{ l.ttt_cydwmc }}</p>
              <p class="text-black w-1/4">{{ l.ttt_xkzy }}</p>
            </li>
          </ul>
          <Nodata v-else size="100"></Nodata>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { tskc_detail, chapter_list, team_list } from "./api";
import { useRoute, useRouter } from "vue-router";
import Nodata from "@/pages/xsd/component/noData.vue";
const route = useRoute();
const router = useRouter();
let ttk_id = route.params.ttk_id;
let form_query = $ref({
  page: 1,
  limit: 6,
  ttz_mc: "",
  ttk_id: ttk_id,
});
let total = $ref(10);
//工作室详情
let detailData = $ref({});
let cyData = $ref([]);
tskc_detail({ ttk_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();

let tableData = $ref([]);
function teamData() {
  const data = {
    ttk_id: ttk_id,
  };
  team_list(data).then((res) => {
    if (res.code == "1") {
      tableData = res.data.page_data;
    }
  });
}
teamData();
const linkBack = () => {
    router.back()
};
function toDetail(item) {
  router.push({
    name: "home_tskc_detail",
    params: {
      ttk_id: item.ttk_id,
      ttz_id: item.ttz_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: 15px;
    margin-bottom: 19px;
    cursor: pointer;

    &:nth-child(3n) {
      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;
        }
      }
    }
  }
}
.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;
}

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