<template>
  <el-dialog title="录取通知书" v-model="visible" width="80%" height="50%" @close="handleClose">
    <div style="height: 60vh">
      <iframe id="iframeid" :src="pdfPath" ref="iframeRef" frameborder="0" style="width:100%;height:100%;"></iframe>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
        <el-button @click="handleConfirm" v-if="props.permissions.sureLQTZ && canConfirm" type="primary">确认已发放</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { toWord, sureLQTZ } from '/@/api/recruit/recruitstudentsignup'

export default {
  name: 'AdmissionNoticeDialog',
  props: {
    permissions: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['refresh'],
  setup(props, { emit }) {
    const visible = ref(false)
    const pdfPath = ref('')
    const currentId = ref('')
    const canConfirm = ref(false)

    const init = async (row) => {
      currentId.value = row.id
      pdfPath.value = ''
      canConfirm.value = row.isBackTz == '0'
      
      try {
        const res = await toWord(row)
        pdfPath.value = "/recruit/file/previewPdf?filePath=" + encodeURIComponent(res.data)
        visible.value = true
      } catch (error) {
        ElMessage.error('加载录取通知书失败')
      }
    }

    const handleConfirm = () => {
      ElMessageBox.confirm('是否确认已打印并发放本通知书？请谨慎操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return sureLQTZ({ id: currentId.value })
      }).then(() => {
        ElMessage.success('保存成功')
        visible.value = false
        emit('refresh')
      }).catch(() => {
        // 用户取消操作
      })
    }

    const handleClose = () => {
      visible.value = false
    }

    return {
      visible,
      pdfPath,
      canConfirm,
      init,
      handleConfirm,
      handleClose
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>

