<script setup>
// import CommonHeader from "@/components/CommonHeader/index.vue";;
import img_lczs1 from "~/assets/zbktssys/1.png";
import img_lczs2 from "~/assets/zbktssys/2.png";
import img_lczs3 from "~/assets/zbktssys/3.png";
import img_lczs from "~/assets/zbktssys/bar.png";
import img_tx from "~/assets/zbktssys/tx.png";
import { useRoute } from "vue-router";
import { ztzb_detail } from "./api";
import { getFullUrl, getAvatarUrl } from "~/utils/helper";
import { ArrowRight, ArrowLeft } from "@element-plus/icons-vue";
import QrcodeVue from "qrcode.vue";
import {ElMessage} from "element-plus";
const route = useRoute();
let oneInfo = $ref({});
let shareLink = $ref();
function getInfo() {
  let data = {
    kz_id: route.params.id,
  };
  ztzb_detail(data).then((res) => {
    oneInfo = res.data.one_info;
    shareLink = 'https://pull.txhlwxx.com/ztzb.php?source='+ oneInfo.m3u8_url+ '&cover='+ oneInfo.kz_img;
    if (res.data.one_info.kz_video !== '') {
      videoPlay(2);
    } else {
      videoPlay(1);
    }
  });
}

var player = "";
var liveState = ref(null);
function videoPlay(type) {
  // debugger
  // console.log(data.live_src.student.high.rts);
  // console.log(videoURL.value.high);
  // 初始化播放器 开始
  console.log(oneInfo.kz_video);
  if(type === 1) {
    player = new Aliplayer(
        {
          id: "player-con",
          source: oneInfo.m3u8_url ? oneInfo.m3u8_url : "",
          width: "100%",
          height: "100%",
          autoplay: true,
          isLive: true,
          cover: oneInfo.kz_img,
          rePlay: false,
          playsinline: true,
          preload: true,
          controlBarVisibility: "hover",
          showBarTime: 5000,
          useH5Prism: true,
          skinLayout: [
            {
              "name": "bigPlayButton",
              "align": "blabs",
              "x": 30,
              "y": 80
            },
            {
              "name": "errorDisplay",
              "align": "tlabs",
              "x": 0,
              "y": 0
            },
            {
              "name": "infoDisplay"
            },
            {
              "name": "controlBar",
              "align": "blabs",
              "x": 0,
              "y": 0,
              "children": [
                {
                  "name": "liveDisplay",
                  "align": "tlabs",
                  "x": 15,
                  "y": 6
                },
                {
                  "name": "fullScreenButton",
                  "align": "tr",
                  "x": 10,
                  "y": 10
                },
                {
                  "name": "setting",
                  "align": "tr",
                  "x": 15,
                  "y": 12
                },
                {
                  "name": "volume",
                  "align": "tr",
                  "x": 5,
                  "y": 10
                }
              ]
            }
          ]
        },
        (player) => {
          player.on("error", (e) => {
            if (player != "") {
              player.dispose(); //销毁
            }
            // liveState.value = 5;
            // let cur_time = Date.parse(new Date()) / 1000;
            // if (cur_time + 300 > oneInfo.starttime && cur_time < oneInfo.endtime) {
            //   let liveSRC = oneInfo.live_src.student;
            //   videoURL.value = {
            //     high: liveSRC.high.rts,
            //     middle: liveSRC.medium.rts,
            //     low: liveSRC.low.rts,
            //     hls: liveSRC.high.hls,
            //   };
            //   console.log(videoURL.value.high);
            //   req.open("GET", videoURL.value.hls, false);
            //   req.send(null);
            //   if (req.status == 200) {
            //     liveState.value = 3;
            //     videoPlay(data, liveState.value);
            //     clearInterval(time_live);
            //   } else {
            //     time_live = setInterval(() => {
            //       req.open("GET", videoURL.value.hls, false);
            //       req.send(null);
            //       if (req.status == 200) {
            //         liveState.value = 3;
            //         videoPlay(data, liveState.value);
            //         clearInterval(time_live);
            //       }
            //     }, 30000);
            //   }
            // } else if (cur_time > data.endtime) {
            //   liveState.value = 4;
            //   // console.log(liveState.value);
            // }
          });
        }
    );
  } else {
    player = new Aliplayer(
        {
          id: "player-con",
          source: oneInfo.kz_video ? oneInfo.kz_video : "",
          width: "100%",
          height: "100%",
          autoplay: false,
          isLive: false,
          cover: oneInfo.kz_img,
          rePlay: false,
          playsinline: true,
          preload: true,
          controlBarVisibility: "hover",
          showBarTime: 5000,
          useH5Prism: true,
          skinLayout: [
            {
              "name": "bigPlayButton",
              "align": "blabs",
              "x": 30,
              "y": 80
            },
            {
              "name": "H5Loading",
              "align": "cc"
            },
            {
              "name": "errorDisplay",
              "align": "tlabs",
              "x": 0,
              "y": 0
            },
            {
              "name": "infoDisplay"
            },
            {
              "name": "tooltip",
              "align": "blabs",
              "x": 0,
              "y": 56
            },
            {
              "name": "thumbnail"
            },
            {
              "name": "controlBar",
              "align": "blabs",
              "x": 0,
              "y": 0,
              "children": [
                {
                  "name": "progress",
                  "align": "blabs",
                  "x": 0,
                  "y": 44
                },
                {
                  "name": "playButton",
                  "align": "tl",
                  "x": 15,
                  "y": 12
                },
                {
                  "name": "timeDisplay",
                  "align": "tl",
                  "x": 10,
                  "y": 7
                },
                {
                  "name": "fullScreenButton",
                  "align": "tr",
                  "x": 10,
                  "y": 12
                },
                {
                  "name": "setting",
                  "align": "tr",
                  "x": 15,
                  "y": 12
                },
                {
                  "name": "volume",
                  "align": "tr",
                  "x": 5,
                  "y": 10
                }
              ]
            }
          ]
        },
        (player) => {
          player.on("error", (e) => {
            if (player != "") {
              player.dispose(); //销毁
            }
            // liveState.value = 5;
            // let cur_time = Date.parse(new Date()) / 1000;
            // if (cur_time + 300 > oneInfo.starttime && cur_time < oneInfo.endtime) {
            //   let liveSRC = oneInfo.live_src.student;
            //   videoURL.value = {
            //     high: liveSRC.high.rts,
            //     middle: liveSRC.medium.rts,
            //     low: liveSRC.low.rts,
            //     hls: liveSRC.high.hls,
            //   };
            //   console.log(videoURL.value.high);
            //   req.open("GET", videoURL.value.hls, false);
            //   req.send(null);
            //   if (req.status == 200) {
            //     liveState.value = 3;
            //     videoPlay(data, liveState.value);
            //     clearInterval(time_live);
            //   } else {
            //     time_live = setInterval(() => {
            //       req.open("GET", videoURL.value.hls, false);
            //       req.send(null);
            //       if (req.status == 200) {
            //         liveState.value = 3;
            //         videoPlay(data, liveState.value);
            //         clearInterval(time_live);
            //       }
            //     }, 30000);
            //   }
            // } else if (cur_time > data.endtime) {
            //   liveState.value = 4;
            //   // console.log(liveState.value);
            // }
          });
        }
    );
  }

  /* h5截图按钮, 截图成功回调 */
  // player.on("snapshoted", function (data) {
  //   var pictureData = data.paramData.base64;
  //   var downloadElement = document.createElement("a");
  //   downloadElement.setAttribute("href", pictureData);
  //   var fileName = "Aliplayer" + Date.now() + ".png";
  //   downloadElement.setAttribute("download", fileName);
  //   downloadElement.click();
  //   pictureData = null;
  // });
}
// shareLink = window.location.href;
async function copyLink() {
  await navigator.clipboard.writeText(shareLink);
  ElMessage.success("已复制");
}
//分享
function shareToQq(url) {
  // 分享到腾讯QQ
  var shareqqstring =
      "https://connect.qq.com/widget/shareqq/index.html?url=" +
      encodeURIComponent(url);
  window.open(shareqqstring);
}
function shareToQqzone(url) {
  // 分享到QQ空间
  var shareqqzonestring =
      "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
      encodeURIComponent(url);
  window.open(shareqqzonestring);
}
function shareToSina(url) {
  // 分享到新浪微博
  var sharesinastring =
      "http://v.t.sina.com.cn/share/share.php?url=" +
      encodeURIComponent(url) +
      "&searchPic=true#_loginLayer_1639641926022";
  window.open(sharesinastring);
}
onMounted(() => {
  getInfo();
}),
  function hrefTo(href) {
    window.open(href, "_blank");
  };
