<template>
  <u-popup
    v-model="props.show"
    mode="bottom"
    closeable
    safe-area-inset-bottom
    height="40%"
    border-radius="30"
    @close="handeClose"
  >
    <view class="info">
      <view style="width: 100%">
        <view class="title">课程资料</view>
        <view v-if="infoList.length">
          <view v-for="(item, i) in infoList" :key="i" class="item">
            <view>
              <u-image
                src="../../../static/img/PDF.png"
                width="35"
                height="40"
              ></u-image>
              <view class="pdf-name">{{ item.name }}</view>
            </view>
            <view>
              <u-image
                src="../../../static/img/Check.png"
                width="35"
                height="40"
                style="margin-right: 30rpx"
                @tap="pdfView(item)"
              ></u-image>
              <u-image
                src="../../../static/img/download.png"
                width="35"
                height="40"
                @tap="downLoadPdf(item)"
              ></u-image>
            </view>
          </view>
        </view>
        <u-empty
          v-else
          text="暂无数据~"
          icon-size="300"
          :margin-top="100"
          src="../../static/img/noData.png"
        ></u-empty>
      </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) {
    infoList.value = res.data;
  }
};

defineExpose({
  init,
});
</script>

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

  .title {
    text-align: center;
    width: 100%;
    margin-bottom: 48rpx;
    margin-top: 30rpx;
    height: 48rpx;
    font-size: 34rpx;
    font-weight: 500;
    color: #222222;
    line-height: 40rpx;
  }

  .item {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;

    // height: 88rpx;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 60rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;

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

      .pdf-name {
        margin-left: 22rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(34, 34, 34, 0.9);
      }
    }
  }
}
</style>

<style lang="scss" scoped>
:deep(uni-modal) {
  z-index: 19999 !important;
}

:deep(.uni-scroll-view-content) {
  background-color: #fbfcff;
}
</style>
