<template>
  <u-popup
    v-model="props.show"
    mode="bottom"
    closeable
    height="40%"
    border-radius="30"
    @close="handeClose"
  >
    <view class="info">
      <block v-if="infoList.length">
        <text class="title">课件资料</text>
        <view v-for="(item, i) in infoList" :key="i" class="item">
          <view>
            <u-icon name="order" size="50"></u-icon>
            <text>{{ item.name }}</text>
          </view>
          <view>
            <u-icon
              name="eye-fill"
              size="50"
              style="margin-right: 30rpx"
              @tap="pdfView(item)"
            ></u-icon>
            <u-icon name="download" size="50" @tap="downLoadPdf(item)"></u-icon>
          </view>
        </view>
      </block>
      <view v-else class="empty">
        <u-empty text="暂无资料" mode="list" />
      </view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { zconfirm } from "@/utils/util"
import { getFileList } from "@/api/course"
import { baseUrl } from "@/utils/request"

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  courseNumber: {
    type: String,
    default: "",
  },
})

const emits = defineEmits(["update:show"])

const pdfView = (item: any) => {
  uni.navigateTo({
    url:
      "/pages/course/pdfView?name=" +
      item.name +
      "&url=" +
      encodeURIComponent(baseUrl + "/" + item.url),
  })
}

const infoList = ref([] as any)

const downLoadPdf = (item: any) => {
  zconfirm("确定下载课件资料？", (result: boolean) => {
    if (result) {
      const url = baseUrl + "/" + item.url
      const a = document.createElement("a")
      a.href = url
      a.download = item.name
      a.click()
    }
  })
}

const handeClose = () => {
  emits("update:show", false)
}

const init = async () => {
  const { data: res } = await getFileList({ courseNumber: props.courseNumber })
  if (res.code == 200) {
    console.log(res)
    infoList.value = res.data
  }
}

defineExpose({
  init,
})
</script>

<style lang="scss" scoped>
.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30rpx;

  .title {
    // position: sticky;
    // top: 0;
    // left: 0;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    font-weight: bolder;
    color: $u-main-color;
    text-align: center;
    width: 100%;
  }

  .item {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $u-type-info-light;
    width: 100%;
    height: 100rpx;
    padding: 30rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;

    view {
      display: flex;
      align-items: center;

      text {
        margin-left: 10rpx;
        display: block;
        font-size: 32rpx;
        color: #000000;
      }
    }
  }
}
</style>

<style>
:deep(uni-modal) {
  z-index: 19999 !important;
}
</style>
