<template>
  <view class="flex flex-col items-center pt-[208px]">
    <back />
    <image
      class="h-[800px] mb-[10px] w-full"
      src="https://pic.imgdb.cn/item/6697ac7bd9c307b7e95f3f39.png"
      mode="scaleToFill" />

    <view class="bg-white p-[20px] w-[700px] rounded-[20px]">
      <view class="flex flex-col" v-if="data.length > 0">
        <view class="mb-[20px] flex" v-for="(item, index) in data" :key="index">
          <image
            class="w-[200px] h-[200px] rounded-[10px] mr-[10px]"
            :src="item.cover"
            mode="scaleToFill" />
          <view class="flex-1 flex flex-col justify-between">
            <view>
              <nut-ellipsis
                direction="end"
                :rows="2"
                style="font-size: 20px"
                :content="item.name"></nut-ellipsis>
              <view class="flex items-center mt-[10px]">
                <view class="tag">直播摇球机</view>
                <view class="stock">剩余: {{ item.stock }}</view>
              </view>
            </view>

            <view
              class="flex justify-between items-center bg-[#FEF3F1] rounded-full w-full h-[70px] pl-[20px]">
              <view class="flex">
                <view class="text-[#F83D3D] text-[28px] font-bold"
                  >{{ item.number }}元</view
                >
                <view class="text-[#F83D3D] text-[28px] font-bold ml-[20px]"
                  >{{ item.exchange }}积分</view
                >
              </view>
              <nut-button type="primary" size="small" @click="toPay(item)">
                <view class="flex items-center">
                  <view class="pr-[5px] text-[28px]">购买</view>
                  <RectRight size="15" />
                </view>
              </nut-button>
            </view>
          </view>
        </view>
      </view>
      <nut-empty v-else image="empty" description="暂时没有商品"></nut-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import { getHdOrJfGoods, createActiveOrder } from '@/api/goods';
import { getUserPoint } from '@/api/admin';
import { addCart } from '@/api/cart';
import Back from '@/components/Back.vue';
import { RectRight } from '@nutui/icons-vue-taro';
import './index.scss';

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

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

const page = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
});

const getList = async () => {
  Taro.showLoading({
    title: '加载中',
  });
  const res = await getHdOrJfGoods({
    PageNum: page.value.page,
    PageSize: page.value.pageSize,
    type: 3,
  });
  data.value.push(...res.data.data);
  page.value.itemCount = res.data.total;
  Taro.hideLoading();
};

Taro.useReachBottom(() => {
  if (page.value.page < Math.ceil(page.value.itemCount / page.value.pageSize)) {
    page.value.page++;
    getList();
  }
});

const toPay = async item => {
  const tk = Taro.getStorageSync('token');
  if (!tk) {
    Taro.navigateTo({
      url: '/pages/users/login/index?isBack=1',
    });
    return;
  }
  await addCart({
    Bid: item.Store.bid,
    Gid: item.gid,
    Number: 1,
  });
  const user_info = Taro.getStorageSync('userInfo');
  const data = await getUserPoint({
    phone: user_info.data.phone,
    bid: item.Store.bid,
  });

  const res = await createActiveOrder({
    Bid: [item.Store.bid],
    custID: data.data.store_user_id,
  });

  Taro.navigateTo({
    url: `/pages/goods/pay/index?oid=${res.data.oid}&bid=${item.Store.bid}&OrderType=1`,
  });
};
</script>

<style lang="scss"></style>
