<template>
  <view v-if="!detail.skuInfoVo" class="gg">
    <u-empty mode="data"></u-empty>
  </view>
  <view v-else class="gg">
    <u-navbar :border-bottom="false" :is-back="true" class="navbar"></u-navbar>

    <scroll-view class="gg-sv" scroll-y>
      <view class="gg-content">
        <!-- 商品轮播图 -->
        <block v-if="swiperList.length > 0">
          <u-swiper :height="500" :list="swiperList" indicator-pos="bottomRight" mode="number"></u-swiper>
        </block>

        <!-- 商品缩略图及属性还有价格购买数量的显示 -->
        <view class="u-flex u-type-info-light u-p-20 gg-content-price">
          <view class="u-p-r-20">
            <ListImgItem
                :showBottom="detail.skuInfoVo.skuType === 0 && detail.skuInfoVo.isNewPerson === 1"
                :showLeft="detail.skuInfoVo.skuType === 1"
                :showRight="false"
                :src="detail.skuInfoVo.imgUrl"
                height="120rpx"
                width="120rpx"
            ></ListImgItem>
          </view>
          <!-- 区别秒杀商品与一般商品的价格体系 -->
          <!-- 秒杀商品显示 -->
          <block v-if="detail.skuInfoVo.skuType === 1">
            <view>
              <view class="gg-content-price-current u-flex">
                <view>秒杀价格：￥{{ detail.seckillSkuVo.seckillSale }}</view>
                <view class="u-p-l-20">市场价格：￥{{ detail.skuInfoVo.marketPrice }}</view>
              </view>
              <view class="gg-content-price-limit">
                <view>
                  限购：{{ detail.seckillSkuVo.seckillLimit }}件 销售：{{ detail.seckillSkuVo.seckillSale }}件
                  库存：{{ detail.seckillSkuVo.seckillStock }}件
                </view>
                <view>
                  秒杀场次：{{ detail.seckillSkuVo.timeName }} 倒计时：
                  <u-count-down ref="seckillCountDown" :timestamp="seckillSeconds" @end="seckillEnd"></u-count-down>
                </view>
              </view>
            </view>
          </block>
          <!-- 普通商品显示 -->
          <block v-else>
            <view>
              <view class="gg-content-price-current u-flex">
                <view>当前价格：￥{{ detail.skuInfoVo.price }}</view>
                <view class="u-p-l-20">市场价格：￥{{ detail.skuInfoVo.marketPrice }}</view>
              </view>
              <view class="gg-content-price-limit">
                <view>限购数量：{{ detail.skuInfoVo.perLimit }}件</view>
              </view>
            </view>
          </block>
        </view>

        <!-- 商品名称 -->
        <view class="u-m-20 u-p-20 gg-content-container">
          <view class="u-flex">{{ detail.skuInfoVo.skuName }}</view>
        </view>

        <!-- 属性列表 -->
        <view v-if="detail.skuInfoVo.skuAttrValueList.length > 0" class="u-m-20 u-p-20 gg-content-container">
          <view v-for="skuAttrValueItem in detail.skuInfoVo.skuAttrValueList" :key="skuAttrValueItem.id"
                class="u-p-t-5">
            {{ skuAttrValueItem.attrName }}：{{ skuAttrValueItem.attrValue }}
          </view>
        </view>

        <!-- 活动规则 -->
        <view v-if="detail.activityRuleList.length > 0" class="u-m-20 u-p-20 gg-content-container">
          <view v-for="activityRuleItem in detail.activityRuleList" :key="activityRuleItem.id" class="u-p-t-5">
            {{ activityRuleItem.ruleDesc }}
          </view>
        </view>

        <!-- 售后与提货地址 -->
        <view class="u-m-20 u-p-20 gg-content-container">
          <view class="u-flex">
            <view class="u-font-sm u-m-r-20 u-type-info">售后无忧</view>
            <view class="u-font-sm u-m-r-20 u-flex-1">
              支持保价
              <text class="u-type-error">・</text>
              极速退款
              <text class="u-type-error">・</text>
              7天无理由退货
            </view>
            <u-icon class="u-m-r-20 u-type-info" name="arrow-right" size="24"></u-icon>
          </view>

          <view class="u-flex u-m-t-20">
            <view class="u-font-sm u-m-r-20 u-type-info">提货信息</view>
            <view class="u-font-sm u-m-r-20 u-flex-1">
              <view>
                现在下单，
                <text class="u-type-error">明天16:00可提货</text>
              </view>
              <view>提货点：{{ leaderAddressVo.takeName ? leaderAddressVo.takeName : '请设置提货点' }}</view>
            </view>
            <u-icon class="u-m-r-20 u-type-info" name="arrow-right" size="24"></u-icon>
          </view>
        </view>

        <!-- 商品详情图片清单 -->
        <view v-if="skuPosterList.length > 0" class="u-m-20 u-p-20 gg-content-container">
          <image v-for="skuPoster in skuPosterList" :key="skuPoster.id" :src="skuPoster.image"></image>
        </view>
        <u-gap height="30"></u-gap>
      </view>
    </scroll-view>

    <view class="gg-navigation">
      <view class="navigation">
        <view class="left">
          <view class="item" @click="gotoHome">
            <u-icon :color="$u.color['contentColor']" :size="40" name="home-fill"></u-icon>
            <view class="text u-line-1">首页</view>
          </view>
          <view class="item car">
            <u-badge v-if="skuId !== 0" :count="getProductSkuNum(skuId)" :offset="[-3, -6]" class="car-num"
                     type="error"></u-badge>
            <u-icon :color="$u.color['contentColor']" :size="40" name="shopping-cart-fill"></u-icon>
            <view class="text u-line-1">购物车</view>
          </view>

          <view v-if="detail.couponInfoList.length > 0" class="item car" @click="showCouponInfoList = true">
            <u-badge :count="detail.couponInfoList.length" :offset="[-3, -6]" class="car-num" type="error"></u-badge>
            <u-icon :color="$u.color['contentColor']" :size="40" name="gift-fill"></u-icon>
            <view class="text u-line-1">优惠券</view>
          </view>
        </view>
        <!-- 即将秒杀与加入购物车的显示 -->
        <view v-if="!seckillEnded" class="right u-p-r-10 u-flex">
          <!-- 即将开抢 -->
          <block v-if="getDetail.seckillSkuVo.timeStaus === 3">
            <view class="u-m-r-20 u-line-1  u-flex-1 u-text-center">场次:{{ getDetail.seckillSkuVo.timeName }}</view>
            <view class="buy-disabled btn u-line-1">即将开抢</view>
          </block>
          <!-- 加入购物车 -->
          <block v-else>
            <view class="u-m-r-20 u-line-1  u-flex-1">
              <AddToCart v-if="detail.skuInfoVo.id" :shopDetail="getDetail" :skuId="detail.skuInfoVo.id"></AddToCart>
            </view>
            <view class="buy btn u-line-1">立即购买</view>
          </block>
        </view>
        <!-- 秒杀结束显示 -->
        <view v-else class="right u-p-r-10 u-flex">
          <view class="u-m-r-20 u-line-1 u-flex-1"></view>
          <view class="buy-disabled btn u-line-1">秒杀结束</view>
        </view>
      </view>
    </view>

    <CouponInfoList :couponInfoList="detail.couponInfoList" :showCouponInfoList.sync="showCouponInfoList"
                    @getCouponInfo="getCouponInfo"></CouponInfoList>
  </view>
