<script setup lang="ts">
import DragPanel from '@/components/DragPanel.vue'
import { getStudentTicket } from '../api'
const StudentInfo = defineAsyncComponent(() => import('../components/StudentInfo.vue'))
const Question = defineAsyncComponent(() => import('../components/Question.vue'))
import { useAppConfig } from '@/composables/useAppConfig'
const appConfig = useAppConfig()

const route = useRoute()

onMounted(() => {
  getIframeUrl()
})

let iframeUrl = $ref('')
const getIframeUrl = function () {
  getStudentTicket({ student_id: route.query.sid as string }).then(res => {
    if (res.data?.ticket) {
      const type = route.query.type
      const dmlURL = appConfig.dmlURL || import.meta.env.VITE_DML_URL

      if (type === '6') {
        // 用户标签
        iframeUrl = `${dmlURL}/label?experiment_id=${route.query.id}&force_tgc=${res.data.ticket}`
      } else if (type === '7') {
        // 用户群组
        iframeUrl = `${dmlURL}/group?experiment_id=${route.query.id}&force_tgc=${res.data.ticket}`
      } else if (type === '8') {
        // 用户旅程
        iframeUrl = `${dmlURL}/trip/review?experiment_id=${route.query.id}&force_tgc=${res.data.ticket}`
      } else if (type === '9') {
        // 营销资料
        iframeUrl = `${dmlURL}/material?experiment_id=${route.query.id}&force_tgc=${res.data.ticket}`
      } else if (type === '10') {
        // 用户事件
        iframeUrl = `${dmlURL}/user?experiment_id=${route.query.id}&force_tgc=${res.data.ticket}`
      }
    }
  })
}
</script>

<template>
  <DragPanel>
    <template #left>
      <div class="lab-left">
        <el-tabs type="border-card">
          <el-tab-pane label="基本信息" lazy>
            <StudentInfo></StudentInfo>
          </el-tab-pane>
          <el-tab-pane label="打分详情" lazy>
            <Question></Question>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <template #right>
      <div class="lab-box">
        <iframe allowfullscreen allow="camera; microphone" :src="iframeUrl" frameborder="0" class="iframe" ref="iframeRef"></iframe>
      </div>
    </template>
  </DragPanel>
</template>
<!-- 上传报告 -->

<style lang="scss" scoped>
.close-btn {
  cursor: pointer;
  position: absolute;
  top: -40px;
  right: 45px;
  transform: rotate(270deg);
  transform-origin: center;
}
.lab-left {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  h1 {
    margin-bottom: 20px;
  }
  .el-tabs {
    flex: 1;
    border: 0;
    overflow: hidden;
  }
  :deep(.el-tabs__header) {
    background-color: #e1e4eb;
  }
  :deep(.el-tabs__item) {
    padding: 0 14px !important;
    border: 0;
    border-radius: 6px 6px 0px 0px;
  }
  :deep(.el-tabs__content) {
    height: calc(100% - 40px);
    box-sizing: border-box;
  }
  :deep(.el-tab-pane) {
    height: 100%;
    overflow-y: auto;
  }
}
.lab-box {
  position: relative;
  flex: 1;
  width: 100%;
  margin-top: 20px;
  background: #f8f9fa;
}
.iframe {
  width: 100%;
  height: 100%;
}
</style>
