<script setup>
import emptyImg from '/images/personal/empty.png';

import request from '~/utils/request';
// import { getFullUrl } from '~/utils/helper';
//
import { ElMessage } from 'element-plus';
import { user } from '~/store/user';
const props = defineProps({
  id: String,
  status: String
})

let loading = $ref(true)
let detailInfo = $ref({})
let lzspArr = $ref([])
let videoLink = $ref()

request({
  url: '/kzkt/ssyskc/detail',
  data: {
    ks_id: props.id,
  }
}).then(res => {
  if (res.code === '1') {
    detailInfo = res.data.one_info
    if (detailInfo.ks_lzsp) {
      lzspArr = detailInfo.ks_lzsp.split(',')
      videoLink = lzspArr[0]
    }
    loading = false
  } else {
    ElMessage.error(res.msg)
  }
}).catch(err => {
  ElMessage.error(err)
})

function handleChangeVideo(item) {
  videoLink = item
}

const router = useRouter();

function goBack(status) {
  console.log(status, 111111);
  router.push(`/zbkt/ssys/${status}`)
}
</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 relative">
      <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 class="right" @click="goBack(props.status)">返回</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">{{ detailInfo.ks_name }}</div>
    </div>
  </div>

  <div class="w-full flex flex-col items-center" v-loading="loading">
    <div class="flex justify-end w-1400px p-4">
      <el-button v-for="(item, idx) in lzspArr" :type="videoLink === item ? 'primary' : 'default'" @click="handleChangeVideo(item)">视频{{ idx + 1 }}</el-button>
    </div>
    <div class="w-1400px flex flex-col">
      <div class="w-full mb-4 bg-light-500 flex_center">
        <video v-if="videoLink" :src="videoLink" class="w-full" controls></video>
        <img v-else class="w-full" :src="emptyImg" alt="">
      </div>
    </div>
  </div>
  <common-footer />
</template>
<style scoped>
.right {
  position: absolute;
  right: 0;
  width: 100px;
  height: 40px;
  border: 1px solid #00a3ff;
  border-radius: 6px;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #00a3ff;
  line-height: 40px;
  margin-top: 10px;
}
</style>
