<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';
import {getUserPoint} from '@/api/admin';

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;
  Store: {
    bid: string;
  };
  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();
});

// Taro.startPullDownRefresh({
//   success: () => {
//     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();
  // Taro.stopPullDownRefresh();
};

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

const openPay = async (item: OrderList) => {
  isShowPay.value = true;
  const user_info = Taro.getStorageSync('userInfo');
  const data = await getUserPoint({
    phone: user_info.data.phone,
    bid: item.Store.bid,
  });
  jfInfo.value = {
    jh_info: data.data,
    oid: 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 successPay = () => {
  isShowPay.value = false;
  jfInfo.value = {};
  getList();
};

const toDetail = (item: any) => {
  Taro.navigateTo({
    url: `/pages/users/order_list_detail/index?orderId=${item.joint_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"
          :style="{
            color: tabValue === item.value ? '#000' : '#9C9C9C',
          }"
          >{{ 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"
        @click="toDetail(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 :src="itm.Goods.cover" />
            <view class="flex flex-col justify-between 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="line"></view> -->
        <view
          class="flex justify-between items-center mt-2 mb-2 text-[25px]"
          v-if="item.status !== 0"
          style="text-align: right">
          <text class="text-[#9C9C9C]">共{{ item.count }}件商品</text>
          <text
            >{{ item.status !== 0 ? '实' : '应' }}付款{{
              item.pay_type === 1 ? '(元): ' : '(积分): '
            }}{{ item.pay_type === 1 ? item.price : item.exchange }}</text
          >
          <!-- <view class="line"></view> -->
        </view>
        <view class="btn">
          <nut-button
            v-if="item.status === 0"
            plain
            size="mini"
            type="primary"
            @click="delOrder(item.oid)"
            >取消订单
          </nut-button>
          <!-- <nut-button
            style="margin-left: 5px"
            size="mini"
            type="primary"
            @click="toDetail(item)"
            >查看详情
          </nut-button> -->
          <nut-button
            style="margin-left: 5px"
            size="mini"
            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"
      @successPay="successPay"
      @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: 200px;
    height: 200px;
  }
}

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

  .text {
    // margin: 10px 20px;
    align-items: center;
    font-size: 25px;
  }

  .line {
    margin: 10px auto;
    width: 50px;
    height: 10px;
    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: 150px;
        height: 150px;
        border-radius: 15px;
        margin-right: 10px;
      }

      .title {
        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;
        color: #9c9c9c;
      }
    }
  }
}
</style>
