<script setup>
import {ref} from 'vue'
import {apiRoadShowVideoDetail,apiVideoPlayLog} from '@/api/roadShow'
import {apiReportClassifyList} from '@/api/report'
import videoPlayBox from '@/components/VideoPlayBox.vue'
import { useRoute, useRouter } from 'vue-router'
import {goYBPCCN,userInfoGo} from '@/utils/common.js'
import AvatarPopover from '../../components/AvatarPopover.vue';
import NoAuthBox from '@/components/NoAuthBox.vue';
import { ArrowRightBold } from '@element-plus/icons-vue';

const route=useRoute()
const router=useRouter()

const userInfo=localStorage.getItem('user_info')?JSON.parse(localStorage.getItem('user_info')):{}

//分类
// let reportClassify=ref([])
// async function getReportClassify(){
//     const res=await apiReportClassifyList()
//     if(res.code===200){
//         const arr=res.data.list||[]
//         reportClassify.value=[...arr,{id: -1, classify_name: "Online Video"},{id: 0,classify_name: "ABOUT US"}]
//     }
// }
// getReportClassify()
//点击分类
// function goIndex(item){
//     router.replace({
//         path:'/report/index',
//         query:{
//             firstclassifyid:item.id
//         }
//     })
// }

const code=route.query.code
const email=route.query.ShareEmail||0
let info=ref(null)
const hasAuth=ref(false)
// 视频详情
async function getDetail(){
    const res=await apiRoadShowVideoDetail({
        video_code:code,
        share_email:email
    })
    if(res.code===200){
        info.value=res.data.Video
        //hasAuth.value=res.data.auth_ok
        //取消路演的权限限制
        hasAuth.value = true
    }
}
getDetail()

let videoPlayRecordId=0
//视频播放
function handleVideoPlay(){
    if(videoPlayRecordId) return
    apiVideoPlayLog({
        id:0,
        video_id:info.value.id,
        stop_seconds:0
    }).then(res=>{
        if(res.code==200){
            videoPlayRecordId=res.data.id
        }
    })
}

function handleVideoPause(e){
    const target=e.target||e.path[0]
    const t=target.currentTime||0
    apiVideoPlayLog({
        id:videoPlayRecordId,
        video_id:info.value.id,
        stop_seconds:parseInt(t)
    }).then(res=>{
        if(res.code==200){
            console.log('记录视频播放时长成功');
        }
    })
}


//分类
let navList=ref([])
let showFilter=ref(false)
let filterSize=ref('30%')

async function getReportNav(){
    const res=await apiReportClassifyList()
    if(res.code===200){
        const arr=res.data.list||[]
        navList.value=[
            ...arr,
            {
                id: 0,
                classify_name: "ABOUT US",
                child: []
            },
        ]
    }
}
getReportNav()

const nodeClick=(rootItem,data,node)=>{
    if(!data.child){
        // 二级分类
        handleChangeSecClassify(data,node.parent.data,rootItem)
    }else{
        // 一级分类
        handleChangeFirstClassify(data,rootItem)
    }
}

function handleChangeRootClassify(item){
    if(item.id==0){
        router.replace({
            path:'/'
        })
    }    
}

function handleChangeFirstClassify(item,pitem){
        router.replace({
            path:'/report/index',
            query:{
                firstclassifyid:item.id,
                secclassifyid:0,
                rootclassifyid:pitem.id
            }
        })

}

function handleChangeSecClassify(item,pitem,rootItem){
        router.replace({
            path:'/report/index',
            query:{
                firstclassifyid:pitem.id,
                secclassifyid:item.id,
                rootclassifyid:rootItem.id
            }
        })

}
</script>

