<template>
  <el-dialog
    v-model="visible"
    title="商品领取记录"
    width="1100px"
    class="exchange-record-dialog"
    align-center
    destroy-on-close
  >
    <div class="px-6 py-4">
      <!-- 搜索筛选区域 - 优化布局 -->
      <div class="mb-4 flex items-center gap-3 justify-end">
        <div class="w-750px flex items-center gap-3">
          <el-select v-model="searchParams.itemType" placeholder="选择商品类型" clearable>
            <el-option label="亚声实物" :value="ShopGoodsTypeEnum.REAL_GOODS" />
            <el-option label="虚拟装饰" :value="ShopGoodsTypeEnum.VIRTUAL_GOODS" />
          </el-select>

          <el-date-picker
            v-model="timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="x"
            clearable
            style="width: 700px"
          />

          <el-button type="primary" @click="refresh" style="width: 80px"> 搜索 </el-button>
        </div>
      </div>

      <!-- 表格 - 调整列宽 -->
      <el-table :data="list" stripe height="420" class="w-full">
        <el-table-column prop="itemName" label="名称" min-width="140" show-overflow-tooltip />

        <el-table-column prop="itemType" label="商品类型" width="100" align="center">
          <template #default="scope">
            {{ scope.row.itemType === ShopGoodsTypeEnum.REAL_GOODS ? '亚声实物' : '虚拟装饰' }}
          </template>
        </el-table-column>

        <!-- <el-table-column prop="price" label="商品单价" width="100" align="center" /> -->

        <el-table-column prop="num" label="兑换数量" width="100" align="center" />

        <el-table-column label="扣除YA币" width="110" align="center">
          <template #default="scope">
            <span class="text-red-500 font-semibold"> -{{ scope.row.price }} </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="deliveryInfo"
          label="收货地址"
          min-width="160"
          show-overflow-tooltip
        />

        <el-table-column prop="createTime" label="领取时间" width="200">
          <template #default="scope">
            {{ dayjs(scope.row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 - 优化对齐 -->
      <div class="flex justify-end mt-4">
        <el-pagination
          v-model:current-page="searchParams.current"
          :page-size="searchParams.size"
          @current-change="goToPage"
          :total="total"
          layout="total, prev, pager, next"
          small
        />
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { usePageSearch } from '@/hooks'
import { getExchangeGoodsRecordList } from '@/api'
import dayjs from 'dayjs'
import { ShopGoodsTypeEnum } from '@/constants'

const { total, searchParams, refresh, goToPage, list } = usePageSearch(getExchangeGoodsRecordList, {
  immediate: false,
})

const timeRange = computed({
  get() {
    if (!searchParams.value.receiveTimeStart || !searchParams.value.receiveTimeEnd) {
      return []
    } else {
      return [searchParams.value.receiveTimeStart * 1000, searchParams.value.receiveTimeEnd * 1000]
    }
  },
  set(value) {
    if (!value) {
      searchParams.value.receiveTimeStart = 0
      searchParams.value.receiveTimeEnd = 0
    } else {
      searchParams.value.receiveTimeStart = value[0]! / 1000
      searchParams.value.receiveTimeEnd = value[1]! / 1000
    }
  },
})

const visible = shallowRef(false)

const open = () => {
  visible.value = true
  refresh()
}

defineExpose({
  open,
})
</script>

<style scoped></style>
