<template>
  <view>
    <!-- <view class="topTips">
      <view>
        <view style="font-weight: bold">订单信息</view>
        <view style="font-size: 15px"
          >总赠送游戏豆：{{ 0 }}
        </view>
        <view style="font-size: 15px"
          >总计积分：{{ 0 }}
        </view>
      </view>
      <image src="../static/user/order_list_top.png" />
    </view> -->
    <view class="tabs">
      <view
        class="item"
        v-for="item in tabs"
        :key="item.value"
        @click="changeTabs(item.value)">
        <text>{{ item.text }}</text>
        <view
          class="line"
          :class="tabsIndex == item.value ? 'active' : ''"></view>
      </view>
    </view>
    <view v-if="listData.length > 0">
      <view
        class="card"
        v-for="(item, index) in (listData as any[])"
        :key="index">
        <view class="header">
          <view>
            <text>台号: {{ item.seat }}</text>
            <text>点单人: {{ item.PlaceUser?.nickName }}</text>
          </view>
          <view
            :style="{
              color: get_color(item.status),
              fontWeight: 'bold',
            }"
            >{{ get_status_text(item.status) }}</view
          >
        </view>
        <view class="line"></view>
        <view @click="to_page(item)">
          <view
            class="goods-list"
            v-for="(itm, idx) in item.OrderGoods"
            :key="idx">
            <image :src="itm.Goods.cover"></image>
            <view class="center">
              <nut-ellipsis
                direction="end"
                :content="itm.Goods.name"></nut-ellipsis>
              <!-- <view class="title">{{ itm.Goods.name }}</view> -->
            </view>
            <view class="num">
              <view>x{{ itm.pay_price }}</view>
              <view>x{{ itm.number }}</view>
            </view>
          </view>
        </view>
        <view class="desc">
          <view>订单时间: {{ item.add_time }}</view>
          <view>备注: {{ item.notes }}</view>
        </view>

        <view class="line"></view>
      </view>
    </view>
    <nut-empty v-else description="暂无订单"></nut-empty>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import Taro from '@tarojs/taro';
import {getUserAfterOrderList} from '../../../api/user';

const tabsIndex = ref(0);

const listData = ref<any[]>([]);

const tabs = ref([
  {
    text: '全部',
    value: 0,
  },
  {
    text: '未付款',
    value: 1,
  },
  {
    text: '挂帐中',
    value: 3,
  },
  {
    text: '已收款',
    value: 2,
  },
]);

Taro.useDidShow(() => {
  get_list();
});

const changeTabs = (index: number) => {
  tabsIndex.value = index;
  get_list();
};

const pageOpt = ref({
  page: 1,
  total: 0,
});

const get_list = async () => {
  Taro.showLoading({
    title: '加载中',
  });
  const user_info = await Taro.getStorageSync('userInfo');
  const {data: res} = await getUserAfterOrderList({
    phone: user_info.data.phone,
    status: tabsIndex.value,
    PageNum: pageOpt.value.page,
    PageSize: 10,
  });
  listData.value.push(...res.data);
  pageOpt.value.total = res.total || 0;
  Taro.hideLoading();
};

const get_color = (status: number) => {
  switch (status) {
    case 0:
      return '#FD0100';
    case 1:
      return '#03A113';
    case 2:
      return '#FFA938';
  }
};

const get_status_text = (status: number) => {
  switch (status) {
    case 0:
      return '未付款';
    case 1:
      return '已付款';
    case 2:
      return '挂帐中';
  }
};

const to_page = item => {
  Taro.navigateTo({
    url: `/pages/users/pending_order/pending_order_detail/index?bid=${item.bid}&oid=${item.oid}`,
  });
};

Taro.useReachBottom(() => {
  if (pageOpt.value.total === listData.value.length)
    return Taro.showToast({
      title: '没有更多数据了',
      icon: 'none',
    });
  pageOpt.value.page++;
  get_list();
});
</script>

<style lang="scss">
@import './index.scss';
</style>
