<template>
  <div class="danye-table">
    <el-table :data="data" v-loading="loading" border stripe>
      <el-table-column prop="id" label="ID" width="80" align="center" />
      
      <el-table-column prop="title" label="标题" min-width="200">
        <template #default="{ row }">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="图片优化" width="120" align="center">
        <template #default="{ row }">
          <el-switch
            :model-value="row.isImageOptimizer"
            @change="(val: boolean) => handleToggleOptimizer(row, val)"
            active-text="开"
            inactive-text="关"
            inline-prompt
          />
        </template>
      </el-table-column>
      
      <el-table-column label="更新时间" width="180" align="center">
        <template #default="{ row }">
          {{ row.updateTime || '-' }}
        </template>
      </el-table-column>
      
      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button type="warning" link size="small" @click="handleClear(row)">
            清空
          </el-button>
          <el-button type="danger" link size="small" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import type { DanyeResponse } from '@/api/business/danye'

interface Props {
  data: DanyeResponse[]
  loading: boolean
}

defineProps<Props>()

const emit = defineEmits<{
  (e: 'edit', row: DanyeResponse): void
  (e: 'toggle-optimizer', row: DanyeResponse, value: boolean): void
  (e: 'clear', row: DanyeResponse): void
  (e: 'delete', row: DanyeResponse): void
}>()

const handleEdit = (row: DanyeResponse) => {
  emit('edit', row)
}

const handleToggleOptimizer = (row: DanyeResponse, value: boolean) => {
  emit('toggle-optimizer', row, value)
}

const handleClear = (row: DanyeResponse) => {
  emit('clear', row)
}

const handleDelete = (row: DanyeResponse) => {
  emit('delete', row)
}
</script>

<style scoped>
.danye-table {
  width: 100%;
}
</style>
