<script setup>
import request from '~/utils/request';
// import { getFullUrl } from '~/utils/helper';
// import CommonHeader from "@/components/CommonHeader/index.vue";;
import { ElMessage } from 'element-plus';
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { user } from '~/store/user';
// import socket from 'socket.io';
const props = defineProps({
  id: String,
  status: String
})

let loading = $ref(true)
let detailInfo = $ref({})
request({
  url: '/kzkt/ssyskc/detail',
  data: {
    ks_id: props.id
  }
}).then(res => {
  console.log('res :>> ', res);
  if (res.code === '1') {
    detailInfo = res.data.one_info
    loading = false
  } else {
    ElMessage.error(res.msg)
  }
}).catch(err => {
  ElMessage.error(err)
})

let data_zy = $ref([])
let page = $ref(1)
let tPage = 0
function queryZy() {
  request({
    url: '/yzy/zy_ssys_dtjl/index',
    data: {
      ks_id: props.id,
      page,
      limit: 4
    }
  }).then(res => {
    if (res.code === '1') {
      data_zy = res.data.page_data
      tPage = res.data.total_page
    }
  })
}
queryZy()

function prevPage() {
  if (page > 1) {
    page--;
    queryZy()
  }
}
function nextPage() {
  if (page < tPage) {
    page++;
    queryZy()
  }
}


const ws = new WebSocket("wss://socket.bozedu.net/")

ws.addEventListener('message', (e) => {
  if (e.data) {
    try {
      const data = JSON.parse(e.data)
      if (data.type !== 'ping') {
        console.log('message :>> ', e);
      }

      if (data.type === 'say' && data.content === 'refresh_work') {
        console.log('refresh_work :>> ');
        queryZy()
      }
    } catch (error) {
      console.error(error);
    }
  }

})

ws.addEventListener('error', (err) => {
  console.error('ws error :>> ', err);
})

ws.addEventListener('open', (e) => {
  ws.send(JSON.stringify({
    "type": "login",
    "client_id": user.user_id,
    "client_name": user.user_id,
    "room_id": props.id
  }))

})





onBeforeUnmount(() => {
  ws.close()
})


let dialogVisible = $ref(false)
let dialogData = $ref({})

function handlePreview(d) {
  dialogData = d
  dialogVisible = true
}
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 items-center justify-center mt-4">
    <div class="w-1400px flex flex-col">

      <div class="w-full h-730px mb-4 bg-light-500" v-loading="loading">
        <template v-if="!loading">
          <file-preview :url="detailInfo.ks_kj"></file-preview>
        </template>
      </div>

      <div class="w-full flex justify-between items-center">
        <el-button type="primary" :icon="ArrowLeft" circle size="large" @click="prevPage" />

        <div class="flex-auto grid grid-cols-4 gap-2 min-h-295px">
          <template v-if="data_zy.length">
            <div class=" h-full mx-4 flex flex-col cursor-pointer" v-for="i in data_zy">
              <div class=" flex-none overflow-hidden  rounded-xl">
                <file-preview :url="i.yzsd_file" alt="" class="w-full h-full"  />
                <!-- @click="handlePreview(i)" -->
              </div>
              <div class="p-2">
                {{ i.yzsd_keyword }}
              </div>
            </div>
          </template>
          <el-empty class="w-full" v-else></el-empty>
        </div>

        <el-button type="primary" :icon="ArrowRight" circle size="large" @click="nextPage" />
      </div>

      <el-dialog v-model="dialogVisible" fullscreen>
        <file-preview :url="dialogData.yzsd_file" alt="" class="w-full h-full" />
      </el-dialog>

    </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>