</template>

<script>
import {mapState, mapGetters} from 'vuex';

export default {
  data() {
    return {
      detail: {},
      skuId: 0,
      seckillSeconds: 0,
      seckillEnded: false,
      showCouponInfoList: false
    };
  },
  computed: {
    ...mapState('pickUpLocationModule', ['leaderAddressVo']),
    ...mapGetters('cartModule', ['getProductSkuNum']),
    // 轮播图的获取
    swiperList() {
      let lst = [];
      this.detail &&
      this.detail.skuInfoVo &&
      this.detail.skuInfoVo.skuImagesList.length > 0 &&
      this.detail.skuInfoVo.skuImagesList.forEach(item => {
        lst.push({
          image: item.imgUrl,
          title: item.imgName
        });
      });
      return lst;
    },
    // 商品详情海报图片列表
    skuPosterList() {
      let lst = [];
      this.detail &&
      this.detail.skuInfoVo &&
      this.detail.skuInfoVo.skuPosterList.length > 0 &&
      this.detail.skuInfoVo.skuPosterList.forEach(item => {
        lst.push({
          image: item.imgUrl,
          title: item.imgName
        });
      });
      return lst;
    },
    getDetail() {
      return {...this.detail.skuInfoVo, seckillSkuVo: this.detail.seckillSkuVo};
    }
  },
  methods: {
    async getHomeItemData(skuId) {
      let result = await this.$u.api.getHomeItem({skuId});
      this.detail = result;
      // skuInfoVo 商品信息
      // couponInfoList 优惠券信息
      // activityRuleList 活动信息

      // 如果是秒杀商品，需要计算倒计时秒数
      if (this.detail.skuInfoVo.skuType === 1) {
        const now = this.$dayjs();
        const endTime = this.$dayjs(this.$dayjs().format('YYYY-MM-DD') + ' ' + this.detail.seckillSkuVo.endTime);
        const seconds = endTime.diff(now, 'second');
        this.seckillSeconds = seconds;
      }
    },
    // 切换首页
    gotoHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
      return false;
    },
    // 秒杀倒计时结束
    seckillEnd() {
      this.seckillEnded = true;
    },
    // 领取优惠券
    async getCouponInfo(id) {
      try {
        const result = await this.$u.api.getCouponInfo({id});
        const pos = this.detail.couponInfoList.findIndex(item => item.id === id);
        this.$set(this.detail.couponInfoList[pos], 'couponStatus', 1);
      } catch (e) {
        console.error(e);
      }
    }
  },
  onLoad(options) {
    let skuId = +options.skuId;
    this.skuId = skuId;
    this.getHomeItemData(skuId);
  }
};
</script>

<style lang="scss">
.gg {
  height: 100%;

  &-sv {
    height: calc(100vh - 116rpx - 102rpx);
  }

  &-content {
    background-color: $u-bg-color;

    &-price {
      background: linear-gradient(to right, rgb(255, 180, 61), rgb(255, 101, 0));
    }

    &-container {
      z-index: 9999;
      background-color: #fff;
      border-radius: 25rpx;
    }
  }

  &-navigation {
    position: fixed;
    bottom: 0;
    width: 100%;

    .navigation {
      display: flex;
      border: solid 2rpx #f2f2f2;
      background-color: #ffffff;
      padding: 16rpx 0;
      justify-content: space-around;

      .left {
        display: flex;
        font-size: 20rpx;

        .item {
          margin: 0 30rpx;

          &.car {
            text-align: center;
            position: relative;

            .car-num {
              position: absolute;
              top: -10rpx;
              right: -10rpx;
            }
          }
        }
      }

      .right {
        width: 375rpx;
        display: flex;
        font-size: 28rpx;
        align-items: center;

        .btn {
          line-height: 50rpx;
          padding: 0 30rpx;
          border-radius: 36rpx;
          color: #ffffff;
        }

        .buy {
          background-color: #ff7900;
        }

        .buy-disabled {
          background-color: $u-type-info;
        }
      }
    }
  }
}
</style>
