<template>
  <view class="flex flex-col items-center pt-[208px]">
    <back />
    <image class="h-[152px]" :src="par.header" />
    <view class="list mt-[30px]" v-if="data.length > 0">
      <view
        class="bg-white p-[20px] w-[700px] rounded-[20px] mb-[20px] flex"
        v-for="(item, index) in data"
        :key="index">
        <image
          class="w-[200px] h-[200px] rounded-[10px] mr-[10px]"
          :src="item.cover"></image>
        <view class="flex-1 flex flex-col justify-between">
          <nut-ellipsis
            style="font-size: 20px"
            direction="end"
            :rows="2"
            :content="item.name"></nut-ellipsis>
          <view>
            <view class="text-[#9E9E9E] text-[26px]"
              >剩余: {{ item.stock }}</view
            >
            <view class="flex justify-between items-end">
              <view>
                <view class="text-[#F83D3D] text-[30px] font-bold"
                  >{{ item.number }}元</view
                >
                <view class="text-[#F83D3D] text-[30px] font-bold"
                  >{{ item.exchange }}积分</view
                >
              </view>
              <nut-button type="primary" size="mini" @click="toPay(item)"
                >购买</nut-button
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <nut-empty
      class="mt-[130px]"
      v-else
      image="empty"
      description="暂时没有商品"></nut-empty>
  </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';

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

Taro.useLoad(e => {
  switch (e.type) {
    case '1':
      par.value = {
        header:
          'https://p0.meituan.net/csc/6229068017d3b199aafd9eed47bfd50513859.png',
      };
      break;
    case '2':
      par.value = {
        header:
          'https://p0.meituan.net/csc/ccfb8d3119200f81e2d6a5241081eb4b13797.png',
      };
      break;
  }
  par.value = {
    ...par.value,
    type: e.type,
  };
  getList();
});

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

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: Number(par.value.type),
  });
  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',
    });
    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">
@import './index.scss';
</style>
