<template>
  <div class="gift-selection">
    <!-- 查询功能 -->
    <div style="margin-bottom: 16px; position: relative;">
      <Space :wrap="true" style="margin-bottom: 10px;">
        <Input v-model:value="query.giftId" allowClear placeholder="请输入礼物ID" />
        <Input v-model:value="query.giftName" allowClear placeholder="请输入礼物名称" />
        <Button @click="resetQuery" danger>
          {{ $t('common.reset') }}
        </Button>
      </Space>

          <!-- 余额显示 -->
    <div style="display: flex; justify-content: flex-end; margin-bottom: 16px;position: absolute; right: 0;top:-20px;z-index: 10;">
      <div style="background: #f0f8ff; padding: 8px 16px; border-radius: 4px; border: 1px solid #d1e9ff;">
        <div style="font-size: 12px; color: #666;">{{ $t('robot.runningInfo.balance') }}:</div>
        <div style="font-size: 16px; font-weight: bold; color: #0084CA;">{{ balance }} 元</div>
      </div>
    </div>
    </div>

    <!-- 礼物列表 -->
    <Table 
      :dataSource="filteredGifts" 
      :columns="columns" 
      bordered 
      size="small"
      rowKey="gift_id"
      :rowClassName="(record) => {
        const giftPrice = record.gift_price || record.price || record.diamond || 0;
        return giftPrice > balance ? 'disabled-row' : '';
      }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'gift_image'">
          <img v-if="record.gift_image" :src="record.gift_image" :alt="record.gift_name || record.name" style="width: 32px; height: 32px; object-fit: contain;" />
          <span v-else>🎁</span>
        </template>
        <template v-if="column.dataIndex === 'gift_name'">
          {{ formatGiftName(record) }}
        </template>
        <template v-if="column.dataIndex === 'gift_price'">
          {{ formatGiftPrice(record) }}
        </template>
        <template v-if="column.dataIndex === 'action'">
          <Button 
            type="link" 
            size="small" 
            @click="handleGiftSend(record)"
            :disabled="(record.gift_price || record.price || record.diamond || 0) > balance">
            送礼
          </Button>
        </template>
      </template>
    </Table>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { $t } from '@vben/locales';
import { Modal, Card, Button, Space, Row, Col, Input, message, Table } from 'ant-design-vue';

interface Gift {
  gift_id?: number;
  id?: number;
  gift_name?: string;
  name?: string;
  gift_price?: number;
  price?: number;
  diamond?: number;
  gift_image?: string;
  icon?: string;
}

interface Props {
  gifts: Gift[];
  balance: number;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  send: [gift: Gift];
  cancel: [];
}>();

// 查询参数
const query = ref({
  giftId: '',
  giftName: ''
});

// 表格列配置
const columns = [
  {
    title: '礼物ID',
    dataIndex: 'gift_id',
    key: 'gift_id',
    width: 100
  },
  {
    title: '礼物图片',
    dataIndex: 'gift_image',
    key: 'gift_image',
    width: 80
  },
  {
    title: '礼物名称',
    dataIndex: 'gift_name',
    key: 'gift_name',
    width: 150
  },
  {
    title: '价格',
    dataIndex: 'gift_price',
    key: 'gift_price',
    width: 100
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 80
  }
];

// 格式化礼物名称
function formatGiftName(record: Gift) {
  return record.gift_name || record.name || '';
}

// 格式化礼物价格
function formatGiftPrice(record: Gift) {
  const price = record.gift_price || record.price || record.diamond || 0;
  return `${price} 钻石`;
}

// 过滤礼物（根据搜索条件和价格）
const filteredGifts = computed(() => {
  return props.gifts.filter(gift => {
    // 过滤价格小于等于0的礼物
    const giftPrice = gift.gift_price || gift.price || gift.diamond || 0;
    if (giftPrice <= 0) {
      return false;
    }
    // 礼物ID搜索
    if (query.value.giftId) {
      const giftIdStr = gift.gift_id?.toString() || gift.id?.toString() || '';
      if (!giftIdStr.includes(query.value.giftId)) {
        return false;
      }
    }
    // 礼物名称搜索
    if (query.value.giftName) {
      const giftName = gift.gift_name || gift.name || '';
      if (!giftName.includes(query.value.giftName)) {
        return false;
      }
    }
    return true;
  });
});

// 处理查询
function handleQuery() {
  // 过滤逻辑在 computed 属性中处理
}

// 重置查询
function resetQuery() {
  query.value = {
    giftId: '',
    giftName: ''
  };
}

// 处理送礼
function handleGiftSend(gift: Gift) {
  const giftPrice = gift.gift_price || gift.price || gift.diamond || 0;
  if (giftPrice > props.balance) {
    message.warning('余额不足');
    return;
  }
  
  // 二次确认
  Modal.confirm({
    title: '确认送礼',
    content: `确定要发送礼物「${formatGiftName(gift)}」吗？\n价格：${formatGiftPrice(gift)}`,
    onOk() {
      emit('send', gift);
    }
  });
}
</script>

<style scoped>
.gift-selection {
  padding: 16px;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  margin-top: 16px;
}

:deep(.selected-row) {
  background-color: #e6f7ff !important;
  border-color: #1890ff !important;
}

:deep(.disabled-row) {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

:deep(.disabled-row:hover) {
  background-color: #f5f5f5 !important;
}
</style>