<template>
  <view class='content'>
    <view class='swiper-container'>
      <swiper class='swiper' :interval='1500' :duration='1000' @change='swiperChange'>
        <swiper-item v-for='(item,index) in [goodsBean?.images]' :key='index'>
          <image :src='item||defaultImage' mode='aspectFill' />
        </swiper-item>
      </swiper>
      <view class='indicator' style='display: none'>
        <text>{{ swiperIndex + 1 }}</text>
        <text>/{{ bannerList.length }}</text>
      </view>
    </view>

    <view class='goods-info-view c-flex-column' style='margin-right: 10rpx'>
      <view class='c-flex-row'>
        <text class='goods-price accent-text-color'>
          ¥{{ ((goodsBean?.price || 0) * userInfo.userDiscount).toFixed(2) }}
          <text v-if='userInfo.userDiscount>0&&userInfo.userDiscount<1'
                style='display:unset;text-decoration: line-through;font-size: 30rpx;color: #999999'>
            ¥{{ goodsBean?.price || 0 }}
          </text>
        </text>
        <text>销量{{ goodsBean?.salesCount || 0 }}</text>
      </view>

      <view class='c-flex-row'>
        <text style='flex: 1'>{{ goodsBean?.name || '未知' }}</text>
        <view class='share-button'>
          <image :src='assetsUrl("ic_share.png")'></image>
          <button class='btn' plain open-type='share'>分享</button>
        </view>
      </view>
    </view>

    <view class='goods-sku-view c-flex-column'>
      <view class='c-flex-row' @click.stop='showSkuDialog'>
        <text>选择</text>
        <text>规格 颜色/尺码</text>
        <image :src='assetsUrl("ic_arrow_right_gray.png")' />
        <text>共{{ getStockColorCount }}种颜色可选</text>
      </view>
      <view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx;display: none' />
      <view class='c-flex-row' style='display: none' @click.stop='showSkuDialog'>
        <text>参数</text>
        <text>品牌 风格 季节 款号</text>
        <image :src='assetsUrl("ic_arrow_right_gray.png")' />
      </view>
    </view>

    <view class='recommend-view c-flex-column' v-if='(recommendList?.length||0)>0'>
      <text>浏览此商品的客户还浏览了</text>
      <scroll-view scroll-x>
        <view style='display: inline-block' v-for='(item, index) in recommendList'
              :key='index'>
          <view class='recommend-item c-flex-column'>
            <image :src='item.images||defaultImage' />
            <text>{{ item.goodsName || '未知' }}</text>
            <text class='goods-price'>{{ (item.price * userInfo.userDiscount).toFixed(2) }}
              <text v-if='userInfo.userDiscount>0&&userInfo.userDiscount<1'
                    style='text-decoration: line-through;font-size: 25rpx;color: #999999'>{{ item.price }}
              </text>
            </text>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class='goods-detail c-flex-column' style='display: none'>
      <text>商品详情</text>
      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
    </view>

    <view class='bottom-view c-flex-row'>
      <view class='small-button-view' @click.stop='goBack'>
        <view class='small-button-item'>
          <image :src='assetsUrl("ic_goods_store.png")' />
          <text>商家</text>
        </view>

        <view class='small-button-item' @click.stop='goPath("/pages/mine/subs/order/index")'>
          <image :src='assetsUrl("ic_goods_order.png")' />
          <text>订单</text>
        </view>

        <view class='small-button-item'>
          <view class='shoppingcart-count' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
            <image :src='assetsUrl("ic_goods_shoppingcart.png")' />
            <text v-if='totalCount>0'>{{ totalCount }}</text>
          </view>
          <text>购物车</text>
        </view>
      </view>

      <view class='primary-button-view c-flex-row'>
        <view class='add-shoppingcart-button' @click.stop='addShoppingCart'>加入购物车</view>
        <view class='place-order-button' @click.stop='placeOrder'>立即下单</view>
      </view>
    </view>
  </view>
  <sku-dialog ref='skuDialogRef' :bean='goodsBean' />
</template>

<script lang='ts' setup>
import { assetsUrl, defaultImage } from '@/utils/assets';
import SkuDialog from '@/components/sku-dialog.vue';
import { goPath, showToast } from '@/utils';
import { getGoodsDetail, getGoodsList } from '@/api/goods';
import { GoodsBean } from '@/api/goods/types';
import useShoppingCartStore from '@/store/modules/shoppingcart';
import { useUserStore } from '@/store';

const shoppingCartStore = useShoppingCartStore();
const { totalCount } = storeToRefs(shoppingCartStore);

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const goodsBean = ref<GoodsBean>();
const recommendList = ref<GoodsBean[]>();

const skuDialogRef = ref();

const bannerList = ref([]);
const swiperIndex = ref(0);

onLoad(async (e: any) => {
  await uni.showLoading();
  goodsBean.value = await getGoodsDetail(e.goodsId);
  goodsBean.value.price = userStore.getRealGoodsPrice(goodsBean.value?.price, goodsBean.value?.priceExt);
  const { rows } = await getGoodsList({
    page: {
      page: 1,
      pageSize: 20,
      bean: {
        keyword: '',
        typeIds: []
      }
    }
  });
  recommendList.value = rows;
  recommendList.value?.forEach(e => {
    e.price = userStore.getRealGoodsPrice(e.price, e.priceExt);
  });
  uni.hideLoading();
});

onShareAppMessage((e) => {
  return {
    title: goodsBean.value?.name || 'VIP顾客中心',
    path: `/pages/common/groupbuy/detail?id=${goodsBean.value?.id}&companyId=${getApp().globalData?.companyId}&storeId=${getApp().globalData?.storeId}`
  };
});

