<template>

  <div class="container">
    <Breadcrumb :items="['云商城', '我的订单']" />
    <a-card title="我的订单">
      <a-alert v-if="notice" style="margin-bottom: 15px;">{{ notice }}</a-alert>

      <a-table :data="data" stripe hoverable column-resizable class="table" :loading="loading"
        :pagination="{ showPageSize: true, showJumper: true, defaultPageSize: 15 }">

        <template #name-filter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset }">
          <div class="custom-filter">
            <a-space direction="vertical">
              <a-input :model-value="filterValue[0]" @input="(value) => setFilterValue([value])" />
              <div class="custom-filter-footer">
                <a-button @click="handleFilterReset">重置</a-button>
                <a-button @click="handleFilterConfirm">确定</a-button>
              </div>
            </a-space>
          </div>
        </template>

        <template #columns>
          <a-table-column title="订单号" :width="180" data-index="orderId" ellipsis tooltip :filterable="{
            filter: (value, record) => (record.orderId ?? '').includes(value),
            slotName: 'name-filter',
            icon: () => h(IconSearch)
          }"></a-table-column>
          <a-table-column title="商品名称" :filterable="{
            filter: (value, record) => (record.name ?? '').includes(value),
            slotName: 'name-filter',
            icon: () => h(IconSearch)
          }">
            <template #cell="{ record }">
              {{ record.name }}
            </template>
          </a-table-column>
          <a-table-column title="订单金额" ellipsis tooltip :sortable="{
            sortDirections: ['ascend', 'descend']
          }">
            <template #cell="{ record }">
              ￥ {{ record.price }}
            </template>
          </a-table-column>
          <a-table-column title="支付方式" ellipsis tooltip>
            <template #cell="{ record }">
              <span>
                <icon-wechatpay v-if="record.pay_type === 'wxpay'"/>
                <icon-alipay-circle v-else-if="record.pay_type === 'alipay'"/>
                <icon-qq v-else/>
              </span>
              {{ getPayType(record.pay_type) }}
            </template>
          </a-table-column>
          <a-table-column title="订单状态" ellipsis tooltip>
            <template #cell="{ record }">
              <div v-if="record.state === 0" class="state">
                <div class="circle zero"></div>待支付
              </div>
              <div v-else-if="record.state === 1" class="state">
                <div class="circle one"></div>待处理
              </div>
              <div v-else-if="record.state === 2" class="state">
                <div class="circle one"></div>已完成
              </div>
              <div v-else class="state">
                <div class="circle else"></div>已关闭
              </div>
              <!-- {{ getOrderState(record.state) }} -->
            </template>
          </a-table-column>
          <a-table-column title="创建时间" ellipsis tooltip :sortable="{
            sortDirections: ['ascend', 'descend']
          }">
            <template #cell="{ record }">
              {{ stramptoTime(record.create_time) }}
            </template>
          </a-table-column>
          <a-table-column title="" fixed="right" :width="100">
            <template #cell="{ record }">
              <a-button @click="$router.push(`/store/orderDetail/${record.orderId}`)">详情</a-button>
            </template>

          </a-table-column>
        </template>
      </a-table>
    </a-card>
  </div>

</template>

<script setup>
import { ref, h } from 'vue'
import { getMyOrder } from '@/api/order'
import { Notification } from '@arco-design/web-vue'
import { IconSearch } from '@arco-design/web-vue/es/icon'
import { useRoute } from 'vue-router'
import { getNotice } from '@/utils/util'

const notice = ref('')

const GetNotice = async () => {
  const { path } = useRoute()
  const res = await getNotice(path)
  notice.value = res
}

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

const GetMyOrder = async () => {
  try {
    loading.value = true
    const res = await getMyOrder()
    if (!res || res.code !== 0)
      return Notification.error({
        title: '获取订单列表失败！',
        content: res?.msg ?? '请稍后再试'
      })
    data.value = res.data
  } catch (error) {
    Notification.error({
      title: '获取订单列表失败！',
      content: error.message || '请稍后再试'
    })
  } finally {
    loading.value = false
  }
}

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

function getPayType(type) {
  switch (type) {
    case 'alipay':
      return '支付宝'
    case 'qqpay':
      return 'QQ支付'
    case 'wxpay':
      return '微信支付'
  }
}

GetMyOrder()
GetNotice()
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}

.table {
  margin-top: 15px;

  .state {
    display: flex;
    align-items: center;

    .circle {
      border-radius: 50%;
      height: 8px;
      min-height: 8px;
      width: 8px;
      min-width: 8px;
      margin-right: 5px;
    }

    .zero {
      background-color: rgb(var(--orange-6));
    }

    .one {
      background-color: rgb(var(--green-6));
    }

    .else {
      background-color: rgb(var(--red-6));
    }
  }
}

.custom-filter {
  padding: 20px;
  background: var(--color-bg-5);
  border: 1px solid var(--color-neutral-3);
  border-radius: var(--border-radius-medium);
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

.custom-filter-footer {
  display: flex;
  justify-content: space-between;
}
</style>