<template>
  <div class="admin-goods-page">
    <Breadcrumb />

    <a-card :bordered="false" class="page-card">
      <template #title>
        <div class="card-title-row">
          <span>商品管理</span>
          <a-button type="primary" @click="$router.push('/goodsManage/goods/addGoods')">
            <template #icon><icon-plus /></template>
            新增商品
          </a-button>
        </div>
      </template>

      <a-form :model="queryData" layout="inline" class="filter-form">
        <a-form-item label="商品名称">
          <a-input
            v-model="queryData.keyword"
            placeholder="关键词搜索"
            allow-clear
            style="width: 220px"
            @press-enter="search"
          />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="search">
              <template #icon><icon-search /></template>
              搜索
            </a-button>
            <a-button @click="reset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <a-table
        :bordered="false"
        :data="data"
        stripe
        :loading="loading"
        :columns="columns"
        class="data-table"
        :pagination="{
          showPageSize: true,
          showJumper: true,
          showTotal: true,
          pageSize: pagination.pagesize,
          current: pagination.current,
          total: pagination.total
        }"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
      >
                <template #icon="{ record }">
                    <GoodsEmoji :icon="record.icon" size="sm" />
                </template>
                <template #price="{ record }">
          <span class="price-cell">¥{{ record.price }}</span>
        </template>
        <template #create_time="{ record }">
          {{ formatStoreTimeFull(record.create_time) }}
        </template>
        <template #update_time="{ record }">
          {{ formatStoreTimeFull(record.update_time) }}
        </template>
        <template #state="{ record }">
          <a-tag :color="record.state === 1 ? 'green' : 'orangered'">
            {{ record.state === 1 ? '上架' : '下架' }}
          </a-tag>
        </template>
        <template #vip="{ record }">
          <a-tag :color="record.vip === 1 ? 'gold' : 'gray'">{{ record.vip === 1 ? 'VIP' : '无' }}</a-tag>
        </template>
        <template #allow_refund="{ record }">
          <a-tag :color="record.allow_refund === 0 ? 'red' : 'green'">{{ record.allow_refund === 0 ? '不可退' : '可退' }}</a-tag>
        </template>
        <template #optional="{ record }">
          <a-button type="text" size="small" @click="$router.push(`/goodsManage/goods/addGoods/${record.id}`)">
            编辑
          </a-button>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useResponsiveTable } from '@/hooks/useResponsiveTable'
import { adminGetGoodsList } from '@/api/goods'
import { Notification } from '@arco-design/web-vue'
import { formatStoreTimeFull } from '@/utils/storeFormat'
import GoodsEmoji from '@/components/store/GoodsEmoji.vue'

const pagination = reactive({ total: 0, current: 1, pagesize: 20 })
const queryData = reactive({ keyword: '' })
const loading = ref(false)
const data = ref([])

const columnDefs = [
    { title: 'ID', dataIndex: 'id', width: 70 },
    { title: '图标', slotName: 'icon', width: 70 },
    { title: '商品名称', dataIndex: 'name', ellipsis: true, tooltip: true },
  { title: '价格', slotName: 'price', width: 100 },
  { title: '库存', dataIndex: 'num', width: 80 },
  { title: '乐跑次数', dataIndex: 'lepao_count', width: 100 },
  { title: 'VIP', slotName: 'vip', width: 90 },
  { title: '退款', slotName: 'allow_refund', width: 90 },
  { title: '浏览量', dataIndex: 'views', width: 90 },
  { title: '状态', slotName: 'state', width: 90 },
  { title: '创建时间', slotName: 'create_time', width: 170 },
  { title: '创建人', dataIndex: 'create_user', width: 120, ellipsis: true },
  { title: '更新时间', slotName: 'update_time', width: 170 },
  { title: '操作', slotName: 'optional', fixed: 'right', width: 90 }
]

const { useTableColumns } = useResponsiveTable()
const columns = useTableColumns(columnDefs)

const search = () => {
  pagination.current = 1
  getList()
}

const reset = () => {
  queryData.keyword = ''
  pagination.current = 1
  getList()
}

const getList = async () => {
  try {
    loading.value = true
    const res = await adminGetGoodsList({
      ...queryData,
      pagesize: pagination.pagesize,
      current: pagination.current
    })
    if (!res || res.code !== 0) {
      return Notification.error({
        title: '获取商品失败',
        content: res?.msg ?? '请稍后再试'
      })
    }
    data.value = res.data ?? []
    pagination.total = res.pagination?.total ?? 0
  } catch (error) {
    Notification.error({
      title: '获取商品失败',
      content: error.message || '请稍后再试'
    })
  } finally {
    loading.value = false
  }
}

const handlePageChange = (page) => {
  pagination.current = page
  getList()
}

const handlePageSizeChange = (size) => {
  pagination.pagesize = size
  pagination.current = 1
  getList()
}

onMounted(getList)
</script>

<style scoped lang="less">
.admin-goods-page {
  padding: 0 20px 20px;
}

.page-card {
  border-radius: 12px;
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.filter-form {
  margin-bottom: 16px;
}

.data-table {
  margin-top: 8px;
}

.price-cell {
  font-weight: 600;
  color: #e85d04;
}
</style>
