<script setup lang="ts">
import { ref, watch } from 'vue'
import { handleWarning } from '../api/warningApi'

interface Props {
  visible: boolean
  loading: boolean
  alertId: number
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'submit', data: { handleAction: string; handleContent: string }): void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  loading: false,
  alertId: 0
})

const emit = defineEmits<Emits>()

const handleAction = ref('resolve')
const handleContent = ref('')

// 处理动作选项
const handleActionOptions = [
  { value: 'resolve', label: '解决' },
  { value: 'ignore', label: '忽略' },
  { value: 'false_alarm', label: '误报' }
]

// 监听 visible 变化，重置表单
watch(() => props.visible, (newVal) => {
  if (newVal) {
    handleAction.value = 'resolve'
    handleContent.value = ''
  }
})

// 处理动作确认
const handleActionConfirm = (value: string) => {
  handleAction.value = value
}

// 提交表单
const submitForm = async () => {
  if (!handleContent.value.trim()) {
    uni.showToast({
      title: '请输入处理内容',
      icon: 'none'
    })
    return
  }

  try {
    emit('submit', { handleAction: handleAction.value, handleContent: handleContent.value })
    emit('update:visible', false)
    uni.showToast({
      title: '处理成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('处理预警失败:', error)
    uni.showToast({
      title: '处理失败',
      icon: 'none'
    })
  }
}

// 取消
const cancel = () => {
  emit('update:visible', false)
}
</script>

<template>
  <wd-popup v-model="props.visible" position="bottom" round custom-class="handle-form-popup">
    <view class="handle-form p-5">
      <view class="form-header flex justify-between items-center mb-4">
        <text class="text-lg font-medium">处理预警</text>
        <wd-icon name="close" size="24" @click="cancel"></wd-icon>
      </view>

      <view class="form-content">
        <!-- 处理动作 -->
        <view class="mb-4">
          <text class="block mb-2 text-gray-600">处理动作</text>
          <wd-picker 
            :columns="handleActionOptions" 
            v-model="handleAction" 
            @confirm="handleActionConfirm"
            style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);"
          />
        </view>
        
        <!-- 处理内容 -->
        <view class="mb-4">
          <text class="block mb-2 text-gray-600">处理内容</text>
          <textarea
            v-model="handleContent"
            placeholder="请输入处理内容"
            class="w-full p-3 border border-gray-300 rounded-lg"
            style="min-height: 200rpx"
            :disabled="props.loading"
          ></textarea>
        </view>
      </view>

      <view class="form-actions flex gap-4 mt-6">
        <wd-button
          type="default"
          size="medium"
          custom-class="action-btn"
          @click="cancel"
          :loading="props.loading"
          :disabled="props.loading"
        >
          取消
        </wd-button>
        <wd-button
          type="primary"
          size="medium"
          custom-class="action-btn"
          @click="submitForm"
          :loading="props.loading"
          :disabled="props.loading"
        >
          {{ props.loading ? '处理中...' : '确定处理' }}
        </wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<style scoped>
.handle-form-popup {
  width: 100%;
  max-height: 80vh;
}

.handle-form {
  background-color: #ffffff;
  border-radius: 16rpx 16rpx 0 0;
  max-height: 80vh;
  overflow-y: auto;
}

.action-btn {
  flex: 1;
}

.form-header {
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #e5e7eb;
}

.form-content {
  margin-top: 24rpx;
}

.form-actions {
  margin-top: 32rpx;
}

/* 通用样式 */
.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.mb-4 {
  margin-bottom: 32rpx;
}

.mt-4 {
  margin-top: 32rpx;
}

.mt-6 {
  margin-top: 48rpx;
}

.text-lg {
  font-size: 32rpx;
}

.font-medium {
  font-weight: 500;
}

.text-gray-600 {
  color: #666666;
}

.gap-4 {
  gap: 32rpx;
}
</style>
