<script setup>
import { Search } from '@element-plus/icons-vue'
import DrawLotsPrint from '@/components/DrawLotsPrint.vue'
import { getDrawLot, searchStudent, postDrawLot } from '../api'

const route = useRoute()
const info = ref()
async function fetchInfo() {
  const res = await getDrawLot({ id: route.query.id })
  info.value = res.data.detail
}
onMounted(() => fetchInfo())

const form = reactive({ id_number: '', competition_id: route.query.competition_id })

const student = ref()
async function search() {
  if (!form.id_number) return
  const res = await searchStudent(form)
  student.value = res.data.detail
}

const dialogVisible = ref(false)
const drawLotInfo = ref()
// 开始抽签
async function handleStart() {
  const res = await postDrawLot({ student_id: student.value.id, draw_rule_id: route.query.id })
  drawLotInfo.value = res.data
  dialogVisible.value = true
}

const drawLotsPrintRef = ref(null)
// 打印
function handlePrint() {
  drawLotsPrintRef.value?.print()
}
</script>

<template>
  <div class="drawLots">
    <div class="inner" v-if="info">
      <h1>{{ info.competition.name }}</h1>
      <div class="search">
        <el-input placeholder="请输入您的身份证号" :suffix-icon="Search" v-model="form.id_number" @keydown.enter="search" />
        <el-button type="primary" @click="search">检索数据</el-button>
      </div>
      <div class="box" v-if="student?.id">
        <div class="box-title">确认个人信息</div>
        <div class="box-main">
          <div class="pic"><img :src="student.picture" v-if="student.picture" /></div>
          <div class="box-info">
            <div class="name" :title="student.student_name">{{ student.student_name }}</div>
            <div class="col">
              <dl>
                <dt>学校：</dt>
                <dd>{{ student.org?.name }}</dd>
              </dl>
              <dl>
                <dt>班级：</dt>
                <dd>{{ student.class?.name }}</dd>
              </dl>
              <dl>
                <dt>专业：</dt>
                <dd>{{ student.specialty?.name }}</dd>
              </dl>
            </div>
            <div class="col">
              <dl>
                <dt>身份证号：</dt>
                <dd>{{ student.id_number }}</dd>
              </dl>
              <dl>
                <dt>电话：</dt>
                <dd>{{ student.mobile }}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
      <div class="footer" v-if="student?.id">
        <div class="button" @click="handleStart">开始抽签</div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" class="drawLots-dialog" width="800px">
      <div class="bar"></div>
      <h2>抽签结果</h2>
      <el-form label-suffix="：" label-position="right" label-width="auto">
        <el-form-item label="您的桌台号为">
          <p>{{ drawLotInfo.table_number }}</p>
        </el-form-item>
        <el-form-item label="考试账号为">
          <p>{{ drawLotInfo.account }}</p>
        </el-form-item>
      </el-form>
      <el-row justify="center">
        <el-button type="primary" size="large" @click="handlePrint">打印</el-button>
      </el-row>
    </el-dialog>
    <DrawLotsPrint :data="drawLotInfo" ref="drawLotsPrintRef"></DrawLotsPrint>
  </div>
</template>

<style lang="scss" scoped>
.drawLots {
  min-height: 100vh;
  background: url(@/assets/images/drawLots/bg.png) no-repeat center top;
  .inner {
    max-width: 1100px;
    margin: 0 auto;
  }
  h1 {
    padding: 80px 140px 34px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 48px;
    color: #fff;
    line-height: 56px;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.36);
    text-align: center;
  }
  .search {
    display: flex;
    align-items: center;
    margin: 0 80px 42px;
    .el-input {
      flex: 1;
      height: 60px;
      font-size: 20px;
    }
    .el-button {
      margin-left: 20px;
      width: 120px;
      height: 60px;
      font-size: 20px;
    }
  }
  .box {
    position: relative;
    z-index: 100;
    width: 800px;
    height: 260px;
    background: #ab0a3d;
    border-radius: 8px;
    border: 3px solid #bf194d;
    margin: 0 auto;
    .box-title {
      margin: 12px 0;
      font-size: 22px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
    }
    .box-main {
      width: 760px;
      height: 260px;
      background: #fff url(@/assets/images/drawLots/bg3.png) no-repeat right 10px center;
      border-radius: 8px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      box-shadow: 0px 10px 6px 1px rgba(0, 0, 0, 0.16);
      .pic {
        width: 120px;
        height: 140px;
        background: #e8eff3 url(@/assets/images/drawLots/avatar.png) no-repeat center center;
        border-radius: 8px;
        opacity: 1;
        border: 2px solid #dfe6ea;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .box-info {
        position: relative;
        width: 491px;
        height: 167px;
        background: url(@/assets/images/drawLots/bg2.png) no-repeat;
        display: flex;
        justify-content: space-between;
        .name {
          position: absolute;
          left: 10px;
          top: 5px;
          font-size: 16px;
          color: #525252;
          max-width: 80px;
          white-space: nowrap;
          // text-overflow: ellipsis;
          overflow: hidden;
        }
        .col {
          margin-top: 54px;
          margin-right: 20px;
        }
        dl {
          display: flex;
          font-size: 16px;
          line-height: 1;
          dt {
            width: 80px;
            text-align: right;
            color: #a2a2a2;
          }
          dd {
            color: #525252;
          }
          & + dl {
            margin-top: 20px;
          }
        }
      }
    }
  }
  .footer {
    margin-top: 22px;
    position: relative;
    z-index: 1;
    height: 170px;
    background: url(@/assets/images/drawLots/bg1.png) no-repeat;
    overflow: hidden;
    .button {
      width: 192px;
      height: 60px;
      margin: 68px auto 0;
      background: url(@/assets/images/drawLots/button_bg.png) no-repeat;
      background-size: contain;
      line-height: 60px;
      text-align: center;
      font-size: 18px;
      color: #fff;
      cursor: pointer;
    }
  }
}
::v-deep(.drawLots-dialog) {
  .bar {
    position: absolute;
    top: 0;
    left: -20px;
    width: 840px;
    height: 30px;
    background: #ab0a3d;
    border-radius: 8px;
  }
  .el-dialog__header {
    display: none;
  }
  h2 {
    margin: 40px 0;
    font-size: 30px;
    font-weight: bold;
    font-family: Source Han Sans CN, Source Han Sans CN;
    color: #525252;
    text-align: center;
  }
  .el-form {
    margin-left: 250px;
    p {
      font-size: 24px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      color: #ab0a3d;
    }
  }
  .el-button {
    width: 180px;
    height: 60px;
    font-size: 20px;
    margin: 40px 0 20px;
  }
}
</style>
