<template>
  <div>
    <div class="flex mt-8px mb-15px">
      <van-search class="!p-0 flex-1" shape="round" :clearable="false" v-model="keyword" @search="reGetList" placeholder="搜索" />
      <div class="flex items-center text-14px ml-15px" v-if="activeCourse.filterData" @click="showFilter=true">
        <img class="mr-5px" :src="filter" alt="" />
        筛选
      </div>
    </div>
    <template v-if="activeKey==='qjkc'">
      <!-- <div class="flex justify-between items-center text-18px mb-15px">
        <div class="font-bolder">课程安排</div>
        <van-icon v-if="kcapData.length!=0" name="arrow" @click="showMore" />
      </div> -->
      <!-- <div v-if="kcapData.length!=0" class="cardDiv relative flex p-8px">
        <div class="rounded-br-6px rounded-tl-6px flex items-center absolute top-8px left-8px 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(kcapData[0].tmk_lll) > 9999 ? (Number(kcapData[0].tmk_lll) / 10000).toFixed(0) + "w+" : kcapData[0].tmk_lll}}</span>
          </div>
          <div class="flex items-center ml-12px">
            <img class="mr-5px" :src="zanImg" alt="" />
            <span>{{Number(kcapData[0].tmz_dzl) > 9999 ? (Number(kcapData[0].tmz_dzl) / 10000).toFixed(0) + "w+" : kcapData[0].tmz_dzl}}</span>
          </div>
        </div>
        <img class="w-156px h-100px mr-10px rounded-6px" :src="kcapData[0].tmz_img_url" alt="" />
        <div class="flex-1 flex flex-col py-5px">
          <div class="flex-1">
            <div class="font-bolder text-14px">{{kcapData[0].tmz_zjmc}}</div>
            <div class="text-12px text-hex-222222 mt-5px mb-10px break-all">时间：{{kcapData[0].tmz_kckqsj}}~{{kcapData[0].tmz_kcjssj}}</div>
          </div>
          <div class="flex justify-between items-center text-12px text-hex-666666 h-14px">
            <div>{{kcapData[0].teacher_name}}</div>
            <div>{{kcapData[0].school_name}}</div>
          </div>
        </div>
      </div>
      <template v-else>
        <van-empty class="!p-0"></van-empty>
        <div class="text-center text-14px text-hex-ff0000 mt-15px">春季课程开放时间：2月3日，敬请期待！</div>
      </template> -->
      <div class="font-bolder text-18px mt-25px mb-15px">春季课程</div>
    </template>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad">
      <template v-if="listData.length!=0 && activeKey!=='zbkc'">
        <div class="grid grid-cols-2 gap-15px">
          <div class="cardDiv relative" v-for="(item, index) in listData" :key="index" @click="gotoPage(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[activeCourse.field.view]) > 9999 ? (Number(item[activeCourse.field.view]) / 10000).toFixed(0) + "w+" : item[activeCourse.field.view]}}</span>
              </div>
              <div class="flex items-center ml-12px">
                <img class="mr-5px" :src="zanImg" alt="" />
                <span>{{Number(item[activeCourse.field.like]) > 9999 ? (Number(item[activeCourse.field.like]) / 10000).toFixed(0) + "w+" : item[activeCourse.field.like]}}</span>
              </div>
            </div>
            <img class="w-full h-100px rounded-t-6px" :src="item[activeCourse.field.img]" alt="" />
            <div class="px-8px py-5px h-50px">
              <div class="truncate text-14px mb-8px">{{item[activeCourse.field.title]}}</div>
              <div class="flex justify-between items-center text-12px text-hex-666666">
                <div class="whitespace-nowrap">{{item[activeCourse.field.teacher]}}</div>
                <div class="flex-1 truncate text-right ml-8px" v-if="activeCourse.field.school">{{item[activeCourse.field.school]}}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="listData.length!=0 && activeKey==='zbkc'">
        <div class="cardDiv relative flex p-8px mb-15px" v-for="(item, index) in listData" :key="index" @click="gotoPage(item)">
          <div class="rounded-br-6px rounded-tl-6px flex items-center absolute top-8px left-8px 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[activeCourse.field.view]) > 9999 ? (Number(item[activeCourse.field.view]) / 10000).toFixed(0) + "w+" : item[activeCourse.field.view]}}</span>
            </div>
          </div>
          <img class="w-140px h-100px mr-10px rounded-6px" :src="item[activeCourse.field.img]" alt="" />
          <div class="flex-1 flex flex-col py-5px">
            <div class="flex-1">
              <div class="font-bolder text-14px">{{item[activeCourse.field.title]}}</div>
              <div class="text-12px text-hex-222222 mt-5px mb-10px break-all">开启时间：{{item[activeCourse.field.time]}}</div>
            </div>
            <div class="flex justify-between items-center text-12px text-hex-666666">
              <div class="whitespace-nowrap">{{item[activeCourse.field.teacher]}}</div>
              <div class="flex-1 truncate text-right ml-8px" v-if="activeCourse.field.school">{{item[activeCourse.field.school]}}</div>
            </div>
          </div>
        </div>
      </template>
      <van-empty v-else></van-empty>
    </van-list>

    <filter-condition v-if="showFilter" :filter="activeCourse.filterData" @search="handleSearch"></filter-condition>
  </div>
</template>

<script setup>
import filter from "~/assets/filter.png";
import eyeImg from "~/assets/eye.png";
import zanImg from "~/assets/zan.png";

const router = useRouter()

const props = defineProps({
  course: Object,
});
let activeCourse = $ref({});
let activeKey = $ref("");

let showFilter = $ref(false);
let keyword = $ref("");
let loading = $ref(false);
let finished = $ref(false);
let listData = $ref([]);
let page = $ref("1");
let limit = $ref("10");

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

watch(() => props.course, (val) => {
  init(val);
  reGetList();
}, { deep: true })

init(props.course)
function init(val) {
  keyword = "";
  activeCourse = JSON.parse(JSON.stringify(props.course));
  activeKey = val.path;
  // if (activeKey === "qjkc") {
  //   initkcap();
  // }
}

// 春季课程-课程安排
let kcapData = $ref([]);
async function initkcap() {
  let obj = {
    page: "1",
    limit: "1",
    tmk_sftjmszx: "3",
    kc_plan: "1"
  }
  let { code, data } = await request({ url: "/txwx/mszy_zj/index", data: obj });
  if (code == 1) {
    kcapData = [...data.page_data];
  }
}

function showMore() {
  router.push({
    path: "/classSchedule"
  })
}

async function onLoad() {
  let obj = {
    page,
    limit,
    keyword,
    ...activeCourse.params
  }
  loading = true;
  let { code, data } = await request({ url: activeCourse.url, 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 handleSearch(obj) {
  showFilter = false;
  if (obj) {
    activeCourse.filterData.map((item) => {
      item.value = obj[item.key];
    })
    activeCourse.params = Object.assign(activeCourse.params, obj);
    reGetList();
  }
}


function gotoPage(data) {
  let url = "";
  let query = activeCourse.query ? activeCourse.query : {};
  if (activeCourse.detail) {
    query[activeCourse.field.id] = data[activeCourse.field.id];
    url = activeCourse.detail
  } else {
    url = `/detail/${activeKey}/-/${data[activeCourse.field.id]}`;
  }
  router.push({
    path: url,
    query
  })
}
</script>

<style lang="scss" scoped>
.cardDiv {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0px 5px 12px 0px rgba(153, 160, 168, 0.18);
}
:deep() {
  .van-empty {
    transform: scale(0.6);
    height: 80px;
  }
}
</style>