<script setup lang="ts">
import type { ReportItem } from '../types'
import { ArrowDown } from '@element-plus/icons-vue'
import Preview from '@/components/Preview.vue'
import DragPanel from '@/components/DragPanel.vue'
import { getCheckView, getReportList } 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: '' }
})

const platformUrl = ref('')

const platformList = computed(() => {
  if (!detail) return []
  return detail.competition_platform_configs.filter((item: any) => item.is_show === '1')
})

watchEffect(() => {
  const [first = {}] = platformList.value
  platformUrl.value = first.url
})

async function fetchInfo() {
  const res = await getCheckView({ id: props.id })
  detail = res.data
}

const reportList = ref<ReportItem[]>([])
async function fetchReport() {
  const res = await getReportList({ competition_id: detail.competition_id, student_id: detail.student_id })
  reportList.value = res.data.items
}

onMounted(async () => {
  await fetchInfo()
  await fetchReport()
})

// 评分
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-select v-model="platformUrl">
              <el-option v-for="item in platformList" :key="item.id" :label="item.name" :value="item.url"></el-option>
            </el-select>
            <el-dropdown style="margin: 0 10px">
              <el-button plain>
                查看报告<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu v-if="reportList.length">
                  <el-dropdown-item v-for="item in reportList" :key="item.id">
                    <a :href="item.url" target="_blank">{{ item.platform.name }}</a>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <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="platformUrl" frameborder="0" class="iframe" ref="iframeRef"></iframe>
      </div>
    </template>
  </DragPanel>
  <ScoreDialog v-model="dialogVisible" :reportList="reportList"></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;
  flex-wrap: wrap;
  span {
    color: var(--main-color);
  }
  p {
    margin-right: 40px;
  }
}
</style>
