<template>
  <view class='content'>
    <view class='swiper-container'>
      <swiper class='swiper' :interval='1500' :duration='1000' @change='swiperChange'>
        <swiper-item v-for='(item,index) in bannerList' :key='index'>
          <image src='/static/images/test_bg.png' />
        </swiper-item>
      </swiper>
      <view class='indicator'>
        <text>{{ swiperIndex + 1 }}</text>
        <text>/{{ bannerList.length }}</text>
      </view>
    </view>

    <view class='goods-info-view c-flex-column'>
      <view class='c-flex-row'>
        <text class='goods-price accent-text-color'>39.89</text>
        <text>销量2653</text>
      </view>

      <view class='c-flex-row'>
        <text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装</text>
        <view class='share-button c-flex-column'>
          <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>共1种颜色可选</text>
      </view>
      <view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx' />
      <view class='c-flex-row' @click.stop='showSkuDialog'>
        <text>参数</text>
        <text>品牌 风格 季节 款号</text>
        <image :src='assetsUrl("ic_arrow_right_gray.png")' />
      </view>
    </view>

    <view class='recommend-view c-flex-column'>
      <text>浏览此商品的客户还浏览了</text>
      <scroll-view scroll-x>
        <view style='display: inline-block' v-for='(item, index) in [1, 2, 3, 4]'
              :key='index'>
          <view class='recommend-item c-flex-column'>
            <image :src='assetsUrl("test_bg.png")' />
            <text>女童夏装套装…</text>
            <text class='goods-price'>22</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class='goods-detail c-flex-column'>
      <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>12</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' />
</template>

<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import { goPath } from '@/utils';
import SkuDialog from '@/components/sku-dialog.vue';

const skuDialogRef = ref();

const bannerList = ref([1, 2, 3, 4]);
const swiperIndex = ref(0);

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

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

const showSkuDialog = () => {
  skuDialogRef.value.show();
};

const addShoppingCart = () => {
  uni.showToast({
    title: '加入购物车成功',
    icon: 'none'
  });
};

const placeOrder = () => {
  goPath('/pages/mall/subs/order/order-confirm');
};
</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) {
    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 {
      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: 0 30rpx;
  margin-top: 20rpx;

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

    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: 80rpx;
      left: 100rpx;
    }
  }

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

.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>
