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

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

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

// 左侧
const leftPanelVisible = $ref<boolean>(true)

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

<template>
  <section class="lab" v-if="detail">
    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }">
      <div class="lab-left__inner">
        <el-tabs type="border-card">
          <el-tab-pane label="评分规则" lazy>
            <Preview :url="file.url"></Preview>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="panel-icon" @click="leftPanelVisible = !leftPanelVisible">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 86" aria-hidden="true" width="16" height="86">
          <g fill="none" fill-rule="evenodd">
            <path
              class="path-wapper"
              d="M0 0l14.12 8.825A4 4 0 0116 12.217v61.566a4 4 0 01-1.88 3.392L0 86V0z"
              fill="#e1e4eb"></path>
            <path
              class="path-arrow"
              d="M10.758 48.766a.778.778 0 000-1.127L6.996 43l3.762-4.639a.778.778 0 000-1.127.85.85 0 00-1.172 0l-4.344 5.202a.78.78 0 000 1.128l4.344 5.202a.85.85 0 001.172 0z"
              fill="#8D9EA7"
              fill-rule="nonzero"></path>
          </g>
        </svg>
      </div>
    </div>
    <div class="lab-right">
      <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>
    </div>
  </section>
  <ScoreDialog v-model="dialogVisible"></ScoreDialog>
</template>

<style lang="scss" scoped>
.lab {
  display: flex;
  height: calc(100vh - 110px);
}
.lab-left {
  position: relative;
  width: 400px;
  padding: 20px;
  background-color: #e1e4eb;
  border-radius: 6px;
  box-sizing: border-box;
  transition: all 0.1s;
  &.is-hidden {
    width: 0;
    padding: 0;
    .panel-icon {
      left: -20px;
      right: 0;
    }
    .path-arrow {
      transform-origin: center center;
      transform: rotate(180deg);
    }
  }
  .lab-left__inner {
    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;
  }
}
.panel-icon {
  position: absolute;
  top: 50%;
  right: -16px;
  width: 16px;
  height: 86px;
  transform: translateY(-50%);
  z-index: 100;
  cursor: pointer;
}
.lab-right {
  margin-left: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.lab-box {
  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>
