<script lang="ts" setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";
import Pay from "@/components/Pay.vue";
import { getActiveOrderList, deleteActiveOrder } from "@/api/goods";
import { getOrderStatistics } from "@/api/order";

const tabValue = ref(0);

const isShowPay = ref(false);

const tabsList = ref([
  {
    title: "全部",
    value: 0,
    num: 0,
  },
  {
    title: "待付款",
    value: 1,
    num: 0,
  },
  {
    title: "待使用",
    value: 2,
    num: 0,
  },
  {
    title: "已使用",
    value: 3,
    num: 0,
  },
  {
    title: "已失效",
    value: 4,
    num: 0,
  },
]);

const jfInfo = ref({});

interface OrderList {
  oid: string;
  add_time: string;
  status: number;
  OrderGoods: GoodsItem[];
  count: number;
  number: number;
  pay_type: number;
  exchange: number;
  price: number;
}

interface GoodsItem {
  Goods: {
    name: string;
    cover: string;
  };
  ID: number;
  gid: string;
  number: number;
  oid: string;
  pay_integral: number;
  pay_price: number;
}

const orderList = ref<OrderList[]>([]);

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

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

const getList = async () => {
  try {
    const res = await getActiveOrderList({
      status: tabValue.value,
    });
    orderList.value = res.data.data;
  } catch (error) {
    Taro.showToast({
      title: error.msg,
      icon: "none",
    });
  }
  await getTj();
};

const tabChange = (index: number) => {
  tabValue.value = index;
  getList();
};

Taro.useReachBottom(() => {
  console.log("useReachBottom");
});

const openPay = (item: OrderList) => {
  isShowPay.value = true;
  jfInfo.value = item.oid;
};

const errPay = () => {
  isShowPay.value = false;
  Taro.showToast({
    title: "支付失败",
    icon: "none",
  });
  jfInfo.value = {};
  getList();
};
const closePay = () => {
  isShowPay.value = false;
  Taro.showToast({
    title: "支付取消",
    icon: "none",
  });
  jfInfo.value = {};
  getList();
};

const toDetail = (item: any) => {
  Taro.setStorageSync("item", item);
  Taro.navigateTo({
    url: `/pages/users/order_list_detail/index?orderId=${item.oid}`,
  });
};

const delOrder = async (oid: string) => {
  try {
    await deleteActiveOrder({ oid });
  } catch (error) {
    Taro.showToast({
      title: error.msg,
      icon: "none",
    });
  }
  await getList();
};

const countInfo = ref<{
  A?: number;
  B?: number;
  C?: number;
  D?: number;
  F?: number;
  ExchangeTotal?: number;
  PriceTotal?: number;
}>({});

const getTj = async () => {
  try {
    const res = await getOrderStatistics({
      type: 2,
    });
    countInfo.value = res.data.data;
    tabsList.value[0].num = countInfo.value.A || 0;
    tabsList.value[1].num = countInfo.value.B || 0;
    tabsList.value[2].num = countInfo.value.C || 0;
    tabsList.value[3].num = countInfo.value.D || 0;
    tabsList.value[4].num = countInfo.value.F || 0;
  } catch (error) {
    Taro.showToast({
      title: error.msg,
      icon: "none",
    });
  }
};
</script>

<template>
  <view>
    <view class="topTips">
      <view>
        <view style="font-weight: bold">订单信息</view>
        <view style="font-size: 15px"
          >总消费积分：{{ countInfo.ExchangeTotal || 0 }}
        </view>
        <view style="font-size: 15px"
          >总消费金额：{{ countInfo.PriceTotal || 0 }}
        </view>
      </view>
      <image src="../static/user/order_list_top.png" />
    </view>
    <view class="tabs-box">
      <view
        v-for="item in tabsList"
        :key="item.value"
        @click="tabChange(item.value)"
      >
        <view class="text">{{ item.title }}</view>
        <view>{{ item.num }}</view>
        <view
          class="line"
          :class="{ lineColor: item.value === tabValue }"
        ></view>
      </view>
    </view>
    <view v-if="orderList.length > 0">
      <view class="order-card" v-for="(item, index) in orderList" :key="index">
        <view class="top">
          <view>{{ item.add_time.slice(0, 19) }}</view>
          <view style="color: red"
            >{{
              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 :src="itm.Goods.cover" />
            <view class="title">{{ itm.Goods?.name }}</view>
            <view class="right">
              <view>{{ itm.pay_price }}元</view>
              <view>{{ itm.pay_integral }}积分</view>
              <view>x{{ itm.number }}</view>
            </view>
          </view>
        </view>
        <view class="line"></view>
        <view v-if="item.status !== 0" style="text-align: right">
          <text>共{{ item.count }}件商品</text>,
          <text
            >实付款:{{ item.pay_type === 1 ? item.price : item.exchange }},{{
              item.pay_type === 1 ? "微信支付" : "积分支付"
            }}</text
          >
          <view class="line"></view>
        </view>
        <view class="btn">
          <nut-button
            v-if="item.status === 0"
            plain
            size="small"
            type="primary"
            @click="delOrder(item.oid)"
            >取消订单
          </nut-button>
          <nut-button
            style="margin-left: 5px"
            size="small"
            type="primary"
            @click="toDetail(item)"
            >查看详情
          </nut-button>
          <nut-button
            style="margin-left: 5px"
            size="small"
            type="primary"
            v-if="item.status === 0"
            @click="openPay(item)"
            >立即付款
          </nut-button>
        </view>
      </view>
    </view>
    <nut-empty v-else description="暂无订单"></nut-empty>
    <pay
      :isShowPay="isShowPay"
      :interval="false"
      :jfInfo="jfInfo"
      :OrderType="2"
      @errPay="errPay"
      @closePay="closePay"
    />
  </view>
</template>

<style lang="scss">
page {
  // IOS安全区域
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.topTips {
  box-sizing: border-box;
  width: 100%;
  background-color: #ff0000;
  color: #ffffff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  image {
    width: 150px;
    height: 150px;
  }
}

.tabs-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: auto;
  background-color: #fff;
  padding: 0 20px;
  text-align: center;

  .text {
    margin: 10px 20px;
    align-items: center;
  }

  .line {
    margin: 0 auto;
    width: 50px;
    height: 5px;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
  }

  .lineColor {
    background-color: #ff0000;
  }
}

.order-card {
  width: 95%;
  box-sizing: border-box;
  margin: 15px auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;

  .line {
    width: 100%;
    height: 1px;
    background-color: #f5f5f5;
    margin: 10px;
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .center {
    margin-bottom: 10px;
    .top {
      display: flex;
      justify-content: space-between;
      // align-items: flex-start;

      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
      }

      .title {
        margin-left: 10px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        width: 350px;
      }

      .right {
        margin-left: 10px;
        font-size: 28px;
        text-align: right;
      }
    }
  }
}
</style>
