<script setup lang="ts">
import type { Trip } from '../types'
import { studentGenerateData } from '../api'
import { ElMessage } from 'element-plus'

const props = defineProps<{
  data: Trip
}>()

const emit = defineEmits<{
  (e: 'update'): void
}>()

const dialogVisible = ref(false)
const generateVisible = ref(false)
const generateLoading = ref(false)
const params = reactive({
  type: 1,
  itinerary_id: props.data.itinerary_id
})

async function handleGenerate() {
  dialogVisible.value = false
  generateLoading.value = true
  generateVisible.value = true
  try {
    await studentGenerateData(params)
    emit('update')
    ElMessage.success('生成数据成功')
  } catch (error) {
    console.error(error)
  } finally {
    generateLoading.value = false
    generateVisible.value = false
  }
}
</script>

<template>
  <el-button type="primary" :disabled="generateLoading" @click="dialogVisible = true">一键生成旅程数据</el-button>

  <el-dialog v-model="dialogVisible" width="400" title="生成旅程数据">
    <p class="dialog-text" v-if="data.has_itinerary_generate_data">
      系统检测到您正在重复生成用户旅程事件数据！<br />
      该操作将会覆盖您之前生成的数据且无法恢复，请确认！
    </p>
    <p class="dialog-text" v-else>
      即将生成用户旅程相关事件数据，<br />
      请确认您的用户旅程的每一个节点已经完成配置！
    </p>
    <el-radio-group v-model="params.type" class="dialog-radio-group">
      <el-radio label="今日" :value="1"></el-radio>
      <el-radio label="前7日" :value="2"></el-radio>
      <el-radio label="前30日" :value="3"></el-radio>
    </el-radio-group>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleGenerate">生成数据</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="generateVisible" title="提示" width="400">
    <p class="dialog-text">正在生成数据中，请耐心等待</p>
    <template #footer>
      <el-button @click="generateVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.dialog-text {
  line-height: 24px;
  text-align: center;
}
.dialog-radio-group {
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
