<template>
  <el-dialog
    v-model="visible"
    title="YA币收支记录"
    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.type" placeholder="选择商品类型" clearable>
            <el-option label="亚声实物" :value="ShopGoodsTypeEnum.REAL_GOODS" />
            <el-option label="虚拟装饰" :value="ShopGoodsTypeEnum.VIRTUAL_GOODS" />
          </el-select>

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

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

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

        <el-table-column prop="itemType" label="YA币" width="100" align="center">
          <template #default="scope">
            <span
              class="font-semibold"
              :class="{ 'text-red-500': !scope.row.isIncr, 'text-green-500': scope.row.isIncr }"
            >
              {{ scope.row.isIncr ? '+' : '-' }}
              {{ scope.row.scoreAyabi }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="createdAt" label="时间" width="300">
          <template #default="scope">
            {{ dayjs(scope.row.createdAt * 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 { getExchangeYabiRecordList } from '@/api'
import dayjs from 'dayjs'
import { ShopGoodsTypeEnum } from '@/constants'

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

const visible = shallowRef(false)

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

const onSearch = () => {
  refresh()
}

defineExpose({
  open,
})
</script>

<style scoped></style>
