<template>
  <div>
    <van-nav-bar :title="title" :left-arrow="!fromZlb" @click-left="onClickLeft" />
    <div class="flex px-12px my-15px">
      <van-search class="!p-0 flex-1" shape="round" :clearable="false" v-model="param.keyword" @search="reGetList" placeholder="搜索" />
      <div class="flex items-center text-14px ml-15px" @click="showFilter=true">
        <img class="mr-5px" :src="filter" alt="" />
        筛选
      </div>
    </div>
    <div class="px-8px">
      <div class="jj_bg w-full h-88px p-10px text-white" @click="linkTo(kcDetailData, 'brief')">
        <div class="flex items-baseline">
          <div class="text-14px mr-20px">{{ kcDetailData.tz_ssdw_mc }}</div>
          <div class="text-12px">{{ kcDetailData.tz_zjrxm }}</div>
        </div>
        <div class="text-12px mt-8px leading-16px">
          <span>简介:</span>
          <div class="text">{{ kcDetailData.tjzx_kcjj }}>></div>
        </div>
      </div>
      <div class="mt-15px mx-10px">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="initData">
          <div v-if="chapterData.length!=0" class="grid grid-cols-2 gap-15px">
            <div class="cardDiv relative" v-for="(item, index) in chapterData" :key="index" @click="linkTo(item, 'detail')">
              <div v-if="item.status==1" class="rounded-tl-6px rounded-br-6px absolute top-0 left-0 text-12px text-white bg-hex-ef7a02d9 px-10px py-5px">{{item.status_msg}}</div>
              <div v-if="item.status==3" class="rounded-tl-6px rounded-br-6px absolute top-0 left-0 text-12px text-white bg-hex-797979d9 px-10px py-5px">{{item.status_msg}}</div>
              <div v-if="item.status==2" class="rounded-t-6px absolute z-10 w-full h-100px top-0 left-0 text-14px text-hex-00A3FF bg-hex-00000066 flex items-center">
                <div class="text-center w-full">
                  <img class="m-auto" :src="zzzbImg" alt="" />
                  <div>{{item.status_msg}}</div>
                </div>
              </div>
              <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.tzk_lll) > 9999 ? (Number(item.tzk_lll) / 10000).toFixed(0) + "w+" : item.tzk_lll}}</span>
                </div>
                <div class="flex items-center ml-12px">
                  <img class="mr-5px" :src="zanImg" alt="" />
                  <span>{{Number(item.tzk_dzl) > 9999 ? (Number(item.tzk_dzl) / 10000).toFixed(0) + "w+" : item.tzk_dzl}}</span>
                </div>
              </div>
              <img class="w-full h-100px rounded-t-6px" :src="item.tzk_img" alt="" />
              <div class="px-8px py-5px h-70px">
                <div class="truncate text-14px mb-8px">{{item.tzk_ksmc}}</div>
                <div class="truncate text-12px mb-8px text-hex-222222">开启时间：{{item.tzk_zbkqsj}}</div>
                <div class="flex justify-between items-center text-12px text-hex-666666">
                  <div class="whitespace-nowrap">{{item.tzk_xm}}</div>
                  <div class="flex-1 truncate text-right ml-8px">{{item.tzk_ssdw}}</div>
                </div>
              </div>
            </div>
          </div>
          <van-empty v-else></van-empty>
        </van-list>
      </div>
    </div>

    <van-popup v-model:show="showFilter" round closeable position="bottom" :style="{ textAlign: 'left', height: '350px' }" @close="showFilter=false">
      <div class="flex flex-col h-full">
        <div class="text-center text-16px text-hex-323233 leading-60px">筛选</div>
        <van-tree-select class="flex-1" v-model:active-id="activeId" v-model:main-active-index="activeIndex" :items="treeData"></van-tree-select>
        <div class="text-center px-1 my-1">
          <van-button type="primary" block color="#154a9a" @click="filterList">确定</van-button>
        </div>
      </div>
    </van-popup>

    <van-popup style="border-radius: 16px;" :close-on-click-overlay="false" v-model:show="popupShow">
      <div class="popupDiv">
        <div style="display: flex;justify-content: center;"><img :src="getAssetsImages('success.png')" /></div>
        <div style="text-align: center;">
          <span>直播暂未开始，<br />请耐心等待。</span>
        </div>
        <div class="conifrmButton" @click="popupShow=false">
          确认
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup>
import { getAssetsImages } from "~/utils/getAssets";
import filter from "~/assets/filter.png";
import eyeImg from "~/assets/eye.png";
import zanImg from "~/assets/zan.png";
import zzzbImg from "~/assets/zzzb.png";

let fromZlb = localStorage.getItem('fromZlb') == 1
const onClickLeft = () => history.back();
const router = useRouter();
const route = useRoute();
let chapterData = $ref([]);
let kcDetailData = $ref({});
let title = $ref("");

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

function initData() {
  loading = true;
  request({
    url: "/txwx/zbkc_ks/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()
}

let showFilter = $ref(false);
let activeId = $ref("");
let activeIndex = $ref(0);
let treeData = $ref([
  {
    text: '状态',
    children: [
      { text: '全部', id: "" },
      { text: '暂未开始', id: "1" },
      { text: '正在直播', id: "2" },
      { text: '查看回放', id: "3" }
    ]
  }
]);

function filterList() {
  param.status = activeId;
  showFilter = false;
  reGetList();
}

let popupShow = $ref(false);

function linkTo(item, path) {
  if (path == 'brief') {
    router.push({ path: '/brief', query: { tz_id: item.tz_id, name: 'zbkc' } })
  } else if (item.status == 1) {
    popupShow = true;
  } else if (item.status != 1) {
    router.push({ path: `/detail/zbkc_ks/${route.query.tz_id}/${item.tzk_id}` })
  }
}

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

</script>
<style lang="scss" scoped>
.jj_bg {
  background: url("~/assets/chapter_bg.png") no-repeat;
  background-size: 100% 100%;
  .text {
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}
.cardDiv {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0px 5px 12px 0px rgba(153, 160, 168, 0.18);
}

:deep() {
  .van-sidebar {
    display: none;
  }
  .van-sidebar-item--select:before {
    background-color: rgb(21, 74, 154);
  }
  .van-tree-select__item--active {
    color: rgb(21, 74, 154);
  }
}

.popupDiv {
  width: 311px;
  height: 388px;
  background: #ffffff;
  border-radius: 16px;

  img {
    margin-top: 81.5px;
    width: 88.1px;
    height: 84px;
  }

  span {
    font-size: 14px;
    line-height: 20px;
  }

  .conifrmButton {
    margin: auto;
    margin-top: 40px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: white;
    width: 80px;
    height: 30px;
    background: #154a9a;
    border-radius: 3px;
  }
}
</style>
