<template>
  <div class="video">
    <video v-if="isvideo" :id=" 'a' + time" style="width:100%;height:calc(100% - 0.58rem)"></video>
    <img v-else :src="info.img" style="width:100%;height:calc(100% - 0.58rem)" alt="">
    <div class="title fenxiang" @click="show"> <img src="@/static/images/fenxiang.png" alt=""> {{lan.$t('lijifenxiang')}}</div>
    <div class="liveinfo">

          <div class="left">
              <div>
                  <img src="@/static/images/livelesson.png" alt="" class="icon">
                  <span>{{lan.$t('xiabanyayu')}}</span>
              </div>
              <div>
                  <img src="@/static/images/livewatch.png" alt="" class="icon">
                  <span>{{info.tlanguage}}</span>
              </div>
              <div>
                  <img src="@/static/images/livetimetake.png" alt="" class="icon">
                  <span>{{info.livetime}}min</span>
              </div>
                    <div>
                  <img src="@/static/images/shoucang.png" alt="" class="icon">
                  <span class="score">{{info.score}}{{lan.$t('fen')}}</span>
              </div>
          </div>
          <div style="display: flex">
            <div class="right" @click="bianji" v-if="info.livestatus == 0">
              {{lan.$t('bianjixinxi')}}
            </div>
            <div class="right" @click="kaishi" v-if="info.livestatus == 0 && info.startlivebtn == 1">
              {{lan.$t('kaishizhibo')}}
            </div>
          </div>
          
      </div>
         <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: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  > video {
    width: 100%;
    height: 505px;
  }
     .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;
        }
    }
  .liveinfo{
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        height: 58px;
        align-items: center;
        background-color: #fff;
        position: relative;
        .left{
            display: flex;
            color: #121212;
            font-size: 13px;
            margin-left: 29px;
            .score{
              color: #D22C2E;
              font-size: 13px;
            }
            >div{
                margin-right: 57px;
            }
            .icon{
                width: 25px;
                height:24px;
                margin-right: 6px;

            }
        }
        .right{
            width: 74px;
            height: 29px;
            border:1px solid #08AE98;
            border-radius: 3px;
            margin-right: 29px;
            color: #08AE98;
            cursor: pointer;
            font-size: 13px;
            line-height: 29px;
            font-weight: bold;
            text-align: center;
        }
      }
      .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 { livestart, share } from '@/api';
import router from '@/router';
import store from '@/store';
import { useI18n } from '@/utils/i18n';
import dayjs from 'dayjs';
import { computed, defineComponent, onUpdated, ref, watch } from "vue";
import { onBeforeRouteLeave } from 'vue-router';

export default defineComponent({
  props:{
    info: Object
  },
  setup(props) {
    const lan: any = useI18n();
    console.log(props.info);
    function bianji(){
      if(props.info != undefined){
        router.push("/mine/webcast?id=" + props.info.liveid)
      }
    }
    // todo 修改后报错
    function kaishi(){
      if(props.info != undefined){
        const id = props.info.liveid;
        livestart(id).then(()=>{
            router.push("/live/liveing?id=" + id)
        })
      }
    }
    const time = ref(new Date().getTime())
    let play: any;
    const isvideo = ref(true);
    const fxtc = ref(false)
    watch(()=> props.info,()=>{
      if(props.info){
        console.log(props.info)

          if(props.info.fileid != '' || props.info.vodid != ''){
            play = window.TCPlayer('a' + time.value, { 
                fileID: (props.info.livestatus == 0 ? props.info.fileid : props.info.vodid),
                appID: '1303872925' 
            });
          }else{
            isvideo.value = false;
          }
          
        }
    })
    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")
            })
        }
        function show(){
            fxtc.value = true
        }
    // const liveinfo = ref(props.liveinfo)
    const zid = computed(()=>store.state.userinfo.zoneValue)
    const timestart = computed(()=>{
      /* eslint-disable */
       const utc = require('dayjs/plugin/utc') // dependent on utc plugin
      /* eslint-disable */
      const timezone = require('dayjs/plugin/timezone')
      dayjs.extend(utc)
      dayjs.extend(timezone)
      const days: any = dayjs;
      if(zid.value != ""){
        const now = days().tz(zid.value).unix();
        let dateline: string;
        if(props.info){
          dateline = props.info.dateline
          const start = days(dateline).unix()
          if(start - now < 15 * 60){
            return true;
          }else {
            return false;
          }

        }
      }
      return false;
    })
    return {
      bianji,
      kaishi,
      lan,
      time,
      isvideo,
      fx,
      fxtc,
      show,
      modalNode: () => document.getElementsByClassName("modal-container")[0],
      timestart
    }
  }
});
</script>