</script>

  <template>
  <common-header />
  <div
    class="w-full flex items-center justify-center shadow h-60px bg-hex-fefefe"
  >
    <div class="w-1400px flex items-center">
      <div class="text-lg text-hex-050026">内容</div>
      <el-divider direction="vertical" />
      <div class="text-sm">
        <span class="text-hex-949494">直播课堂</span>
        <span class="text-hex-949494"> - 艺术现场</span>
        <span> - 内容</span>
      </div>
    </div>
  </div>

  <div
    class="w-full flex items-center justify-center shadow h-60px bg-hex-fefefe"
  >
    <div class="w-1400px flex items-center">
      <div class="text-lg text-hex-050026">{{ oneInfo.kz_name }}</div>
      <el-popover v-if="oneInfo.kz_video === ''" placement="bottom" :width="410" trigger="hover">
        <template #reference>
          <div class="share">
            <!-- <i-fluent:share-28-regular class="mr-1.5," style="color: #00a3ff; position: absolute; bottom: 12px;  left: -25px" />分享 -->
            <img style="display: inline-block !important; width: 16px;margin-right:5px;position: relative;top: -1px;" src="@/assets/kczy/shareIcon.png" alt="" />分享
          </div>
        </template>

        <div class=" w-full">
          <div class="w-full text-center">呼唤小伙伴们前来围观吧</div>
          <div class="flex justify-around m-10" style="position:relative">
            <div class="weibo" @click="shareToSina(shareLink)">
              <img src="@/assets/img/wb.png" />
            </div>
            <div class="qq" @click="shareToQq(shareLink)">
              <img src="@/assets/img/QQ.png" />
            </div>
            <div class="qqkj" @click="shareToQqzone(shareLink)">
              <img src="@/assets/img/QQ1.png" />
            </div>
            <qrcode-vue :value="shareLink" :size="size" level="H" />
            <div style="position:absolute;bottom:-20px;right:17px">微信扫码分享</div>
          </div>
          <el-divider></el-divider>
          <div class="text-hex-00a3ff mb-2">地址</div>
          <div class="flex">
            <div class="bg-hex-F7F7F7 p-2 flex-auto mr-4 truncate">
              {{ shareLink }}
            </div>
            <div class="
                  text-sm
                  bg-hex-0A8AFF
                  text-white
                  flex_left
                  min-w-100px
                  h-40px
                  rounded
                  cursor-pointer
                  copy
                " @click="copyLink">
              复制链接
            </div>
          </div>
        </div>
      </el-popover>
    </div>
  </div>

  <div class="w-full flex items-center justify-center mt-4">
    <div class="w-1400px flex flex-col">
      <div class="w-full mb-4 bg-light-500">
        <div class="w-full h-800px mb-4 bg-hex-CEE5FB video">
          <div class="prism-player" id="player-con"></div>
          <div class="live-not-start" v-if="oneInfo.kz_video === '' && oneInfo.status === '3'">
            <img :src="oneInfo.kz_img" alt="" style="width: 100%;" />
          </div>
          <!-- <div class="prism-player" ></div> -->
          <!-- <div class="watch">当前观看人数：{{ oneInfo.kz_lll }}人</div> -->
        </div>
      </div>

      <!-- <div class="w-full flex justify-between items-center">

        <el-button type="primary" :icon="ArrowLeft" circle size="large" />

        <div class="flex-auto flex justify-start items-center">
          <div class="w-19/100 mx-4 flex flex-col cursor-pointer" v-for="i in data_zy">
            <div class="w-full flex-none overflow-hidden  rounded-xl">
              <img :src="i.img" alt="" class="w-full h-full">
            </div>
            <div class="p-2">
              {{  i.title  }}
            </div>
          </div>
        </div>

        <el-button type="primary" :icon="ArrowRight" circle size="large" />
      </div> -->
    </div>
  </div>
  <common-footer />
</template>
<style lang="scss" scoped>
.share {
  width: 100px;
  display: inline;
  cursor: pointer;
  color: #00a3ff;
  font-weight: 400;
  margin: 0 0 0 15px;
  font-size: 16px;
}
.video {
  position: relative;
  .live-not-start {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    // color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff !important;
    z-index: 5;
  }
  .live-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
  }
  .live-back-title {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -210px;
    margin-top: -20px;
    width: 420px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    color: #fff;
    background: #fa2443;
    border-radius: 20px;
  }
}
.copy {
  text-align: center;
  line-height: 40px;
}
</style>