<template>
    <div class="roadshow-video-detail-page">
        <div class="header-wrap">
            <div class="navigation-row" @click="showFilter=true;filterSize='30%'">
                <img class="menu-icon-PC" src="@/assets/menu-blue.svg" />
                <span >Table of Contents</span>
                <!-- <span v-for="item in reportClassify" :key="item.id" style="margin-right:20px;cursor: pointer;" @click="goIndex(item)">{{item.classify_name}}</span> -->
            </div>
            <!-- <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div> -->
            <div class="header-right">
                <div @click="$router.replace('/')" class="us-tab">ABOUT US</div>
                <img @click="goYBPCCN" class="ybCN-jump" src="@/assets/icons/yb-cn.png" />
                <AvatarPopover :user-info="userInfo"></AvatarPopover>
            </div>
        </div>
        <div class="mobile-header-wrap">
            <img class="menu-icon" @click="showFilter=true;filterSize='100%'" src="@/assets/menu.svg" alt="">
            <span @click="$router.replace('/')" style="cursor: pointer;">HORIZON INSIGHTS</span>
            <img src="@/assets/icons/avatar.svg" class="user-info-avatar" @click="userInfoGo" />
        </div>
        <div class="detail-wrap" v-if="info">
            <div class="title">{{info.abstract}}</div>
            <videoPlayBox
                :videoUrl="info.video_url"
                @play="handleVideoPlay"
                @pause="handleVideoPause"
                v-if="hasAuth"
            />
            <no-auth-box v-else/>
        </div>
    </div>
    <!-- 筛选 -->
    <el-drawer
        v-model="showFilter"
        direction="ltr"
        :size="filterSize"
        class="self-drawer-box"
    >
        <div class="filter-wrap">
            <div class="item" v-for="item in navList" :key="item.id">
                <span  class="title" @click="handleChangeRootClassify(item)">{{item.classify_name}}</span>
                <!-- <div class="text" v-for="_item in item.child" :key="_item.id" @click="handleChangeSecClassify(_item,item)">{{_item.classify_name}}</div> -->
                <el-tree :data="item.child" node-key="id" :props="{label:'classify_name',children:'child'}" ref="treeRefList"
                :icon="ArrowRightBold" :indent="0" @node-click="(data,node)=> nodeClick(item,data,node)" v-if="item.id!=0">
                    <template #default="{ node, data }">
                        <span>{{ data.classify_name }}</span>
                    </template>
                </el-tree>
            </div>
        </div>
    </el-drawer>
</template>

<style lang="scss" scoped>
.header-wrap{
    position: sticky;
    top: 0;
    border-bottom: 1px solid #E6E6E6;
    padding: 44px 0;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    z-index: 99;
    background-color: #fff;
    .navigation-row{
        cursor: pointer;
        display: flex;
        align-items: center;
        .menu-icon-PC{
            height: 30px;
            width: 30px;
            margin-right: 8px;
        }
        span{
            color:#00459F;
            font-size: 20px;
            font-weight: 400;
        }
    }
    .header-right{
        display: flex;
        align-items: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 17px;
        z-index: 30;
        cursor: pointer;
        .us-tab{
            font-size: 20px;
            font-weight: 400;
            color:#00459F;
            cursor: pointer;
        }
        .ybCN-jump{
            height: 30px;
            cursor: pointer;
            margin: 0 40px;
        }
    }
}
// @media (max-width: 900px){
//     .header-wrap{
//         .navigation-row{
//             span{
//                 font-size: 16px;
//             }
//         }
//     }
// }
.mobile-header-wrap{
    font-size: 17px;
    box-shadow: 0px 4px 20px rgba(180, 180, 180, 0.16);
    padding: 15px 0;
    text-align: center;
    font-weight: bold;
    color: var(--el-color-primary);
    border-bottom: 1px solid#E6E6E6;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 99;
    display: none;
    position: relative;
    .menu-icon{
        position: absolute;
        left: 17px;
        top: 50%;
        transform: translateY(-50%);
        width: 17px;
    }
}
@media (max-width: 768px){
    .header-wrap{
        display: none;
    }
    .mobile-header-wrap{
        display: block;
        .user-info-avatar{
            display: flex;
            align-items: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 17px;
            height: 18px;
        }
    }
}
.detail-wrap{
    margin-top: 20px;
    .title{
        margin-bottom: 20px;
    }
}
@media (max-width: 768px){
    .detail-wrap{
        .title{
            padding: 0 16px;
        }
    }
}

.filter-wrap{
    .item{
        margin-bottom: 50px;
        .title{
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 30px;
            display: block;
            cursor: pointer;
        }
        .text{
            cursor: pointer;
            font-size: 18px;
            margin-bottom: 20px;
            &:hover{
                color: var(--el-color-primary);
            }
        }
    }
}
</style>
<style lang="scss">
.user-info-popper{
    width: unset!important;
    .user-info-message{
        padding: 28px;
        .user-info-item{
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
    }
}
.filter-wrap{
    .el-tree-node__content{
        height: 42px;
        &:hover{
            color: #00459F;
            background-color: transparent;
        }
    }
}
</style>