<template>
    <div>

        <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">{{ title }} - <span>详情</span></h3>
            <div class="btnDiv">
                <el-button size="large" @click="linkTo('xsd_personal_wddz')" 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="w-800px">
                <div class="flex justify-between items-center">
                    <h3 class="nav-title flex-1"><span>{{ chapter_info.tjz_mc }}</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.tjz_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 :value="chapter_info.ttz_video_file" size="100" level="H" />
                                        </div>
                                        <h3 class="ml-15px text-12px text-black">手机扫码分享</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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 class="mt-25px right-chapter-list">
                <li v-for="item in chapterList" :class="item.tjz_id === tjz_id ? 'selected' : ''"
                    @click="changeChapter(item)">
                    {{ item.tjz_mc }}
                </li>
            </ul> -->
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { user } from '@/store/index'
import { getFullUrl } from "@/utils/helper";
import { dz_detail } from "../api";
const router = useRouter();
const route = useRoute();

let title = $ref('五年级下册美术 《创意写生》');
let course_title = $ref('')
function initData() {
    let data = {
        td_id: route.params.id,
    }
    dz_detail(data).then(res => {
        if (res.code == '1') {
            
        }
    })
}
initData();
const linkTo = (name) => {
    router.push({ name });
};
let chapter_info = $ref({})
let chapterList = $ref([]);
</script>

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

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

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

.bg_blue {
    background: $color;
}

.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;
    }
}
.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,.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, .2);

    }
  }

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

    li {
      margin: 0 auto;
      width: 253px;
      height: 40px;
      background: rgba(18, 89, 161, .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;
      }
    }
  }
}
</style>