<template>
  <view>
    <view class="tabs-1">
      <view
        class="item"
        v-for="(item, index) in opt"
        :key="index"
        @click="tabChange(item.value)">
        <view
          :style="{
            color: item.value === tabVal ? '#333333' : '#9C9C9C',
          }"
          >{{ item.text }}</view
        >
        <view
          class="line"
          :style="{
            backgroundColor: item.value === tabVal ? '#FFD940' : '',
          }"></view>
      </view>
    </view>
    <view v-if="dataList.length > 0">
      <view
        class="order-card"
        v-for="(item, index) in dataList"
        :key="index"
        @click="toDetailPage(item)">
        <view class="top">
          <view class="text-[#9C9C9C] text-[25px]">订单号：{{ item.oid }}</view>
          <view
            :style="{
              color:
                item.status === 0
                  ? '#FF850A'
                  : item.status === 1
                  ? '#F83D3D'
                  : item.status === 2
                  ? '#333333'
                  : '#9C9C9C',
            }"
            >{{
              item.status === 0
                ? '待付款'
                : item.status === 1
                ? '待使用'
                : item.status === 2
                ? '已使用'
                : '已失效'
            }}
          </view>
        </view>
        <view class="line"></view>
        <view class="center" v-for="(itm, idx) in item.OrderGoods" :key="idx">
          <view class="top">
            <image class="mr-10" :src="itm.Goods.cover" />
            <view class="flex-1">
              <view class="title">{{ itm.Goods?.name }}</view>
              <view class="text-[#F83D3D] mt-5">
                <view>{{ itm.pay_price }}元</view>
                <view>{{ itm.pay_integral }}积分</view>
              </view>
            </view>
            <view class="right">
              <view>x{{ itm.number }}</view>
            </view>
          </view>
        </view>
        <view
          class="flex justify-between items-center mt-2 mb-2 text-[25px]"
          v-if="item.status !== 0">
          <text class="text-[#9C9C9C]">共{{ item.count }}件商品</text>
          <view
            >{{ item.status !== 0 ? '实' : '应' }}付款{{
              item.pay_type === 1 ? '(元): ' : '(积分): '
            }}{{ item.pay_type === 1 ? item.price : item.exchange }}</view
          >
        </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 {getActiveOrderList} from '../../../../api/admin';

const opt = ref([
  {
    text: '全部',
    value: 0,
  },
  {
    text: '待付款',
    value: 1,
  },
  {
    text: '待核销',
    value: 2,
  },
  {
    text: '已核销',
    value: 3,
  },
  {
    text: '已失效',
    value: 4,
  },
]);

const tabVal = ref(0);

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

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

Taro.useLoad(options => {
  tabVal.value = Number(options.type);
  getData();
});

const getData = async () => {
  Taro.showLoading({
    title: '加载中',
  });
  try {
    const user_info = Taro.getStorageSync('userInfo');
    const data = {
      bid: user_info.data.bid,
      status: tabVal.value,
      PageNum: pageOpt.value.page,
      PageSize: 10,
    };
    const res = await getActiveOrderList(data);
    dataList.value.push(...res.data.data);
    pageOpt.value.total = res.data.total || 0;
  } catch (error) {
    Taro.showToast({
      title: error.msg,
      icon: 'none',
    });
  }
  Taro.hideLoading();
};

const tabChange = (e: number) => {
  tabVal.value = e;
  getData();
};

const toDetailPage = (item: any) => {
  Taro.setStorageSync('ver_order_info', item);
  Taro.navigateTo({
    url: '/pages/admin/order_manage/detail/index',
  });
};

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

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