<script setup lang="ts">
import type { ExperimentItem } from '../types'
import { PictureFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { clearMembers, clearMemberEvents } from '../api'

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

// 生成实验数据
function genData() {
  window.open(`/admin/lab/experiment/ed/generate/${props.data.id}`)
}

// 清空用户事件数据
function clearUserEvent() {
  ElMessageBox.confirm(
    '该操作将会清空该实验所有学生对应的用户事件数据，且该操作不可逆！请慎重！确定要清空数据吗？',
    '清空用户事件数据'
  ).then(() => {
    clearMemberEvents({ experiment_id: props.data.id }).then(() => {
      ElMessage({ type: 'success', message: '清空成功' })
    })
  })
}

// 清空用户数据
function clearUser() {
  ElMessageBox.confirm(
    '该操作将会清空该实验所有学生对应的用户及事件数据，且该操作不可逆！请慎重！确定要清空数据吗？',
    '清空用户数据'
  ).then(() => {
    clearMembers({ experiment_id: props.data.id }).then(() => {
      ElMessage({ type: 'success', message: '清空成功' })
    })
  })
}
</script>

<template>
  <el-dialog title="实验数据管理" width="700px" @update:modelValue="$emit('update:modelValue')">
    <div class="box-list">
      <div class="box">
        <div class="box-pic">
          <el-icon><PictureFilled /></el-icon>
        </div>
        <el-button type="primary" @click="genData">生成实验数据</el-button>
      </div>
      <div class="box">
        <div class="box-pic">
          <el-icon><PictureFilled /></el-icon>
        </div>
        <el-button type="primary" @click="clearUserEvent">清空用户事件数据</el-button>
      </div>
      <div class="box">
        <div class="box-pic">
          <el-icon><PictureFilled /></el-icon>
        </div>
        <el-button type="primary" @click="clearUser">清空用户数据</el-button>
      </div>
      <div class="box">
        <div class="box-pic">
          <el-icon><PictureFilled /></el-icon>
        </div>
        <el-button type="info" disabled>更多实验数据管理</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.box-list {
  display: flex;
  column-gap: 20px;
}
.box {
  flex: 1;
  .el-button {
    width: 100%;
  }
}
.box-pic {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background-color: #e8e8e8;
}
</style>
king
