<script setup lang="ts">
import Preview from '@/components/Preview.vue'
import DragPanel from '@/components/DragPanel.vue'
import { getCheckView } from '../api'

const ScoreDialog = defineAsyncComponent(() => import('../components/ScoreDialog.vue'))

interface Props {
  id: string
}
const props = defineProps<Props>()

// 左侧
let detail = $ref<any>()
provide('detail', $$(detail))

// 评分规则文件
const file = $computed(() => {
  return detail ? JSON.parse(detail?.competition_rubric.url) : { url: '' }
})
function fetchInfo() {
  getCheckView({ id: props.id }).then(res => {
    detail = res.data
  })
}
watchEffect(() => {
  fetchInfo()
})

// 评分
const dialogVisible = $ref(false)

let resizeKey = $ref(0)
function handleResize() {
  resizeKey = Date.now()
}
</script>

<template>
  <DragPanel @resize="handleResize">
    <template #left>
      <div class="lab-left">
        <el-tabs type="border-card">
          <el-tab-pane label="评分规则" lazy>
            <Preview :url="file.url" :key="resizeKey"></Preview>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <template #right v-if="detail">
      <AppCard>
        <el-row justify="space-between">
          <div class="info">
            <p>
              赛项名称：<span>{{ detail.competition_id_name }}</span>
            </p>
            <p>
              选手姓名：<span>{{ detail.student_name }}</span>
            </p>
            <p>
              选手ID：<span>{{ detail.login_id }}</span>
            </p>
          </div>
          <div>
            <el-button type="primary" @click="dialogVisible = true" v-permission="'v1-expert-check-set-score'"
              >评分</el-button
            >
          </div>
        </el-row>
      </AppCard>
      <div class="lab-box">
        <iframe :src="detail.competition_uri" frameborder="0" class="iframe" ref="iframeRef"></iframe>
      </div>
    </template>
  </DragPanel>
  <ScoreDialog v-model="dialogVisible"></ScoreDialog>
</template>

<style lang="scss" scoped>
.lab-left {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .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;
}
.iframe {
  width: 100%;
  height: 100%;
}
.info {
  flex: 1;
  display: flex;
  align-items: center;
  span {
    color: var(--main-color);
  }
  p + p {
    margin-left: 40px;
  }
}
</style>
