<template>
    <div
        class="mt-10px shadow-default bg-white pl-35px pr-30px pr-35px h-60px rounded-10px relative flex items-center justify-between">
        <h3 class="nav-title">
            直播课程 - {{ chapter_info.kc_info?.tz_kcbt }} -
            <span>{{ course_title }}</span>
        </h3>
        <div class="btnDiv">
            <el-button size="large" @click="linkBack" class="w-100px">返回
            </el-button>
        </div>
    </div>
    <div class="mt-10px shadow-default bg-white-grey pt-25px pl-35px pr-35px pb-35px rounded-10px">
        <div class="flex justify-between">
            <div class="w-800px">
                <div class="flex justify-between items-center">
                    <h3 class="nav-title flex-1">
                        <span>{{ course_title }}</span>
                    </h3>
                    <div class="flex">
                        <div class="mr-30px align-middle thumb cursor-pointer" @click="thumbOpt">
                            <span class="align-middle" :class="chapter_info.is_like == '1' ? 'selected' : ''"></span>
                            <i class="ml-5px text-16px color-blue inline-block align-middle not-italic">{{
                                chapter_info.tzk_dzl }}</i>
                        </div>
                        <div class="relative align-middle share cursor-pointer">
                            <span class="align-middle"></span>
                            <i class="ml-5px text-16px color-blue inline-block align-middle not-italic">分享</i>
                            <div class="share-box">
                                <div class="share-arrow"></div>
                                <div class="share-con">
                                    <h3 class="text-16px text-center text-black">
                                        呼唤小伙伴们前来围观吧
                                    </h3>
                                    <div class="flex items-center">
                                        <div class="pt-15px">
                                            <h3 class="t-1">地址</h3>
                                            <h4 class="t-2 mt-8px truncate px-5px">
                                                {{ shareLink }}
                                            </h4>
                                            <div class="mt-10px btnDiv">
                                                <el-button size="small" class="w-100px" @click="copyLink">复制链接</el-button>
                                            </div>
                                        </div>
                                        <div class="d-line"></div>
                                        <div class="w-100px h-100px">
                                            <qrcode-vue v-if="chapter_info.pull_m3u8_address" :value="shareLink" size="100"
                                                level="H" />
                                        </div>
                                        <h3 class="ml-15px text-12px text-black">手机扫码分享</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-20px" v-if="chapter_info.vod_mp4_address && chapter_info.vod_mp4_address !== ''"
                    id="player-con"></div>
                <div v-else-if="chapter_info.status == '3' && !chapter_info.vod_mp4_address"
                    class="mt-20px w-full h-460px bg-hex-000 flex items-center justify-center text-hex-fff text-18px">
                    回看视频生成中……
                </div>
                <div v-else-if="chapter_info.status == '1'"
                    class="mt-20px w-full h-460px bg-hex-000 flex items-center justify-center text-hex-fff text-18px">
                    暂未开始, 请耐心等待……
                </div>
                <!-- <div class="mt-20px" id="player-con"></div> -->
            </div>
            <div class="w-300px mt-46px right-box pt-30px">
                <div class="right-nav ml-20px">
                    <span>相关章节</span>
                    <i></i>
                </div>
                <ul v-if="chapterList.length>0" class="mt-25px right-chapter-list">
                    <li v-for="item in chapterList" :key="item.tzk_id" :class="item.tzk_id === tzk_id ? 'selected' : ''"
                        @click="changeChapter(item)">
                        {{ item.tzk_ksmc }}
                    </li>
                </ul>
                <nodata class="mt-20px" size="80" v-else></nodata>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import nodata from "@/pages/xsd/component/noData.vue";
import {
    chapter_detail,
    chapter_list,
    thumb_add,
    thumb_del,
    jf_list,
} from "./api";
import QrcodeVue from "qrcode.vue";
const router = useRouter();
const route = useRoute();
let course_title = $ref("");
let tz_id = $ref('');
let tzk_id = $ref("");
let shareLink = $ref("");
let chapter_info = $ref({
    // ttz_zjmc: "",
    // ttz_dzl: "",
    // is_like: "",
    // ttz_video_url: "",
});
let chapterList = $ref([]);

const linkBack = () => {
    router.back()
};

