<template>
  <PageShell>
    <div class="page-one">
      <div class="status-grid">
        <div class="status-card">
          <div class="status-icon success">
            <el-icon><Select /></el-icon>
          </div>
          <div class="status-text">恭喜你！通过测评</div>
        </div>

        <div class="status-card">
          <div class="status-icon danger">
            <el-icon><CloseBold /></el-icon>
          </div>
          <div class="status-text">很遗憾！未通过测评</div>
        </div>

        <div class="status-card">
          <div class="status-hourglass" aria-hidden="true">
            <span class="hourglass-top"></span>
            <span class="hourglass-middle"></span>
            <span class="hourglass-bottom"></span>
          </div>
          <div class="status-text">提交成功，请耐心等待人工评分</div>
        </div>
      </div>
    </div>
  </PageShell>
</template>

<script setup name="TestPageOne" lang="ts">
import { CloseBold, Select } from '@element-plus/icons-vue';
import PageShell from '@/components/PageShell/index.vue';
</script>

<style scoped lang="scss">
.page-one {
  min-height: calc(100vh - 150px);
  background: #fff;
  border-radius: 6px;
  padding: 120px 60px 40px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 48px;
}

.status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 160px;
}

.status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
}

.status-icon.success {
  background: #67c23a;
}

.status-icon.danger {
  background: #f56c6c;
}

.status-hourglass {
  position: relative;
  width: 34px;
  height: 46px;
  color: #f2c15d;
}

.status-hourglass::before,
.status-hourglass::after {
  content: '';
  position: absolute;
  left: 3px;
  width: 28px;
  border-top: 3px solid #f2c15d;
}

.status-hourglass::before {
  top: 0;
}

.status-hourglass::after {
  bottom: 0;
}

.hourglass-top,
.hourglass-bottom {
  position: absolute;
  left: 7px;
  width: 20px;
  height: 14px;
  border-left: 3px solid #f2c15d;
  border-right: 3px solid #f2c15d;
}

.hourglass-top {
  top: 3px;
  clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%);
}

.hourglass-bottom {
  bottom: 3px;
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}

.hourglass-middle {
  position: absolute;
  top: 20px;
  left: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2c15d;
}

.status-text {
  color: #303133;
  font-size: 18px;
  text-align: center;
}

@media (max-width: 960px) {
  .page-one {
    padding-top: 60px;
  }

  .status-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
</style>
