<script setup>
import Report from './Report.vue'

import { useUserStore } from '@/stores/user'

import { useExperiment } from '../composables/useData'
import { useCheckStep } from '../composables/useData'
const { isCheck } = useCheckStep(8)
const { experiment } = useExperiment()
const userStore = useUserStore()

const emit = defineEmits(['submit'])

const reportRef = ref(null)

// 导出图片
function handleExport() {
  // reportRef.value.generateImage()
  reportRef.value.generatePdf()
}

async function genFormData() {
  const report = await reportRef.value.generateImage()

  return { type: 8, detail: { step8: { report } } }
}

async function handleSubmit() {
  emit('submit', await genFormData())
}
</script>

<template>
  <div>
    <div class="h2-title">
      <h2>营销策划报告</h2>
      <el-button type="primary" @click="handleExport">导出</el-button>
    </div>
    <Report
      :experimentName="experiment.name"
      :teacherName="experiment.teacher_name"
      :studentName="userStore.user.name || userStore.user.username"
      ref="reportRef" />
    <div class="market-step-footer">
      <el-button type="primary" @click="handleSubmit" :disabled="isCheck">保存</el-button>
    </div>
  </div>
</template>
