<script setup>
import {ref,reactive,onMounted,onActivated} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import {apiFICCPermissionList,apiGetWechatQRCode,apiGetTagTree,apiViewLogUpdate} from '@/api/common'
import {apiVideoList,apiVideoPlayLog} from '@/api/video'
import {apiApplyPermission} from '@/api/user'

import SelfList from '@/components/SelfList.vue'
import VideoComment from '@/components/VideoComment.vue'
import VideoBox from '@/components/VideoBox.vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

import CollectBox from '@/components/CollectBox.vue'
import collectIcon from '@/assets/collect.png'
import collectSIcon from '@/assets/collect-s.png'

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

//分享进入的videoid 
let videoId=ref(0)

// 获取品种权限数据
let permissionState=reactive({
    firstNavList:[],
    // 一进来默认选择全部
    sFirst:'',
    secNavList:[],
    sSecond:-1//选择的品种id 
})
const getFICCPermissionList=async ()=>{
    const res=await apiFICCPermissionList()
    if(res.code===200){
        permissionState.firstNavList=res.data
        handelChangeFirstNav(res.data[0])
    }
}
//getFICCPermissionList()

const getTagTreeList = async ()=>{
    const res = await apiGetTagTree()
    if(res.code===200){
        const result = res.data
        permissionState.firstNavList = result.map((item)=>{
            let obj = {}
            obj.ClassifyName = item.classify_name
            obj.Items = item.tags.map((i)=>{
                return {PermissionId:i.tag_id,PermissionName:i.tag_name}
            })
            return obj
        })
        permissionState.firstNavList.unshift({
            ClassifyName:"全部",
            Items:[]
        })
        if(route.query.videoId){
            videoId.value=route.query.videoId
            getVideoList()
        }else{
            handelChangeFirstNav(permissionState.firstNavList[0])
        }
        
    }
}
getTagTreeList()
//点击一级分类
const handelChangeFirstNav=(item)=>{
    permissionState.sFirst=item.ClassifyName
    permissionState.secNavList=item.Items
    handleChangeSecNav(item.Items[0])
}

//点击二级分类
const handleChangeSecNav=(item)=>{
    if(!item){
        // 没有二级分类 全部
        permissionState.sSecond=-1
    }else{
        permissionState.sSecond=item.PermissionId
    }
    refreshList()
}

//获取视频列表数据
let listState = reactive({
    loading:false,
    finished:false,
    page:1,
    list:[],
})

let noAuth=ref(null)//无权限数据

const getVideoList=async ()=>{
    listState.loading=true
    const res=await apiVideoList({
        page_index:Number(listState.page),
        page_size:20,
        video_id:videoId.value,
        variety_tag_id:Number(permissionState.sSecond)
    })
    listState.loading=false
    if(listState.page===1){
        document.body.scrollTop=document.documentElement.scrollTop=0
    }
    if(res.code===200){
        let arr=res.data||[]
        listState.list=[...listState.list,...arr]
        if(arr.length===0||arr.length<20){
            listState.finished=true
        }
        noAuth.value=null
    }else if(res.code===403){
        noAuth.value=res.data
        handleAutoApply()
    }
}
// getVideoList()

