<template>
  <div class="flower-management">
    <a-card title="花卉管理" :bordered="false">
      <!-- 搜索和筛选区域 -->
      <div class="search-section">
        <a-form layout="inline" :model="searchForm">
          <a-form-item label="关键词">
            <a-input v-model:value="searchForm.keyword" placeholder="请输入花卉名称" allow-clear />
          </a-form-item>
          <a-form-item label="类型">
            <a-select v-model:value="searchForm.type" placeholder="请选择类型" allow-clear style="width: 120px">
              <a-select-option value="鲜花">鲜花</a-select-option>
              <a-select-option value="盆栽">盆栽</a-select-option>
              <a-select-option value="绿植">绿植</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="状态">
            <a-select v-model:value="searchForm.status" placeholder="请选择状态" allow-clear style="width: 120px">
              <a-select-option value="active">上架</a-select-option>
              <a-select-option value="inactive">下架</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">
              <template #icon><SearchOutlined /></template>
              搜索
            </a-button>
            <a-button style="margin-left: 8px" @click="handleReset">
              <template #icon><ReloadOutlined /></template>
              重置
            </a-button>
          </a-form-item>
        </a-form>
      </div>

      <!-- 操作按钮区域 -->
      <div class="action-section">
        <a-button type="primary" @click="handleCreate">
          <template #icon><PlusOutlined /></template>
          新增花卉
        </a-button>
        <a-button style="margin-left: 8px" @click="handleExport">
          <template #icon><ExportOutlined /></template>
          导出数据
        </a-button>
      </div>

      <!-- 数据表格 -->
      <div class="table-section">
        <a-table
          :columns="columns"
          :data-source="flowerStore.flowers"
          :loading="flowerStore.loading"
          :pagination="pagination"
          row-key="id"
          bordered
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'image'">
              <a-image
                :width="60"
                :height="60"
                :src="record.image"
                :fallback="imageFallback"
                style="border-radius: 4px"
              />
            </template>
            <template v-else-if="column.dataIndex === 'price'">
              <span>¥{{ record.price }}</span>
            </template>
            <template v-else-if="column.dataIndex === 'status'">
              <a-tag :color="record.status === 'active' ? 'green' : 'red'">
                {{ record.status === 'active' ? '上架' : '下架' }}
              </a-tag>
            </template>
            <template v-else-if="column.dataIndex === 'actions'">
              <a-space>
                <a-button size="small" @click="handleEdit(record)">编辑</a-button>
                <a-button size="small" @click="handleView(record)">查看</a-button>
                <a-popconfirm
                  title="确定要删除这个花卉吗？"
                  @confirm="handleDelete(record.id)"
                >
                  <a-button size="small" danger>删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>
    </a-card>

    <!-- 创建/编辑模态框 -->
    <flower-modal
      :visible="modalVisible"
      :current-record="currentRecord"
      :mode="modalMode"
      @cancel="handleModalCancel"
      @ok="handleModalOk"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useFlowerStore } from '@/stores/modules/flower'
import { message } from 'ant-design-vue'
import {
  SearchOutlined,
  ReloadOutlined,
  PlusOutlined,
  ExportOutlined,
  EditOutlined,
  EyeOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'
import FlowerModal from './components/FlowerModal.vue'
import type { TablePaginationConfig } from 'ant-design-vue'

interface SearchForm {
  keyword: string
  type: string
  status: string
}

interface FlowerRecord {
  id: number
  name: string
  type: string
  price: number
  image: string
  status: string
  stock: number
  description?: string
  createdAt: string
  updatedAt: string
}

const flowerStore = useFlowerStore()
const searchForm = reactive<SearchForm>({
  keyword: '',
  type: '',
  status: ''
})
const modalVisible = ref(false)
const modalMode = ref<'create' | 'edit' | 'view'>('create')
const currentRecord = ref<FlowerRecord | null>(null)
const loading = ref(false)

// 表格列定义
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 60
  },
  {
    title: '图片',
    dataIndex: 'image',
    key: 'image',
    width: 80
  },
  {
    title: '花卉名称',
    dataIndex: 'name',
    key: 'name',
    width: 120
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    width: 80
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
    width: 100
  },
  {
    title: '库存',
    dataIndex: 'stock',
    key: 'stock',
    width: 80
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 80
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    key: 'createdAt',
    width: 120
  },
  {
    title: '操作',
    dataIndex: 'actions',
    key: 'actions',
    width: 200
  }
]

// 分页配置
const pagination = computed(() => ({
  total: flowerStore.total,
  current: flowerStore.pagination.current,
  pageSize: flowerStore.pagination.pageSize,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`,
  pageSizeOptions: ['10', '20', '50', '100']
}))

const imageFallback = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3X3bWrVxQH8Oc+hJAQEgJJSCCEhJAQEkJC6CshhIRQQkIICSEh9JXQUkJCX0JfSUgICSEkJISEkBASQkIICSEhJPQ9zHfZzHo+5Em8z7kz65wzZ++Z9XzWzJqZ9Xg8/ve//326u7v78vT09On79+8/vn///vXr16fHx8fHp6enx8fHx8e7u7svd3d3X+7u7r58+/bt/v7+7v7+/v7p6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp极有可能由于内容过长被截断，我将分步创建页面组件。先创建基础结构，然后逐步完善。
=======
const imageFallback = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3X3bWrVxQH8Oc+hJAQEgJJSCCEhJAQEkJC6CshhIRQQkIICSEh9JXQUkJCX0JfSUgICSEkJISEkBASQkIICSEhJPQ9zHfZzHo+5Em8z7kz65wzZ++Z9XzWzJqZ9Xg8/ve//326u7v78vT09On79+8/vn///vXr16fHx8fHp6enx8fHx8e7u7svd3d3X+7u7r58+/bt/v7+7v7+/v7p6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp极有可能由于内容过长被截断，我将分步创建页面组件。先创建基础结构，然后逐步完善。

const imageFallback = 'data:image/png;base64,[encoded data, 8788 characters]极有可能由于内容过长被截断，我将分步创建页面组件。先创建基础结构，然后逐步完善。