<template>
    <div>
        <el-row>
            <el-col :span="1" id="course-page-body">
                <el-card style="position: fixed;">
                    <el-menu default-active="1" @select="handleBack">
                        <el-menu-item index="0">
                            <el-icon><Back/></el-icon>
                            <span style="padding-left: 10px">返回课程</span>
                        </el-menu-item>
                    </el-menu>
                </el-card>
            </el-col>
            <el-col :span="20">
                <div>
                    <pdf-viewer v-if="renderComponent"></pdf-viewer></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import PdfViewer from "./pdf/PdfViewer";
    import {SET_SRC, SET_CURRENT_PAGE} from "../../store/types/pdf-types";
    import { mapState } from "vuex";

    export default {
        components: { PdfViewer },
        computed: {
            ...mapState({
                src: state => state.pdf.src,
            })
        },
        props: {
            courseWareId: {
                required: true,
            },
        },
        data() {
            return {
                renderComponent: true,
                //fileUrl: "https://seec-portal.oss-cn-hangzhou.aliyuncs.com/1/07-%E9%9C%80%E6%B1%82%E6%96%87%E6%A1%A3%E5%8C%96%E4%B8%8E%E9%AA%8C%E8%AF%81.pdf",
            };
        },
        watch: {
            $route(to, from) {
                window.location.reload(); //监测到路由发生跳转时刷新一次页面
            },
        },
        mounted() {
            const params = {
                phone: localStorage.phone,
                password: localStorage.password
            };
            // this.$apis.loginAPI(params)
            //     .then((res) => {
            //         if (res.data.code === 0) {
            //             console.log(res);
            //             if (this.rememberMe) {
            //                 localStorage.phone = this.cardForm.phone;
            //                 localStorage.password = this.cardForm.password;
            //                 localStorage.rememberMe = this.rememberMe;
            //                 this.st="true";//修改登录状态为true
            //                 localStorage.setItem("s",this.st);
            //                 console.log(localStorage);
            //             } else {
            //                 localStorage.removeItem("rememberMe");
            //                 localStorage.removeItem("phone");
            //                 localStorage.removeItem("password");
            //             }
            //
            //             //localStorage.setItem("token", res.data.data.token);
            //
            //             this.$store.commit("state_set_user", res.data.data);
            //             this.$message({
            //                 showClose: true,
            //                 message: "登录成功",
            //                 type: "success",
            //                 duration: 1000,
            //             });
            //             // setTimeout(() => {
            //             //     if (!res.data.data.redirectUri) {
            //             //         if (this.$route.params.login_to) {
            //             //             this.$router.push(String(this.$route.params.login_to));
            //             //         } else {
            //             //             this.$router.push("/portal");
            //             //         }
            //             //     } else {
            //             //         let p = new Promise(function (resolve, reject) {
            //             //             setCookie({redirect_uri: ""}, -1);
            //             //             resolve();
            //             //         }).then(r => {
            //             //             window.location.href = res.data.data.redirectUri + "?id_token=" + res.data.data.token;
            //             //         });
            //             //     }
            //             // }, 500);
            //         } else {
            //             this.$message({
            //                 showClose: true,
            //                 message: res.data.message,
            //                 type: "error"
            //             });
            //             Object.assign(this.$data, this.$options.data());
            //             this.$refs.verifier.init();
            //         }
            //     })
            //     .catch((e) => {
            //         this.$message({
            //             showClose: true,
            //             message: e,
            //             type: "error"
            //         });
            //     });
            this.$store.commit(SET_CURRENT_PAGE, { currentPage: 1 });
            this.$apis.getCourseWareUrlById(this.$route.params.courseWareId).then(res => {
                this.$apis.previewpdf(res.data.data).then(res => {
                    console.log(res);
                    let blob = new Blob([res.data], {type: "application/pdf;charset=utf-8"});
                    let href = URL.createObjectURL(blob);
                    console.log(href);
                    this.$store.commit(SET_SRC, { src: href });
                    this.renderComponent = false;
                    this.$nextTick(() => {
                        // 在 DOM 中添加 my-component 组件
                        console.log(1);
                        this.renderComponent = true;
                    });
                });
            });
        },
        methods: {
            handleBack() {
                this.$apis.getCourseIdById(this.$route.params.courseWareId).then(res => {
                    this.$router.push("/course/" + res.data.data);
                });
            },
        }
    };
</script>

<style>
    #course-page-body {
        margin: 40px 60px 80px 0;
        min-height: calc(100vh - 340px);
        position: relative;
    }
</style>