//无权限时申请
const handleAutoApply=()=>{
    if(noAuth.value.type=='contact'&&!noAuth.value.customer_info.has_apply){
        if(noAuth.value.customer_info.status=='冻结'||(noAuth.value.customer_info.status=='试用'&&noAuth.value.customer_info.is_suspend==1)){
            apiApplyPermission({
                company_name:noAuth.value.customer_info.company_name,
                real_name:noAuth.value.customer_info.name,
                source:9,
                from_page:'视频社区'
            }).then(res=>{
                if(res.code===200){
                    console.log('主动申请成功');
                }
            }) 
        }
    }
}
const handleApply=()=>{
    if(store.state.userInfo.is_bind===0){
        ElMessageBox({
            title:`温馨提示`,
            message:'为了优化您的用户体验，<br>请登录后查看更多信息！',
            dangerouslyUseHTMLString: true,
            center: true,
            confirmButtonText:'去登录',
            confirmButtonClass:'self-elmessage-confirm-btn',
            showCancelButton:true,
            cancelButtonText:'取消',
            cancelButtonClass:'self-elmessage-cancel-btn'
        }).then(res=>{
            wx.miniProgram.reLaunch({url:'/pages/login'})
        }).catch(()=>{})
        return
    }
    if(noAuth.value.customer_info.has_apply){
        const htmlStr=`<p>您已提交过申请，请耐心等待</p>`
        ElMessageBox({
            title:`视频社区`,
            message:htmlStr,
            center: true,
            dangerouslyUseHTMLString: true,
            confirmButtonText:'知道了',
            confirmButtonClass:'self-elmessage-confirm-btn'
        })
    }else{
        if (!noAuth.value.customer_info.status || noAuth.value.customer_info.status != '流失'|| noAuth.value.customer_info.status != '关闭') {
            console.log('跳转申请页');
            router.push({
                path:'/apply/permission',
                query:{
                    source:9,
                    fromPage:'视频社区'
                }
            })
        }else{
            apiApplyPermission({
                company_name:noAuth.value.customer_info.company_name,
                real_name:noAuth.value.customer_info.name,
                source:9,
                from_page:'视频社区'
            }).then(res=>{
                console.log('主动申请成功');
                const htmlStr=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
                ElMessageBox({
                    title:`视频社区`,
                    message:htmlStr,
                    center: true,
                    dangerouslyUseHTMLString: true,
                    confirmButtonText:'知道了',
                    confirmButtonClass:'self-elmessage-confirm-btn'
                })
            })
        }
    }
}

//刷新列表
const refreshList=()=>{
    listState.finished=false
    listState.page=1
    listState.list=[]
    videoId.value=0
    curVideoId.value=0
    getVideoList()
}

// 加载下一页
const onLoad=()=>{
    listState.page++
    getVideoList()
}

//当前正在播放哪个
let curVideoId=ref(0)
let videoRecordId=0//音频播放记录id
const handelClickPlay=(item)=>{
    curVideoId.value=item.community_video_id
    //记录播放
    apiVideoPlayLog({video_id:Number(item.community_video_id)}).then(res=>{
        if(res.code===200){
            console.log('视频埋点成功');
            videoRecordId=res.data
        }
    })
}
//视频播放暂停事件
const handleVideoPause=(e)=>{
    const target=e.target||e.path[0]
    const t=target.currentTime||0
    console.log('记录播放时长',t);
    if(!videoRecordId||t==0) return
    apiViewLogUpdate({
        id:videoRecordId,
        stop_seconds:parseInt(t),
        source:3
    }).then(res=>{
        console.log('记录播放时长成功');
    })
}


//获取视频单个对应的小程序二维码
const handelGetQRCodeImg=async (item)=>{
    if(item.QRCodeImg) return
    const res=await apiGetWechatQRCode({
        CodeScene:JSON.stringify({videoId:item.community_video_id}),
        CodePage:'pages/video/videoList'
    })
    if(res.code===200){
        item.QRCodeImg=res.data
    }
}

// 处理评论模块数据
const getCommentData=item=>{
    return{
        id:item.community_video_id,
        source:2,
        ...item
    }
}

// 处理弹幕模块数据
const getDanmuData=item=>{
    return{
        id:item.community_video_id,
        source:1,
        ...item
    }
}

onMounted(() => {
  //向小程序发送消息
  let postData = {
    path: "/pages/video/videoList",
    params:{},
    title: "FICC视频社区",
    shareImg:''
  };
  wx.miniProgram.postMessage({ data: postData });
});

