<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <span>错误日志测试</span>
      </template>
      
      <el-alert type="warning" :closable="false" style="margin-bottom: 20px;">
        点击下方按钮触发不同类型的错误，然后到错误日志页面查看记录效果
      </el-alert>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>GET 请求测试</template>
            
            <el-space direction="vertical" fill style="width: 100%">
              <el-button type="danger" @click="testError('runtime')" :loading="loading.runtime">
                运行时异常
              </el-button>
              
              <el-button type="danger" @click="testError('nullPointer')" :loading="loading.nullPointer">
                空指针异常
              </el-button>
              
              <el-button type="danger" @click="testError('arrayIndex')" :loading="loading.arrayIndex">
                数组越界异常
              </el-button>
              
              <el-button type="danger" @click="testError('divideByZero')" :loading="loading.divideByZero">
                除零异常
              </el-button>
            </el-space>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>自定义错误测试</template>
            
            <el-form :model="customForm" label-width="80px">
              <el-form-item label="错误类型">
                <el-select v-model="customForm.errorType" style="width: 100%">
                  <el-option label="业务错误" value="BUSINESS" />
                  <el-option label="系统错误" value="SYSTEM" />
                  <el-option label="API错误" value="API" />
                </el-select>
              </el-form-item>
              <el-form-item label="错误消息">
                <el-input v-model="customForm.errorMessage" placeholder="请输入错误消息" />
              </el-form-item>
              <el-form-item>
                <el-button type="danger" @click="testCustomError" :loading="loading.custom">
                  触发自定义错误
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>
          
          <el-card shadow="hover" style="margin-top: 20px;">
            <template #header>POST 请求测试（带JSON Body）</template>
            
            <el-form :model="postForm" label-width="80px">
              <el-form-item label="消息内容">
                <el-input v-model="postForm.message" placeholder="请输入消息" />
              </el-form-item>
              <el-form-item>
                <el-button type="danger" @click="testPostError" :loading="loading.post">
                  触发POST错误
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>

      <el-divider />

      <el-button type="primary" @click="goToErrorLog">
        <el-icon><View /></el-icon>
        查看错误日志
      </el-button>
    </el-card>
  </div>
</template>

<script setup name="ErrorTest">
import { View } from '@element-plus/icons-vue'
import request from '@/utils/request'

const { proxy } = getCurrentInstance()
const router = useRouter()

const loading = ref({
  runtime: false,
  nullPointer: false,
  arrayIndex: false,
  divideByZero: false,
  custom: false,
  post: false
})

const customForm = ref({
  errorType: 'BUSINESS',
  errorMessage: '这是一个测试错误'
})

const postForm = ref({
  message: 'POST请求测试消息'
})

function testError(type) {
  loading.value[type] = true
  request({
    url: '/monitor/errorTest/' + type,
    method: 'get'
  }).catch(err => {
    proxy.$modal.msgSuccess('错误已触发，请查看错误日志')
  }).finally(() => {
    loading.value[type] = false
  })
}

function testCustomError() {
  loading.value.custom = true
  request({
    url: '/monitor/errorTest/custom',
    method: 'get',
    params: customForm.value
  }).catch(err => {
    proxy.$modal.msgSuccess('错误已触发，请查看错误日志')
  }).finally(() => {
    loading.value.custom = false
  })
}

function testPostError() {
  loading.value.post = true
  request({
    url: '/monitor/errorTest/postError',
    method: 'post',
    data: {
      action: 'error',
      message: postForm.value.message
    }
  }).catch(err => {
    proxy.$modal.msgSuccess('错误已触发，请查看错误日志')
  }).finally(() => {
    loading.value.post = false
  })
}

function goToErrorLog() {
  router.push('/monitor/log/errorLog')
}
</script>

<style scoped>
.el-button {
  width: 100%;
}
</style>
