<template>
  <div>
     <van-nav-bar title="我的点赞" left-text="" left-arrow fixed placeholder @click-left="onClickLeft"/>

     <van-search
        shape="round"
        v-model="keyword"
        placeholder="搜索"
        @search="reGetList"
        :clearable="false" 
      />
    <div class="mx-15px">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多数据了"
        @load="onLoad"
      >
       <template v-if="listData.length!=0">
        <div class="grid grid-cols-2 gap-15px">
          <div
            class="cardDiv relative"
            v-for="(item, index) in listData"
            :key="index"
            @click="toDetail(item)"
          >
             <div class="rounded-tr-6px rounded-bl-6px flex items-center absolute top-0 right-0 text-12px text-white bg-hex-00000066 px-10px py-5px">
              <div class="flex items-center">
                <img class="mr-5px" :src="eyeImg" alt="" />
                <span>{{Number(item.dzdx_info.lll) > 9999 ? (Number(item.dzdx_info.lll) / 10000).toFixed(0) + "w+" : item.dzdx_info.lll}}</span>
              </div>
              <div class="flex items-center ml-12px">
                <img class="mr-5px" :src="zanImg" alt="" />
                <span>{{Number(item.dzdx_info.dzl) > 9999 ? (Number(item.dzdx_info.dzl) / 10000).toFixed(0) + "w+" : item.dzdx_info.dzl}}</span>
              </div>
            </div>
            <img
              class="w-full h-100px rounded-t-6px"
              :src="getFullPath(item.dzdx_info.img)            
               
              "
              alt=""
            />
            <div class="px-8px py-5px h-50px">
              <div class="truncate text-14px mb-8px">
                {{ item.dzdx_info.name }}
              </div>
              <div class="flex justify-between items-center text-12px text-hex-666666">
                <div class="whitespace-nowrap">{{ item.dzdx_info.teacher_name }}</div>
                <div class="flex-1 truncate text-right ml-8px" >{{ item.dzdx_info.school_name }}</div>
              </div>
            </div>
          </div>
        </div>
        </template>
      <van-empty v-else></van-empty>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import {
  showToast
} from "vant";
import eyeImg from "~/assets/eye.png";
import zanImg from "~/assets/zan.png";
const router = useRouter();
import {  getFullPath } from '~/pages/detail/util'
import { user } from "~/store";
const keyword = $ref("");
let http = $ref(window.GLOBAL_CONFIG.oss);
let loading = $ref(false);
let finished = $ref(false);
let listData = $ref([]);
let page = $ref("1");
let limit = $ref("10");

watch(
  () => keyword,
  (val) => {
    reGetList();
  },
)
const onClickLeft = () => history.back();
async function onLoad() {
  let obj = {
    page,
    limit,
    keyword,
    M5jxrcL: "DaKFNRE",
    token:user.value.token,
    create_user_id:user.value.user_id
  };
  loading = true;
  let { code, data } = await request({ url: "/txwx/dz/index", data: obj });
  if (code == 1) {
    listData = [...listData, ...data.page_data];
    finished = Number(data.total_page) === Number(page);
    page++;
    loading = false;
  }
}

function reGetList() {
  page = 1;
  listData = [];
  finished = false;
  onLoad();
}

function toDetail(item) {
  if (item.td_kclx_option_k == "1") {
    let tmk_id = item.dzdx_info.tmk_id?item.dzdx_info.tmk_id:'-';
    let tmz_id = item.td_dz_id;
    router.push({
      path: `/detail/mszy_zj/${tmk_id}/${tmz_id}`,
    });
  } else if (item.td_kclx_option_k == "2") {
    let tmk_id = item.dzdx_info.ttk_id?item.dzdx_info.ttk_id:"-";
    let tmz_id = item.td_dz_id;
    router.push({
      path: `/detail/tskc_zj/${tmk_id}/${tmz_id}`,
    });
  } else if (item.td_kclx_option_k == "3") {
     let tmk_id = item.dzdx_info.tz_id?item.dzdx_info.tz_id:"-";
    let tmz_id = item.td_dz_id;
    switch (item.td_dz_content) {
      case "1":
        showToast("直播还未开始，请耐心等待！");
        break;
      case "2":
        router.push({
         path: `/detail/zbkc_ks/${tmk_id}/${tmz_id}`,
        });
        break;
      case "3":
        router.push({
          path: `/detail/zbkc_ks/${tmk_id}/${tmz_id}`,
        });
        break;
    }
  } else if (item.td_kclx_option_k == "4") {
    let tmk_id = item.dzdx_info.ttk_id?item.dzdx_info.ttk_id:"-";
    let tmz_id = item.td_dz_id;
    router.push({
      path: `/detail/zyfd/${tmk_id}/${tmz_id}`,
    });
  } else if (item.td_kclx_option_k == "5") {
    let tmk_id = item.dzdx_info.tjk_id?item.dzdx_info.tjk_id:"-";
    let tmz_id = item.td_dz_id;
    router.push({
      path: `/detail/jtjy_zj/${tmk_id}/${tmz_id}`,
    });
  }
}
</script>

<style lang="scss">
.cardDiv {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0px 5px 12px 0px rgba(153, 160, 168, 0.18);
}
.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;
}
</style>