<template>
  <div>
    <div class="header">
      <el-page-header @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3"> 资源详情 </span>
        </template>
      </el-page-header>
    </div>

    <div class="content">
      <h4>{{ dataList.resourceName }}</h4>

      <!-- <el-card shadow="hover">
        <el-descriptions :title='dataList.resourceName' border style="position: relative">
          <el-descriptions-item :span="3" min-width="200px" label="专利" align="center">

          </el-descriptions-item>
        </el-descriptions>
      </el-card> -->

      <div class="info">
        <span>作者：{{ dataList.author }}</span>
        <span>发表期刊：{{ dataList.publishJournal }}</span>
        <span>期刊号：{{ dataList.journalNo }}</span>
        <span>发表时间：{{ dataList.resourceTime }}</span>
      </div>

      <p>资源简介：{{ dataList.resourceBrief }}</p>

      <el-divider></el-divider>

      <div>
        <p class="title">资源附件</p>
      </div>

      <FileOrImage :data="dataList.paperAccessory" :isEdit="false" width="100px" :dataList=[dataList.paperAccessory]
        height="110px" objectFit="cover">
      </FileOrImage>

    </div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router';
import { getLearningResource } from '@/api/study/resource/index';
import FileOrImage from '@/components/FileOrImage/index.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const _id = computed(() => proxy.$route.query.id);
const dataList = ref<any>([]);
const getData = async () => {
  if (_id.value.toString() == '' || null) {
    return
  }
  const res = await getLearningResource(_id.value.toString());
  console.log(`rresssss`, res);
  dataList.value = res.data;

}
const goBack = () => {
  router.back();
}
onActivated(() => {
  getData();
})
onMounted(() => {
  getData();
})
</script>

<style lang="scss" scoped>
.header {
  margin: 1vh 0 0 2vw;

}

.content {
  padding-left: 10%;
  padding-right: 10%;

  h4 {
    // padding-left: 5vw;
    font-size: 1.2rem;
  }

  .info {
    // width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2vh;
  }

  p {
    // width: 80%;
    margin: 0 auto;
  }


}

.btn {
  margin-top: 1vh;
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;

  .el-button {
    width: 30%;
  }
}

.title {
  position: relative;
  padding-left: 1vw;
  font-size: 1.2rem;
  margin-bottom: 1.5vh !important;
}

.title::before {
  content: "";
  width: 5px;
  height: 20px;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3px;
  background-color: #36d;
}

.archives-box {
  margin-top: 2vh;
}
</style>