<script setup lang="ts">
import printJS from 'print-js'
import { toPng } from 'html-to-image'

interface Props {
  data: { competition_name: string; account: string; table_number: string; password: string }
}

withDefaults(defineProps<Props>(), { data: () => ({ competition_name: '', account: '', table_number: '', password: '' }) })

const printRef = ref()
function print() {
  toPng(printRef.value)
    .then(dataUrl => {
      printJS({ printable: dataUrl, type: 'image' })
    })
    .catch(function (error) {
      console.error('oops, something went wrong!', error)
    })
}

defineExpose({ print })
</script>

<template>
  <div style="width: 0px; height: 0px; overflow: hidden">
    <div class="a4" id="printJS-a4" ref="printRef">
      <div class="row" v-for="index in 2" :key="index">
        <h1 class="title">{{ data.competition_name }}</h1>
        <div class="info">
          <dl>
            <dt>桌台号</dt>
            <dd>{{ data.table_number }}</dd>
          </dl>
          <dl>
            <dt>考试账号</dt>
            <dd>{{ data.account }}</dd>
          </dl>
          <dl v-if="data.password">
            <dt>考试密码</dt>
            <dd>{{ data.password }}</dd>
          </dl>
        </div>
        <div class="sign">
          <dl>
            <dt>考生签字：</dt>
            <dd></dd>
          </dl>
          <dl>
            <dt>裁判签字：</dt>
            <dd></dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.a4 {
  display: flex;
  flex-direction: column;
  width: 800px;
  height: 1140px;
  font-size: 16px;
  color: #101010;
  // border: 1px solid #000;
  .title {
    font-size: 20px;
    text-align: center;
  }
  .info {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    dl {
      text-align: center;
    }
    dd {
      margin-top: 20px;
      font-size: 20px;
    }
  }
  .sign {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    dl {
      display: flex;
    }
    dd {
      width: 120px;
      border-bottom: 1px solid #000;
    }
  }
}
.row {
  padding: 20px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  & + .row {
    border-top: 1px dashed #000;
  }
}
</style>