const getStockColorCount = computed(() => {
  const list = Array.from(new Set(goodsBean.value?.stocks?.map(item => item.colorName)))
    .map(colorName => goodsBean.value?.stocks?.find(item => item.colorName === colorName)!);
  return list.length;
});

const swiperChange = (e: any) => {
  swiperIndex.value = e.detail.current;
};

const goBack = () => {
  uni.navigateBack();
};

const showSkuDialog = (fn: Function) => {
  skuDialogRef.value.show(goodsBean.value?.id, fn);
};

const addShoppingCart = () => {
  showSkuDialog((e: GoodsBean) => {
    const index = shoppingCartStore.getSameGoodsIndex(goodsBean.value?.id || '', e.checkedStock?.colorId, e.checkedStock?.sizeId);
    if(index >= 0) {
      shoppingCartStore.updateCount(index, e.checkedStock?.count);
    } else {
      shoppingCartStore.save(e);
    }
    showToast('加入购物车成功');
  });
};

const placeOrder = () => {
  showSkuDialog((e: GoodsBean) => {
    const orderBean = {
      totalPrice: (e.consumePrice * e.checkedStock.count).toFixed(2),
      orderGoods: [e]
    };
    goPath(`/pages/mall/subs/order/order-confirm?orderBean=${encodeURIComponent(JSON.stringify(orderBean))}`);
  });
};
</script>

<style lang='scss' scoped>
.content {
  padding-bottom: 200rpx;
}

.swiper-container {
  position: relative;

  .swiper {
    display: flex;
    width: 100%;
    height: 750rpx;

    image {
      width: 100%;
      height: 750rpx;
    }
  }

  .indicator {
    background: rgba(1, 1, 1, 0.5);
    border-radius: 45rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #FFFFFF;
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    padding: 5rpx 25rpx;

    text:nth-of-type(1) {
      font-size: 30rpx;
    }

    text:nth-of-type(2) {
      font-size: 24rpx;
    }
  }
}

.goods-info-view {
  background: #FFFFFF;
  padding: 20rpx 30rpx;

  view:nth-of-type(1) {
    display: flex;
    flex-direction: row;

    text:nth-of-type(1) {
      display: flex;
      font-size: 40rpx;
      text-align: center;
      align-items: flex-end;
      flex: 1;
    }

    .goods-price:before {
      //content: "¥";
      //font-size: 30rpx;
      //margin-bottom: 5rpx;
      //margin-right: 5rpx;
    }

    text:nth-of-type(2) {
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
    }
  }

  view:nth-of-type(2) {
    text {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      margin-right: 10rpx;
    }

    .share-button {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 36rpx;
        height: 32rpx;
      }

      .btn {
        background: #00000000;
        font-size: 24rpx;
        color: #636566;
        white-space: nowrap;
        padding: 0;
        border: none !important;
      }
    }
  }
}

.goods-sku-view {
  background: #FFFFFF;
  padding: 20rpx 30rpx;
  margin-top: 20rpx;

  view:nth-of-type(n+1) {
    position: relative;
    align-items: center;
    height: 85rpx;

    text:nth-of-type(1) {
      width: 100rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
    }

    text:nth-of-type(2) {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      flex: 1;
    }

    image {
      width: 13rpx;
      height: 24rpx;
    }

    text:nth-of-type(3) {
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      position: absolute;
      top: 50rpx;
      left: 100rpx;
    }
  }

  view:nth-of-type(1) {
    align-items: flex-start;
    //padding-top: 20rpx;
  }
}

.recommend-view {
  background: #FFFFFF;
  padding: 20rpx 30rpx;
  margin-top: 20rpx;

  text {
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
  }

  scroll-view {
    width: 100%;
    margin-top: 20rpx;
    white-space: nowrap;
    height: 300rpx;
  }

  .recommend-item {
    margin-right: 20rpx;

    image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 10rpx;
    }

    text:nth-of-type(1) {
      font-weight: bold;
      font-size: 28rpx;
      color: #333333;
      margin-top: 20rpx;
    }

    text:nth-of-type(2) {
      font-weight: bold;
      font-size: 28rpx;
      color: #F32B2B;
    }

    .goods-price:before {
      content: "¥";
      font-size: 28rpx;
    }
  }
}

.bottom-view {
  background: #FFFFFF;
  padding: 20rpx 30rpx 78rpx 33rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  .small-button-view {
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    margin-right: 35rpx;

    .small-button-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 34rpx;
        height: 34rpx;
        margin-bottom: 10rpx;
      }

      text {
        font-weight: 400;
        font-size: 20rpx;
        color: #333333;
      }

      .shoppingcart-count {
        display: flex;
        position: relative;

        text {
          display: flex;
          box-sizing: border-box;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: -15rpx;
          right: -20rpx;
          min-width: 35rpx;
          min-height: 30rpx;
          background: #F32B2B;
          color: #FFFFFF;
          padding: 2rpx;
          border-radius: 50%;
          border: 2rpx solid #FFFFFF;
        }
      }
    }
  }

  .primary-button-view {
    font-weight: bold;
    font-size: 30rpx;

    .add-shoppingcart-button {
      display: flex;
      width: 224rpx;
      height: 80rpx;
      align-items: center;
      justify-content: center;
      background: #FFE2E2;
      color: #F32B2B;
      border-radius: 40rpx 0 0 40rpx;
    }

    .place-order-button {
      display: flex;
      width: 198rpx;
      height: 80rpx;
      align-items: center;
      justify-content: center;
      background: #F32B2B;
      color: #FFFFFF;
      border-radius: 0 40rpx 40rpx 0;
    }
  }
}

.goods-detail {
  background: #FFFFFF;
  margin-top: 20rpx;

  text {
    margin: 20rpx 30rpx;
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
  }

  image {
    width: 100%;
  }
}
</style>
