<script lang="ts" setup>
import { ref } from "vue";
import {
  useLoad,
  useReachBottom,
  showToast,
  navigateTo,
  setStorageSync,
} 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;
  BindGoods: {
    cover: string;
    name: string;
    number: number;
  };
  count: number;
  number: number;
}

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

useLoad((options) => {
  console.log(options);
  // tabValue.value = Number(options.type);
  getList();
});

const countInfo = ref<any>({});

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

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

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

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

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

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

// const successPay = (val: boolean) => {
//     isShowPay.value = val;
//     showToast({
//         title: "支付成功",
//         icon: "none",
//     });
//     jfInfo.value = {};
//     getList();
// };

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

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

const delOrder = async (oid: string) => {
  try {
    const res = await deleteActiveOrder({
      oid,
    });
    console.log(res);
    getList();
  } catch (error) {
    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.Total || 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).replace("T", " ") }}</view>
          <view style="color: red"
            >{{
              item.status === 0
                ? "待付款"
                : item.status === 1
                ? "待使用"
                : item.status === 2
                ? "已使用"
                : "已失效"
            }}
          </view>
        </view>
        <view class="line"></view>
        <view class="center">
          <view class="top">
            <image :src="item.BindGoods.cover" />
            <view class="title">{{ item.BindGoods.name }}</view>
            <view class="right">
              <view>{{ item.number }}</view>
              <!-- <view>x{{ item.count }}</view> -->
            </view>
          </view>
          <!-- <view
                        class="bom"
                        style="text-align: right; font-size: 13px"
                    >
                        共{{ item.count }}件商品,实付(元):
                        <text style="color: red">{{ item.number }}</text>
                    </view> -->
        </view>
        <view class="line"></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"
      payType="wx"
      @errPay="errPay"
      @closePay="closePay"
      :jfInfo="jfInfo"
    />
  </view>
</template>

<style lang="scss">
.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 {
    .top {
      display: flex;
      justify-content: space-between;
      // align-items: flex-start;

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

      .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>
