<template>
    <div class="learning-materials-page">
        <div class="learning-materials-card">
            <div class="card-title">
                <div class="card-title-right">
                    <el-link :underline="false" type="primary" @click="back">
                        <i class="el-icon-d-arrow-left el-icon--right"></i> 返回
                    </el-link>
                </div>
                <div class="card-title-left">
                    <div class="card-text-overflow">
                        {{ fileData.name || fileData.fileName || '-' }}
                    </div>
                </div>
                <div class="card-title-right">
                    <el-link :underline="false" type="primary"> </el-link>
                </div>
            </div>

            <div class="card-content">
                <!-- 文档学习 -->
                <StudyDocument :dataInformation="fileData" type="read" />
            </div>
        </div>
    </div>
</template>

<script>
import StudyDocument from '@/views/educationalTraining/personalAffairs/TodoTrainingTasks/routerComponents/CourseLearning/components/LearningMaterialsPage/components/StudyDocument/index.vue'

export default {
    name: 'previewPage',
    components: {StudyDocument},
    props: {
        fileData: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    data() {
        return {}
    },
    methods: {
        // 展示弹层
        back() {
            this.$emit('back')
        },
    },
}
</script>

<style lang="scss" scoped>
@import "~@/assets/css/element-variables";

.learning-materials-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: $--system-background-color;
  box-sizing: border-box;

  .learning-materials-card {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: $--system-module-color1;
    padding: 0 20px 20px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;

    .card-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid $--system-border-color2;
      margin: 0 0 15px;
      padding: 22px 0;

      .card-title-left {
        margin-right: 10px;
        display: flex;
        align-items: center;
        column-gap: 8px;

        .card-title-hr {
          width: 4px;
          height: 18px;
          background-color: $--color-primary;
        }

        .card-text-overflow {
          width: 100%;
          font-size: 18px;
        }
      }

      .card-title-right {
        ::v-deep .el-link--inner {
          font-size: 16px !important;

          i {
            font-size: 16px !important;
          }
        }
      }
    }

    .card-content {
      flex: 1;
      height: 0;
    }
  }
}
</style>
