<template>
  <div class="container">
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'textbook' }">同步教材</el-breadcrumb-item>
        <el-breadcrumb-item>{{ info.fileName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="textbook-card">
      <div class="textbook-top">
        <div class="left">
          <h1>{{ info.fileName }}</h1>
          <p class="textbook-info">
            <span>上传者：{{ info.createBy }}</span>
            <span>上传时间：{{ info.createTime }}</span>
          </p>
        </div>

        <div class="right">
          <el-button :icon="Download" type="primary" @click="downloadFile">下载</el-button>
        </div>
      </div>
      <div class="textbook-content">
        <PreviewFile :id="id" type="textbook" :fileSuffix="fileSuffix"></PreviewFile>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getTextbookInfoAPI } from '@/apis/textbook'
import { Download } from '@element-plus/icons-vue'
import PreviewFile from '@/components/PreviewFile/index.vue'
import { download } from '@/utils/utils'

const route = useRoute()
const id = route.query.id
const fileSuffix = ref('')

const info = ref({})
const getTextbookInfoData = async () => {
  const res = await getTextbookInfoAPI(id)
  info.value = res.data
  fileSuffix.value = res.data.fileSuffix
}

const downloadFile = () => {
  download(`/portal/textbook/preview/${id}`, {}, info.value.fileName)
}

onMounted(() => {
  getTextbookInfoData()
})

</script>

<style lang="scss" scoped>
.container {
  .bread-container {
    padding: 25px 0;

    :deep(.el-breadcrumb__inner) {
      color: #fff;
      font-size: 16px;
    }

    :deep(.el-breadcrumb__separator) {
      color: #fff;
    }
  }

  .textbook-card {
    margin-top: 20px;
    padding: 20px;

    min-height: 600px;
    background-color: #E2F1F8;
    border-radius: 10px;

    .textbook-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .textbook-info {
        line-height: 60px;
        color: #A9A19B;

        span:nth-child(1) {
          margin-right: 20px;
        }
      }
    }

    .textbook-content {
      margin: 0 50px;
    }

  }

}
</style>