function getChapterDetail() {
    let data = {
        tzk_id: tzk_id,
    };
    chapter_detail(data).then((res) => {
        if (res.code === "1") {
            chapter_info = res.data.one_info;
            course_title = res.data.one_info.tzk_ksmc;
            if (chapter_info.vod_mp4_address && chapter_info.vod_mp4_address !== '') {
                var player = new Aliplayer(
                    {
                        id: "player-con",
                        // source: res.data.one_info.tzk_video_file?.split('|')[0],
                        source: res.data.one_info.vod_mp4_address,
                        width: "100%",
                        height: "460px",
                        autoplay: false,
                        cover: getFullUrl(res.data.one_info.tzk_img),
                        isLive: false,
                        rePlay: false,
                        playsinline: true,
                        preload: true,
                        controlBarVisibility: "hover",
                        useH5Prism: true,
                        skinLayout: [
                            {
                                name: "bigPlayButton",
                                align: "blabs",
                                x: 30,
                                y: 80,
                            },
                            {
                                name: "H5Loading",
                                align: "cc",
                            },
                            {
                                name: "errorDisplay",
                                align: "tlabs",
                                x: 0,
                                y: 0,
                            },
                            {
                                name: "infoDisplay",
                            },
                            {
                                name: "tooltip",
                                align: "blabs",
                                x: 0,
                                y: 56,
                            },
                            {
                                name: "thumbnail",
                            },
                            {
                                name: "controlBar",
                                align: "blabs",
                                x: 0,
                                y: 0,
                                children: [
                                    {
                                        name: "progress",
                                        align: "blabs",
                                        x: 0,
                                        y: 44,
                                    },
                                    {
                                        name: "playButton",
                                        align: "tl",
                                        x: 15,
                                        y: 12,
                                    },
                                    {
                                        name: "timeDisplay",
                                        align: "tl",
                                        x: 10,
                                        y: 7,
                                    },
                                    {
                                        name: "fullScreenButton",
                                        align: "tr",
                                        x: 10,
                                        y: 12,
                                    },
                                    {
                                        name: "setting",
                                        align: "tr",
                                        x: 15,
                                        y: 12,
                                    },
                                    {
                                        name: "volume",
                                        align: "tr",
                                        x: 5,
                                        y: 10,
                                    },
                                ],
                            },
                        ],
                    },
                    function (player) {
                        console.log("The player is created");
                    }
                );
            }

        }
    });
}

function getChapterList() {
    chapter_list({ limit: 100, tz_id, M5jxrcL: null, is_ended: '1' }).then((res) => {
        if (res.code == "1") {
            chapterList = res.data.page_data;
        }
    });
}


function changeChapter(item) {
    router.replace({
        name: "home_zbkc_detail",
        params: { tzk_id: item.tzk_id },
    });
}

if (route.params.tz_id && route.params.tzk_id) {
    tzk_id = route.params.tzk_id;
    tz_id = route.params.tz_id;
    shareLink = window.location.href;
    getChapterDetail();
    getChapterList();
}
watch(
    () => route.path,
    () => {
        router.go(0);
    }
);

function thumbOpt() {
    if (chapter_info.is_like == 0) {
        let data = {
            issubmit: "1",
            txwx_dz: {
                td_kclx: "3",
                td_dz_id: tzk_id,
                td_keyword: chapter_info.tzk_ksmc,
                td_dz_content: chapter_info.status
            },
        };
        thumb_add(data).then((res) => {
            if (res.code === "1") {
                ElMessage.success("点赞成功！");
                chapter_info.is_like = 1;
                chapter_info.tzk_dzl++;
            }
        });
    } else {
        let data = {
            td_kclx: "3",
            td_dz_id: tzk_id,
            td_keyword: chapter_info.tz_mc,
            td_dz_content: chapter_info.status
        };
        thumb_del(data).then((res) => {
            if (res.code === "1") {
                ElMessage.success("取消点赞成功！");
                chapter_info.is_like = 0;
                chapter_info.tzk_dzl--;
            }
        });
    }
}

let listData = $ref([]);
function jfData() {
    jf_list().then((res) => {
        if (res.code == "1") {
            listData = res.data.page_data;
        }
    });
}
async function copyLink() {
    await navigator.clipboard.writeText(shareLink);
    ElMessage.success("已复制");
    jfData();
}
</script>

<style lang="scss" scoped>
$color: #1259a1;

.color-blue {
    color: $color;
}

.bg-white-grey {
    background: #fcfeff;
}

.shadow-default {
    box-shadow: 0 10px 24px rgba(161, 153, 168, 0.18);
}

.color-grey {
    color: #999;
}

.border-bottom-1 {
    border-bottom: 1px solid #eee;
}

.nav-title {
    font-size: 16px;
    color: #949494;

    span {
        font-size: 18px;
        color: #050026;
    }
}

.btnDiv {
    .el-button {
        background: $color;
        border-color: $color;
        color: #fff;
    }
}

.search-box {
    width: 300px;
    height: 48px;
    background: #f6f8fa;
    border-radius: 8px;
    padding: 0 10px 0 14px;
    display: flex;
    align-items: center;

    input {
        flex: 1;
        height: 48px;
        border: 0;
        font-size: 16px;
        color: #333;
        outline: none;
        background: #f6f8fa;
    }

    .search-btn {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: $color url("/images/icon-search.png") center no-repeat;
        background-size: 13px 13px;
    }
}

