<template>
  <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>{{ course_title }}</span>
    </h3>
    <div class="btnDiv">
      <el-button size="large" @click="linkTo('jsd_personal_zy')" class="w-100px"
        >返回
      </el-button>
    </div>
  </div>
  <div
    class="mt-10px shadow-default bg-white-grey pt-25px pl-35px pr-35px pb-35px rounded-10px"
  >
    <h3 class="nav-title"><span>相关作业</span></h3>
    <ul v-loading="loading" v-if="listData.length > 0">
      <li
        v-for="(l, i) in listData"
        :key="i"
        class="flex text-14px p-18.5px border_dotted"
      >
        <div class="text w-250px">
          第{{
            dealFigureToChinese(
              (form_query.page - 1) * form_query.limit + (i + 1)
            )
          }}课时:{{ l.tmz_zjmc }}
        </div>
        <div class="text w-200px">责任教师：{{ l.tmz_zrjs_mc }}</div>
        <div class="text w-210px">{{ l.school_name }}</div>
        <div class="text w-260px">开启时间：{{ l.ex.create_dateline }}</div>
        <div
          class="detail ml-100px"
          @click="
            toDetail(l, (form_query.page - 1) * form_query.limit + (i + 1))
          "
        >
          查看
        </div>
      </li>
    </ul>
    <nodata v-else></nodata>
    <div class="mt-20px flex justify-center">
      <el-pagination
        v-model:current-page="form_query.page"
        v-model:page-size="form_query.limit"
        layout="total, prev, pager, next"
        :total="total"
        :background="true"
        @current-change="initData"
        :hide-on-single-page="false"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { user } from "@/store/index";
import { mszy_detail, mszy_ks_list } from "./api";
import { getFullUrl } from "@/utils/helper";
import nodata from "@/pages/xsd/component/noData.vue";
const router = useRouter();
const route = useRoute();
console.log(route.params);
let msOrjt = $ref("");
let course_title = $ref("");
let keyword = $ref("");
let total = $ref(10);
let listData = $ref([]);
let form_query = $ref({
  limit: 6,
  page: 1,
  tmk_id: route.params.tmk_id,
});
let tmk_id = $ref("");
msOrjt = route.params.hasOwnProperty("tmk_id") ? "mszy" : "";
const linkTo = (name) => {
  router.push({
    name,
    query: {
      type: msOrjt,
    },
  });
};

function detailData() {
  let data = {
    tmk_id: route.params.tmk_id,
  };

  mszy_detail(data).then((res) => {
    if (res.code === "1") {
      course_title = res.data.one_info.tmk_kcm;
    }
  });
}
function initData() {
  let data = {
    ...form_query,
  };

  mszy_ks_list(data).then((res) => {
    if (res.code === "1") {
      listData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
detailData();
initData();

function toDetail(item, i) {
  router.push({
    name: "jsd_personal_zy_mszy_detail_zy",
    params: { tmz_id: item.tmz_id, i: i },
  });
}
</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;
}
.bg-white-grey {
  background: #fcfeff;
}

.bg_blue {
  background: $color;
}

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

.color-grey {
  color: #999;
}

.border-bottom-1 {
  border-bottom: 1px solid #eee;
}

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

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

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

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

.border_dotted {
  border-bottom: 2px dashed rgba(158, 140, 232, 0.43);
}
.detail {
  width: 58px;
  height: 23px;
  border: 1px solid #1259a1;
  border-radius: 12px;
  font-size: 12px;
  font-family: PingFang SC, PingFang SC-Regular;
  text-align: center;
  color: #1259a1;
  line-height: 23px;
}
.text {
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  line-height: 22px;
  padding: 0 5px;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
</style>