<template>
  <div>
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"
    />
  </div>
  <van-search v-model="param.keyword" :clearable="false" @search="reGetList" @clear="reGetList" shape="round" placeholder="请输入搜索关键词" />
  <div class="main">
    <div class="jj_bg" @click="linkTo(kcDetailData, 'brief')">
      <div class="flex">
        <div class="sm_name">{{ kcDetailData.tjk_zrjgmc }}</div>
        <div class="zrjs">{{ kcDetailData.tjk_zrjsmc }}</div>
      </div>
      <div class="jj_text">
        <span>简介:</span>
        <div class="text">{{ kcDetailData.tjk_brief }}>></div>
      </div>
    </div>
    <div class="mt-5px">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="initData"
      >
        <div class="flex flex-wrap">
          <div
            class="chapter_box"
            v-for="(item, index) in chapterData"
            :key="index" @click="linkTo(item, 'detail')"
          >
            <div class="w-full h-98px relative">
              <img class="w-full h-98px" :src="item.tjz_img" alt="" />
              <div
                class="absolute top-0 right-0 flex px-1 items-center r-t-box"
              >
                <img class="img1" src="../../assets/eye.png" alt="" />
                <span class="text-white">{{
                  item.tjz_lll * 1 > 9999
                    ? (item.tjz_lll / 10000).toFixed(0) + "w+"
                    : item.tjz_lll
                }}</span>
                <img class="img2" src="../../assets/zan.png" alt="" />
                <span class="text-white">{{
                  item.tjz_dzl * 1 > 9999
                    ? (item.tjz_dzl / 10000).toFixed(0) + "w+"
                    : item.tjz_dzl
                }}</span>
              </div>
            </div>
            <div class="px-1">
              <div class="zjmc">{{ item.tjz_mc }}</div>
              <!-- <div class="flex justify-between other_name">
                <div>{{ item.teacher_name }}</div>
                <div class="flex-1 truncate text-right ml-8px">{{ item.school_name }}</div>
              </div> -->
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script setup>
const onClickLeft = () => history.back();
const router = useRouter();
const route = useRoute();
let id = route.query.id;
let chapterData = $ref([]);
let kcDetailData = $ref({});
let title = $ref("");

let loading = $ref(false);
let finished = $ref(false);
let page = 1;
let param = $ref({
  keyword:'',
  M5jxrcL: "",
});
getDetail();
function getDetail() {
  request({
    url: "/txwx/jtjy_kc/detail",
    data: {
      ...param,
      ...route.query
    },
  }).then((res) => {
    if (res.code == "1") {
      kcDetailData = res.data.one_info;
    }
  });
}

function initData() {
  loading = true;
  request({
    url: "/txwx/jtjy_zj/index",
    data: {
      page,
      ...param,
      ...route.query
    },
  }).then((res) => {
    if (res.code == "1") {
      const data = res.data;
      chapterData = [...chapterData, ...data.page_data];
      title = res.data.kc_name;
      finished = data.total_page === page;
      page++;
      loading = false;
    }
  });
}

function reGetList() {
    page = 1
    chapterData = []
    finished = false
    initData()
}

function linkTo(item, path){
  if(path == 'brief'){
    router.push({ path: '/brief', query: { tjk_id: item.tjk_id, name:'jtjy_kc' } })
  }else{
    router.push({ path: `/detail/jtjy_zj/${route.query.tjk_id}/${item.tjz_id}` })
  }
}

watch(
  () => param.keyword,
  (val) => {
      reGetList();
  },
)

</script>
<style lang="scss" scoped>
.main {
  padding: 0 7px 0 6px;
}
.jj_bg {
  width: 362px;
  height: 85px;
  background: url("~/assets/chapter_bg.png") no-repeat;
  background-size: 100%;
  padding: 6.5px 15px 10px 13px;
  .sm_name {
    min-width: 90px;
    height: 17px;
    font-size: 12px;
    text-align: left;
    color: #ffffff;
    line-height: 17px;
    margin-right: 5px;
  }
  .zrjs {
    height: 17px;
    font-size: 12px;
    text-align: left;
    color: #ffffff;
    line-height: 17px;
  }
  .jj_text {
    margin-top: 8px;
    width: 334px;
    height: 43px;
    font-size: 10px;
    text-align: left;
    color: #ffffff;
    line-height: 15px;
    .text {
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
  }
}
.chapter_box {
  width: 167px;
  height: 138px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0px 5px 12px 0px rgba(153, 160, 168, 0.18);
  margin-top: 10px;
  overflow: hidden;
  .r-t-box {
    width: 98px;
    height: 22px;
    border-radius: 0px 6px 0 6px;
    background: rgba(0, 0, 0, 0.4);
    font-size: 10px;
    span {
      display: inline-block;
      width: 25px;
      margin-left: 2px;
    }
    .img1 {
      width: 15px;
      height: 9px;
    }
    .img2 {
      width: 9.5px;
      height: 9px;
    }
  }
  .zjmc {
    // width: 156px;
    height: 20px;
    font-size: 14px;
    text-align: left;
    color: #222222;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 2.5px;
  }
  .other_name {
    font-size: 10px;
    margin-top: 5.5px;
    line-height: 17px;
    letter-spacing: 0px;
  }
}
.chapter_box:nth-child(2n + 1) {
  margin-right: 10px;
  margin-left: 10px;
}
</style>