<template>
  <view class="app">
    <view class="head-wrapper" :style="{top: BarHeight + 'px'}">
      <view class="head-menu">
        <Left class="iconfont" @click="returns" />
        <Home class="iconfont" @click="goHome" />
      </view>
    </view>
    <!--  幻灯片  -->
    <nut-swiper
      :init-page="0"
      :pagination-visible="true"
      pagination-color="#426543"
      auto-play="3000">
      <nut-swiper-item v-for="(itm, idx) in swiperList" :key="idx">
        <img :alt="idx.toString()" :src="itm" />
      </nut-swiper-item>
    </nut-swiper>
    <!-- 标题价格 -->
    <view class="card">
      <view class="flex items-center justify-between">
        <view class="flex items-center">
          <nut-price size="large" :price="goodInfo.number"></nut-price>
          <view class="ml-5 line"></view>
          <nut-price
            class="ml-5"
            size="large"
            :price="goodInfo.exchange"
            symbol="积分"></nut-price>
        </view>
        <nut-button
          size="small"
          type="primary"
          @click.stop="add_cart(goodInfo)">
          <template #icon>
            <Cart2 />
          </template>
        </nut-button>
      </view>
      <view class="flex items-center justify-between mt-3">
        <view class="title text-lg">{{ goodInfo.name }}</view>
        <view class="stock text-[#9E9E9E]"> 库存:{{ goodInfo.stock }}</view>
      </view>
      <view class="line1"></view>
      <view class="sub">{{ goodInfo.profile }}</view>
    </view>
    <!-- 商品详情 -->
    <view class="rich-box">
      <view class="title">-----商品详情-----</view>
      <rich-text
        v-if="goodInfo.details"
        class="rich"
        :nodes="goodInfo.details"></rich-text>
      <nut-empty v-else description="暂无商品详情"></nut-empty>
    </view>
    <view style="height: 9vh"></view>
    <!-- 底部 -->
    <!--  购物车  -->
    <Cart ref="cartRef" :mer-info="mer_info" @update-cart="updateCartNum" />
  </view>
</template>

<script setup lang="ts">
import {Ref, ref} from 'vue';
import Taro from '@tarojs/taro';
import {Home, Left} from '@nutui/icons-vue-taro';
import {getActiveGoodsDetail} from '@/api/goods';
import Cart from '@/components/Cart.vue';
import {Cart2} from '@nutui/icons-vue-taro';
import {nextTick} from 'vue';

const statusBarHeight = Taro.getSystemInfoSync()?.statusBarHeight;
const BarHeight = ref((statusBarHeight as number) + 7);

const swiperList = ref([]);

interface GoodInfo {
  gid?: string;
  name?: string;
  number?: number;
  exchange?: number;
  cover?: string;
  details?: string;
  sku?: any[];
  stock?: number;
  profile?: string;
  price?: number;
  cartNum?: number;
}

const goodInfo = ref<GoodInfo>({});

Taro.useLoad(async options => {
  await get_good_detail(options.gid);
  mer_info.value = Taro.getStorageSync('mer_info');
  await nextTick(async () => {
    await cartRef.value.get_cart_list();
  });
});

Taro.useShareAppMessage(() => ({
  title: `捷兑通-${goodInfo.value.name}`,
  path: `/pages/goods/goods_detail/index?gid=${goodInfo.value.gid}&type=1`,
  imageUrl: `https://${goodInfo.value.cover}`,
}));

const get_good_detail = async (gid: string) => {
  try {
    const res = await getActiveGoodsDetail({gid: gid});
    goodInfo.value = {
      ...res.data.data,
      // details: res.data.data.details.,
    };
    swiperList.value = res.data.data.rotation.split(',');
  } catch (e) {
    Taro.showToast({
      title: e.msg,
      icon: 'none',
    });
  }
};

const returns = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

const goHome = () => {
  Taro.switchTab({
    url: '/pages/index/index',
  });
};

interface CartItems {
  bid: string;
  gid: string;
  number: number;
  price: number;
  cover: string;
  name: string;
  exchange: number;
}

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

const cartRef = ref(null) as Ref;

const add_cart = async (item: any) => {
  const num = item.cartNum ? Number(item.cartNum) + 1 : 1;
  await nextTick(async () => {
    await cartRef.value.add_cart(item, num);
  });
};

const updateCartNum = (cartItems: CartItems[]) => {
  if (cartItems.length > 0) {
    cartItems.forEach((cartItem: CartItems) => {
      if (goodInfo.value.gid === cartItem.gid) {
        goodInfo.value.cartNum = cartItem.number;
      }
    });
  } else {
    Reflect.deleteProperty(goodInfo.value, 'cartNum');
  }
};
</script>

<style lang="scss">
page {
  --nut-cell-box-shadow: none;
  --nut-cell-title-font: 30px;
}

// sku遮罩
.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1 !important;
}

.head-wrapper {
  z-index: 999;
  display: flex;
  align-items: center;
  position: fixed;
  left: 30px;
  top: 0;
  height: 114px;
}

.head-menu {
  display: flex;
  align-items: center;
  height: 54px;
  width: 140px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 27px;

  .iconfont {
    flex: 1;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
  }
}

.nut-swiper-item img {
  width: 100%;
  height: 730px;
}

.card {
  padding: 30px;
  background-color: #fff;
  position: relative;
  border-radius: 30px;
  top: -60px;
  width: 95%;
  margin: auto;

  .sub {
    font-size: 30px;
    color: #999;
  }
}

.rich-box {
  background-color: #fff;
  margin-top: 20px;
  width: 100vw;
  box-sizing: border-box;
  text-align: center;
  padding: 15px 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

  .title {
    font-size: 30px;
    font-weight: bold;
    color: #333;
  }

  .rich {
    width: 100%;
  }
}

.nut-sku {
  // 适配ios底部安全区域
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.sku-box {
  padding: 100px 50px;
}

.bottom-box {
  border-top: 1px solid #e5e5e585;
  position: fixed;
  box-sizing: border-box;
  bottom: 0;
  height: 150rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // 适配ios底部安全区域
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
  width: 100%;

  .left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 300px;
    padding: 0 20px;
    box-sizing: border-box;

    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #333;
      font-size: 25px;
      width: 100px;
    }
  }

  .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 25px;
  }
}

.line {
  width: 1px;
  height: 30px;
  background-color: #8f8f8f;
}
.line1 {
  width: 100%;
  height: 1px;
  background-color: #F0F0F0;
  margin: 20px auto;
}
</style>
