<script setup lang='ts'>
import { TypeMap } from "~/pages/detail/util";
import Img from "~/assets/icon-no-data.png";
import word from "~/assets/word.png";
import pdf from "~/assets/pdf.png";
import ppt from "~/assets/ppt.png";
import excel from "~/assets/excel.png";

let fromZlb = localStorage.getItem('fromZlb') === '1'
const router = useRouter();
const props = defineProps<{
  type: string;
  tmk_id: string;
  tmz_id: string;
}>();
const theType = TypeMap[props.type];
const truthPid = props.tmk_id === "-" ? undefined : props.tmk_id;

/* 章节详情 */
const tmp_detail = ref(JSON.parse(sessionStorage.getItem("tmp_detail")!));
if (!tmp_detail.value) {
  await request({
    url: `/txwx/${props.type}/detail`,
    data: {
      [theType.id]: props.tmz_id,
    },
  }).then((res) => {
    if (res?.code === "1") tmp_detail.value = res.data.one_info;
  });
}
const res_list = $ref([]);
if (tmp_detail.value.tmz_zjkj_file !== "") {
  const res_obj = {
    title: tmp_detail.value.tmz_zjkj_file.split(";")[0],
    url: tmp_detail.value.online_file,
  };
  res_list.push(res_obj);
}
let previewUrl = $ref("");
function showDetail(url) {
window.open(url)
}
</script>

<template>
  <van-nav-bar :left-arrow="!fromZlb" title="导学案" @click-left="() => router.back()" />
  <div>
    <ul v-if="res_list.length > 0" class="res-list">
      <li v-for="item in res_list" :key="item">
        <img
          v-if="item.title.includes('.doc')||item.title.includes('.docx')"
          class="file-type"
          :src="word"
          alt=""
        />
        <img
          v-if="item.title.includes('.ppt')||item.title.includes('.pptx')"
          class="file-type"
          :src="ppt"
          alt=""
        />
        <img
          v-if="item.title.includes('.xls')||item.title.includes('.xlsx')"
          class="file-type"
          :src="excel"
          alt=""
        />
        <img
          v-if="item.title.includes('.pdf')"
          class="file-type"
          :src="pdf"
          alt=""
        />
        <h3 class="ml-10px flex-1 text-14px text-overflow color-171721">
          {{ item.title }}
        </h3>
        <button
          type="button"
          class="ml-10px file-btn"
          @click="showDetail(item.url)"
        >
          查看
        </button>
      </li>
    </ul>
    <div v-else class="py-40px text-center">
      <div>
        <img :src="Img" width="138" class="block m-0-auto" alt="" />
        <h3 class="text-18px color-050026 mt-20px">暂无数据，敬请期待！</h3>
      </div>
    </div>

  </div>
</template>
<style lang="scss" scoped>
.res-list {
  width: 100%;
  padding-top: 20px;
  li {
    display: flex;
    padding: 10px 20px;
    align-items: center;

    & + li {
      border-top: 1px dashed rgba(110, 88, 197, 0.5);
    }

    .file-type {
      min-width: 0;
      width: 26px;
      height: 26px;
    }

    .file-btn {
      width: 58px;
      height: 24px;
      border: 1px solid #1259a1;
      border-radius: 12px;
      font-size: 12px;
      color: #1259a1;
      text-align: center;
    }
  }
}
</style>
