<template>
  <div>
    <van-nav-bar
      title="课程安排"
      :left-arrow="!fromZlb"
      @click-left="() => router.back()"
    />
    <div class="flex my-15px">
      <van-search
        class="flex-1"
        v-model="param.keyword"
        :clearable="false"
        @search="reGetList"
        @clear="reGetList"
        shape="round"
        placeholder="请输入搜索关键词"
      />
      <div @click="searchShow = true" class="flex items-center text-14px mr-10px">
        <img class="mr-5px" :src="filter" alt="" />
        筛选
      </div>
    </div>
    <div class="mt-5px">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="initData"
      >
        <div class="">
          <div
            class="chapter_box"
            v-for="(item, index) in chapterData"
            :key="index"
            @click="linkTo(item, 'detail')"
          >
            <div class="chapter_box_img relative">
              <img class="w-full h-98px" :src="item.tmz_img_url" alt="" />
              <div class="absolute top-0 left-0 flex px-1 items-center r-t-box">
                <img class="img1" src="../../assets/eye.png" alt="" />
                <span class="text-white">{{
                  item.tmk_lll * 1 > 9999
                    ? (item.tmk_lll / 10000).toFixed(0) + "w+"
                    : item.tmk_lll
                }}</span>
                <img class="img2" src="../../assets/zan.png" alt="" />
                <span class="text-white">{{
                  item.tmz_dzl * 1 > 9999
                    ? (item.tmz_dzl / 10000).toFixed(0) + "w+"
                    : item.tmz_dzl
                }}</span>
              </div>
            </div>
            <div class="px-1 chapter_box_text flex flex-col justify-between">
              <div class="zjmc">{{ item.tmz_zjmc }}</div>
              <div class="time">
                <div>时间:</div>
                {{ item.tmz_kckqsj }}~{{ item.tmz_kcjssj }}
              </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>
    <filter-condition
      v-if="searchShow"
      :filter="filterData"
      @search="handleSearch"
    ></filter-condition>
  </div>
</template>
<script setup>
import filter from "~/assets/filter.png";

let fromZlb = localStorage.getItem('fromZlb') == 1
let param = $ref({
  keyword: "",
  M5jxrcL: "",
  kc_plan: "1",
  tmk_sftjmszx: "3",
  tmk_zq: "",
  tjzx_id: "",
  tjzn_id: "",
});
const router = useRouter();
let chapterData = $ref([]);

let loading = $ref(false);
let finished = $ref(false);
let page = 1;

function initData() {
  loading = true;
  request({
    url: "/txwx/mszy_zj/index",
    data: {
      page,
      limit: "6",
      ...param,
    },
  }).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();
}

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

let filterData = $ref([
  {
    name: "nj",
    key: "tjzn_id",
  },
  {
    name: "xk",
    key: "tjzx_id",
  },
  {
    name: "zq",
    key: "tmk_zq",
  },
]);

let searchShow = $ref(false)
function handleSearch(obj) {
  searchShow = false;
  if (obj) {
    filterData.map((item) => {
      item.value = obj[item.key];
    });
    param = Object.assign(param, obj);
    console.log(param,'555');
    reGetList();
  }
}

function linkTo(item, path) {
  router.push({ path: `/detail/mszy_zj/${item.tmk_id}/${item.tmz_id}` });
}
</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: 362px;
  height: 117px;
  display: flex;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0px 5px 12px 0px rgba(153, 160, 168, 0.18);
  margin: 0 auto;
  margin-top: 10px;
  padding: 10px 7px 9px 8px;
  overflow: hidden;
  .chapter_box_img {
    width: 167px;
    height: 98px;
    border-radius: 8px;
    overflow: hidden;
    .r-t-box {
      width: 98px;
      height: 22px;
      border-radius: 6px 0 6px 0px;
      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;
      }
    }
  }
  .chapter_box_text {
    width: 186px;
    height: 100%;
    .time {
      width: 185px;
      height: 22px;
      font-size: 10px;
      color: #222222;
      line-height: 11px;
    }
  }

  .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;
    color: #666666;
  }
}
.pop_title {
  font-size: 16px;
  color: #323233;
  line-height: 30px;
  height: 30px;
  margin-top: 11px;
}
.pop_sub_title {
  height: 336px;
  width: 120px;
  background: #f2f3f5;
  div {
    font-size: 14px;
    color: #323233;
    height: 48px;
    // line-height: 48px;
    padding: 14px 0 14px 12px;
  }
}
.active {
  background: #ffffff;
  position: relative;
  font-weight: 600;
}
.active::after {
  position: absolute;
  left: 0px;
  bottom: 15px;
  height: 16px;
  width: 4px;
  //   opacity: 0.7;
  //   border-radius: 3px;
  background: #154a9a;
  content: "";
}
.pop_sub_nav {
  width: 255px;
  height: 336px;
  overflow: scroll;
  div {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
    color: #323233;
    height: 48px;
    // line-height: 48px;
    padding: 14px 18px 14px 12px;
    font-weight: 600;
  }
}
.active_text {
  color: #154a9a !important;
}
</style>
