<template>
    <div class="video">
        <div class="title">{{title}}</div>
        <div class="title fenxiang" @click="show"> <img src="@/static/images/fenxiang.png" alt=""> {{lan.$t('lijifenxiang')}}</div>
        <video style="width:100%; height:100%;" :id="'a' + url" ></video>
        <div class="modal-container">
                <!-- @cancel="hideNoticeModal" -->

            <a-modal
                centered
                :footer="null"
                dialogClass="modal-dialog"
                v-model:visible="fxtc"
                :title="lan.$t('qingxuanzefenxiangtujing')"
                :getContainer="modalNode"
                width="4rem"
            >
                <template v-slot:closeIcon>
                    <img src="@/static/images/delete.png" class="close" />
                </template>
                <div class="notice-container report">
                     <div @click="fx(1)">
                        <img src="@/static/images/weibo.png" alt="" srcset="">
                        {{lan.$t('xinlangweibo')}}
                    </div>
                    <div @click="fx(2)">
                        <img src="@/static/images/facebook.png" alt="" srcset="">
                        Facebook
                    </div>
                   
                </div>
               
            </a-modal>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.video{
    width: 976px;
    height: 563px;
    border-radius: 17px;
    background: white;
    position: relative;
    // background-color: #0f0;
    overflow: hidden;
    >video{
        width: 100%;
        height: 100%;
    }
    .title{
        position: absolute;
        top: 23px;
        left: 51px;
        font-size: 13px;
        color: #fff;
        z-index: 999;
    }
    .fenxiang{
        left: unset;
        right: 51px;
        display: flex;
        align-items: center;
        >img{
            width: 11px;
            height: 11px;
            margin-right: 11px;
        }
    }
}
.modal-container {
    ::v-deep(.ant-modal-header){
        padding: 0;
    }
    ::v-deep(.ant-modal-title){
        font-size: 12px;
        margin-top: -0.09rem;
        padding-bottom: 20px;
    }
    ::v-deep(.ant-modal-close){
        top: 8px;
    }
    ::v-deep(.ant-modal-body){
        padding: 0;
    }
        ::v-deep(.modal-dialog) {
            border-radius: 36px;
            overflow: hidden;
            .close {
                width: 14px;
                height: 14px;
            }
            .ant-modal-content {
                box-sizing: border-box;
                padding: 35px 30px;
                // width: 569px;
                background: #ffffff;
                box-shadow: 0px 4px 6px 0px rgba(102, 102, 102, 0.07);
                border-radius: 26px;
                overflow: hidden;
                .notice-container {
                  display: flex;
                  align-items: center;
                  padding-top: 30px;
                  >div{
                      width: auto;
                      display: flex;
                      align-items: center;
                      font-size: 12px;
                      >img{
                          width: 35px;
                          margin-right: 5px;
                      }
                  }
                  >div:first-child{
                      margin-right: 80px;

                  }
                }
                .report {
                    .sub-title {
                        margin-bottom: 50px;
                    }
                }
            }
        }
    }
</style>
<script lang="ts">
import { addshareClick, share } from '@/api';
import router from '@/router';
import { useI18n } from '@/utils/i18n';
import { defineComponent, onMounted, onUpdated, ref, watch } from 'vue';
import { onBeforeRouteLeave, useRouter } from 'vue-router';

export default defineComponent({
    props:{
        url: {
            type: String
        },
        title: {
            type: String
        },
        vid:{
            type: Number
        }
    },
    setup(props, ctx){
        console.log(1)
        let play: any;
        const lan = useI18n()
        const fxtc = ref(false)
        // onMounted(()=>{
        //     console.log(props.url)
        //     play = window.TCPlayer('a' + props.url, { 
        //         fileID: props.url,
        //         appID: '1303872925' 
        //     });
        // })
        onMounted(()=>{
            console.log(props.url)
            if(props.url){
                console.log(props.url)
                play = window.TCPlayer('a' + props.url, { 
                    fileID: props.url,
                    appID: '1303872925' 
                });
            }else{
                watch(()=> props.url,()=>{
                    console.log(props.url)
                    setTimeout(()=>{
                        play = window.TCPlayer('a' + props.url, { 
                            fileID: props.url,
                            appID: '1303872925' 
                        });
                    }, 500)
                    
                })
            }
            
        })
        
        onBeforeRouteLeave((to, from, next) => {
            console.log(121)
            if(play){
                 play.dispose()
            }
           
                next()
        })
        function fx(index: number){
            console.log(index)
            share().then((res: any)=>{
                console.log(res)
                let url = "";
                if(index == 1){
                    url = `https://service.weibo.com/share/share.php?url=${res.shareUrl}&appkey=2754574056&language=zh_cn&pic=${res.shareImg}&searchPic=true&title=${res.shareTitle}`
                }else {
                    url = `https://www.facebook.com/sharer.php?t=${encodeURIComponent(res.shareTitle)}&u=${res.shareUrl}`
                }
                
                window.open(url, "_blank")
                if(props.vid){
                    addshareClick(props.vid)
                }
            })
        }
        function show(){
            fxtc.value = true
        }
        return{
            lan,
            modalNode: () =>
                document.getElementsByClassName("modal-container")[0],
            fx,
            fxtc,
            show
        }
      
    }
})
</script>