onActivated(()=>{
    // curVideoId.value=0
    //向小程序发送消息
    let postData = {
        path: "/pages/video/videoList",
        params:{},
        title: "FICC视频社区",
        shareImg:''
    };
    wx.miniProgram.postMessage({ data: postData });
    if(noAuth.value){
        //无权限时每次进页面都刷新列表
        getVideoList()
    }
})

</script>

<template>
    <div class="voice-no-auth" v-if="noAuth">
        <img :src="$store.state.globalImgUrls.activityNoAuth" alt="">
        <p style="font-size:16px;margin-bottom: 0;">您暂无权限查看视频社区</p>
        <template v-if="noAuth.type=='contact'">
            <p style="font-size:16px;margin-top: 5px;margin-bottom: 62px;">若想查看，可以联系对口销售--{{noAuth.name}}：<span style="color:#F3A52F">{{noAuth.mobile}}</span></p>
        </template>
        <template v-else>
            <p style="font-size:16px;margin-top: 5px;margin-bottom: 62px;">若想参加可以申请开通</p>
            <div class="global-main-btn btn" @click="handleApply" style="margin-bottom: 20px;">立即申请</div>
        </template>
    </div>
    <div class="video-list-page" v-else>
        <div class="top-nav-box">
            <div class="first-nav-box">
                <span 
                    v-for="item in permissionState.firstNavList" 
                    :key="item.ClassifyName"
                    :class="item.ClassifyName==permissionState.sFirst?'active':''"
                    @click="handelChangeFirstNav(item)"
                >{{item.ClassifyName}}</span>
            </div>
            <div class="sec-nav-box" v-show="permissionState.secNavList.length>0">
                <span
                    :class="['sec-item',item.PermissionId==permissionState.sSecond?'active':'']"
                    v-for="item in permissionState.secNavList"
                    :key="item.PermissionId"
                    @click="handleChangeSecNav(item)"
                >{{item.PermissionName}}</span>
                <!-- <el-popover
                    :width="500"
                    trigger="click"
                >
                    <template #reference>
                        <img v-if="permissionState.secNavList.length>6" style="width:16px;transform: rotate(90deg);cursor: pointer" src="@/assets/icon-more.png" alt="">
                    </template>
                    <template #default>
                        <div class="flex top-nav-filter-box">
                            <div 
                                :class="['item',item.PermissionId == permissionState.sSecond&&'active']" 
                                v-for="item in permissionState.secNavList.slice(6)" 
                                :key="item.PermissionId"
                                @click="handleChangeSecNav(item)"
                            >{{item.PermissionName}}</div>
                        </div>
                    </template>
                </el-popover> -->
            </div>
        </div>
        <SelfList 
            :finished="listState.finished" 
            :isEmpty="listState.list.length===0&&listState.finished"
            :loading="listState.loading"
            :count="listState.list.length"
            :emptyMsg="videoId?'该视频不存在，请刷新页面后重试':'暂无数据'"
            @listOnload="onLoad"
        >
            <div class="flex list-wrap">
                <div class="video-item" v-for="item in listState.list" :key="item.community_video_id">
                    <CollectBox
                        :type="2"
                        :primaryId="item.community_video_id"
                        :collectId="item.collection_id"
                        @change="e=>item.collection_id=e"
                    >
                        <img class="collect-icon" :src="item.collection_id>0?collectSIcon:collectIcon" alt="">
                    </CollectBox>
                    <el-popover
                        :width="200"
                        trigger="hover"
                        @show="handelGetQRCodeImg(item)"
                    >
                        <template #reference>
                            <div class="icon-wechat"></div>
                        </template>
                        <template #default>
                            <img style="width:100%" :src="item.QRCodeImg" alt="">
                        </template>
                    </el-popover>
                    <el-tooltip
                        effect="dark"
                        :content="item.title"
                        placement="top-start"
                    >
                    <div class="multi-ellipsis title">{{item.title}}</div>
                    </el-tooltip>
                    <div class="time">发布时间：{{item.publish_time}}</div>
                    <div class="video-content">
                        <VideoBox
                            :videoInfo="getDanmuData(item)"
                            :curVideoId="curVideoId"
                            @clickPlay="handelClickPlay"
                            @ended="curVideoId=0"
                            @pause="handleVideoPause"
                        ></VideoBox>
                    </div>
                    <VideoComment :videoInfo="getCommentData(item)"></VideoComment>
                </div>
                <div class="last-add-item"></div>
                <div class="last-add-item"></div>
            </div>
        </SelfList>

        <!-- 跳转去提问 -->
        <div class="to-question-box-fixed" @click="$router.push({path:'/question/list',query:{isAutoQuestion:true}})">
            <img src="@/assets/toquestion-icon.png" alt="">
            <span>我要提问</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.icon-wechat{
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url('@/assets/icon-wechat.png');
    background-size: cover;
    position: absolute;
    top: 26px;
    right: 30px;
    &:hover{
        background-image: url('@/assets/icon-wechat2.png');
    }
}
.top-nav-filter-box{
    flex-wrap: wrap;
    .item{
        margin: 5px 10px;
        width: 113px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f6f6f6;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        :hover{
            color: #fff;
            background-color: #F3A52F;
        }
    }
    .active{
        color: #fff;
        background-color: #F3A52F;
    }
}
.video-list-page{
    .top-nav-box{
        padding: 30px 0 12px;
        background: #FFFFFF;
        // box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
        position: sticky;
        top: 60px;
        width: 100%;
        max-width: 1240px;
        z-index: 10;
        .first-nav-box{
            span{
                display: inline-block;
                width: 140px;
                line-height: 40px;
                text-align: center;
                border-radius: 20px;
                background-color: #F6F6F6;
                font-size: 16px;
                margin-right: 30px;
                // margin-bottom:10px;
                cursor: pointer;
                box-sizing: border-box;
            }
            .active{
                background-color: #FFFBF5;
                box-shadow: 0px 6px 7px 1px #FFF7EB;
                color: #F3A52F;
                border: 1px solid #F3A52F;
            }
            @media screen and (max-width: 1100px){
                span{
                    width: 90px;
                    height: 30px;
                    line-height: 30px;
                    margin-right: 15px;
                    font-size: 14px;
                }
            }
        }
        .sec-nav-box{
            margin-top: 30px;
            margin-left: -30px;
            .sec-item{
                color: #666;
                margin-left: 30px;
                margin-bottom: 8px;
                cursor: pointer;
                display: inline-block;
            }
            .active{
                color: #F3A52F;
            }
        }
    }

    .list-wrap{
        padding-top: 30px;
        // border-left: 1px solid #E2E2E2;
        // border-right: 1px solid #E2E2E2;
        justify-content: center;
        flex-wrap: wrap;
        .video-item{
            flex-direction: column;
            justify-content: space-between;
            width: 400px;
            padding: 25px;
            border: 1px solid #E2E2E2;
            position: relative;
            // &:nth-of-type(odd){
            //     border-right: 1px solid #E2E2E2;
            // }
            .title{
                font-size: 16px;
                color: #666;
                padding-right: 70px;
            }
            .video-content{
                width: 100%;
                // height: 200px;
                margin: 19px 0;
            }
            .time{
                color: #999;
                font-size: 14px;
                margin-top: 10px;
            }
            .collect-icon{
                position: absolute;
                top: 26px;
                right: 70px;
                width: 24px;
                height: 24px;
                cursor: pointer;
            }
        }
        .last-add-item{
            width: 400px;
            height: 0;
        }
    }
}
.voice-no-auth{
    text-align: center;
    img{
        width: 400px;
    }
    .btn{
        width: 218px;
        margin-left: auto;
        margin-right: auto;
    }
}
</style>