<template>
  <div class="store-page">
    <Breadcrumb />

    <a-card title="赠送记录">
      <AppQueryFilter>
      <a-row class="queryForm app-query-form">
        <a-col :flex="'1000px'">
          <a-form :model="queryData" :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }" label-align="left">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item field="direction" label="记录类型">
                  <a-select v-model="queryData.direction" :options="directionOptions" placeholder="请选择记录类型" style="width: 100%" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="status" label="审核状态">
                  <a-select v-model="queryData.status" :options="statusOptions" placeholder="请选择审核状态" style="width: 100%" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 84px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <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-col>
      </a-row>
      </AppQueryFilter>

      <a-table :bordered="false" :data="data" stripe hoverable column-resizable class="table" :loading="loading" :columns="columns"
        :pagination="{
          showPageSize: true,
          showJumper: true,
          showTotal: true,
          pageSize: pagination.pagesize,
          current: pagination.current,
          total: pagination.total
        }" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
        <template #direction="{ record }">
          <a-tag color="arcoblue" v-if="record.direction === 'sent'">我送出的</a-tag>
          <a-tag color="purple" v-else>我收到的</a-tag>
        </template>
        <template #counterparty_username="{ record }">
          <a-avatar :size="30">
            <img :alt="record.counterparty_username ?? ''" :src="record.counterparty_avatar" />
            <IconUser v-if="!record.counterparty_avatar" />
          </a-avatar>
          {{ record.counterparty_username }}
        </template>
        <template #status="{ record }">
          <a-tag color="orangered" v-if="record.status === 'pending'">待审核</a-tag>
          <a-tag color="green" v-else-if="record.status === 'approved'">已通过</a-tag>
          <a-tag color="red" v-else-if="record.status === 'rejected'">已拒绝</a-tag>
        </template>
        <template #created_at="{ record }">
          {{ stramptoTime(record.created_at) }}
        </template>
        <template #reviewed_at="{ record }">
          {{ stramptoTime(record.reviewed_at) }}
        </template>
        <template #reject_reason="{ record }">
          {{ record.reject_reason || '-' }}
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { Notification } from '@arco-design/web-vue'
import { getMySendCountRequestList } from '@/api/goods'

const loading = ref(false)
const data = ref([])

const pagination = reactive({
  total: 0,
  current: 1,
  pagesize: 20
})

const directionOptions = [
  { label: '全部', value: '' },
  { label: '我送出的', value: 'sent' },
  { label: '我收到的', value: 'received' }
]

const statusOptions = [
  { label: '全部', value: '' },
  { label: '待审核', value: 'pending' },
  { label: '已通过', value: 'approved' },
  { label: '已拒绝', value: 'rejected' }
]

const queryData = reactive({
  direction: '',
  status: ''
})

const columns = [
  { title: '类型', slotName: 'direction' },
  { title: '对方用户', slotName: 'counterparty_username' },
  { title: '赠送次数', dataIndex: 'count' },
  { title: '审核状态', slotName: 'status' },
  { title: '申请时间', slotName: 'created_at' },
  { title: '审核时间', slotName: 'reviewed_at' },
  { title: '拒绝原因', slotName: 'reject_reason' }
]

const stramptoTime = (time) => {
  if (!time) return '-'
  return new Date(time).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

const getList = async () => {
  try {
    loading.value = true
    const reqData = {
      pagesize: pagination.pagesize,
      current: pagination.current
    }
    if (queryData.direction) reqData.direction = queryData.direction
    if (queryData.status) reqData.status = queryData.status

    const res = await getMySendCountRequestList(reqData)
    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 search = () => {
  pagination.current = 1
  getList()
}

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

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

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

onMounted(() => {
  getList()
})
</script>

<style scoped lang="less">
.table {
  margin-top: 15px;
}
</style>