.course-list {
    display: flex;
    flex-wrap: wrap;

    li {
        min-width: 0;
        width: 268px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
        margin-right: 19px;
        margin-bottom: 15px;
        cursor: pointer;

        &:nth-child(4n) {
            margin-right: 0;
        }

        .course-img {
            width: 100%;
            height: 151px;
            border-radius: 10px 10px 0 0;
            overflow: hidden;

            img {
                width: 100%;
            }

            .info-bottom {
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 30;
                width: 152px;
                height: 27px;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 0 10px 0 0;
                display: flex;

                .icon-view {
                    width: 24px;
                    height: 16px;
                    background: url("/images/icon/view.png") center no-repeat;
                    background-size: 24px 16px;
                }

                .icon-thumb {
                    width: 17px;
                    height: 16px;
                    background: url("/images/icon/thumb.png") center no-repeat;
                    background-size: 17px 16px;
                }
            }
        }
    }
}

.thumb {
    display: inline-block;
    font-size: 16px;
    color: $color;

    span {
        width: 21px;
        height: 20px;
        display: inline-block;
        background: url("/images/icon-thumb.png") center no-repeat;
        background-size: 21px 20px;

        &.selected {
            background: url("/images/icon-thumb-blue.png") center no-repeat;
            background-size: 21px 20px;
        }
    }
}

.share {
    display: inline-block;
    font-size: 16px;
    color: $color;

    &:hover {
        .share-box {
            display: block;
        }
    }

    span {
        width: 20px;
        height: 20px;
        display: inline-block;
        background: url("/images/icon-share.png") center no-repeat;
        background-size: 20px 20px;
    }

    .share-box {
        display: none;
        position: absolute;
        left: 50%;
        top: 24px;
        z-index: 100;
        margin-left: -209px;
        width: 418px;
        padding-top: 7px;

        .share-arrow {
            margin: 0 auto;
            width: 17px;
            height: 9px;
            background: url("/images/icon-share-arrow.png") center no-repeat;
            background-size: 17px 9px;
        }

        .share-con {
            margin-top: -2px;
            width: 100%;
            border-top: 4px solid #1259a1;
            height: 198px;
            background: #fff;
            border-radius: 10px;
            padding: 20px 0 0 15px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);

            .t-1 {
                font-size: 12px;
                color: #00a3ff;
            }

            .t-2 {
                width: 177px;
                height: 34px;
                background: #f7f7f7;
                font-size: 12px;
                color: #000;
                line-height: 34px;
            }

            .d-line {
                margin: 15px 15px 0 15px;
                width: 1px;
                height: 120px;
                background: rgb(232, 232, 232);
            }
        }
    }
}

.right-box {
    height: 460px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 2px 10px 24px rgba(161, 153, 168, 0.18);

    .right-nav {
        position: relative;
        width: 72px;

        span {
            position: relative;
            display: block;
            z-index: 30;
            font-size: 16px;
            color: #222;
            text-align: center;
            line-height: 30px;
        }

        i {
            position: absolute;
            left: 0;
            bottom: 3px;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: rgba(108, 93, 211, 0.2);
        }
    }

    .right-chapter-list {
        width: 100%;
        height: 350px;
        overflow-y: auto;

        li {
            margin: 0 auto;
            width: 253px;
            height: 40px;
            background: rgba(18, 89, 161, 0.05);
            border-radius: 16px 16px 0 0;
            padding: 0 20px;
            font-size: 14px;
            color: #050026;
            line-height: 40px;
            cursor: pointer;

            &.selected {
                background: #1259a1;
                color: #fff;
            }

            &+li {
                margin: 20px auto 0;
            }
        }
    }
}

.res-box {
    width: 100%;
    height: 317px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 2px 10px 24px rgba(161, 153, 168, 0.18);

    .res-nav {
        display: flex;
        justify-content: center;
        align-items: center;

        li {
            position: relative;
            padding: 0 5px;
            cursor: pointer;

            &.selected {
                span {
                    color: #1259a1;
                }
            }

            &+li {
                margin-left: 60px;
            }

            span {
                position: relative;
                display: block;
                font-size: 16px;
                color: #9fa9b4;
                text-align: center;
            }

            i {
                position: absolute;
                left: 0;
                bottom: 2px;
                width: 100%;
                height: 6px;
                opacity: 0.2;
                background: #1259a1;
                border-radius: 3px;
            }
        }
    }

    .res-list {
        width: 100%;
        padding: 0 20px 0 30px;
        height: 200px;
        overflow-y: auto;

        li {
            display: flex;
            padding: 20px;
            align-items: center;

            &+li {
                border-top: 1px dashed rgba(110, 88, 197, 0.5);
            }

            .file-type {
                min-width: 0;
                width: 26px;
                height: 26px;

                &.word {
                    background: url("/images/word.png") center no-repeat;
                }

                &.excel {
                    background: url("/images/excel.png") center no-repeat;
                }

                &.ppt {
                    background: url("/images/ppt.png") center no-repeat;
                }

                &.pdf {
                    background: url("/images/pdf.png") center no-repeat;
                }
            }

            .file-btn {
                width: 58px;
                height: 24px;
                border: 1px solid #1259a1;
                border-radius: 12px;
                font-size: 12px;
                color: #1259a1;
                text-align: center;
            }
        }
    }
}

::v-deep .el-dialog__footer {
    text-align: center;
}
</style>