<template>
    <view class="container">

      <view class="basic_info">

        <!-- 轮播图 -->
        <swiper
          class="swiperImage"
          :indicator-dots="true"
          :autoplay="true"
          :interval="4000"
          :duration="500"
        >
          <swiper-item

            v-for="(item, index) in carousel"

            :key="index"
          >
            <image
              :src="item"
              mode="scaleToFill"
            ></image>
          </swiper-item>
        </swiper>
        <!-- 产品价格及购买人数 -->
        <view class="info_pay">

          <view>￥{{goodsInfo.price || '暂无'}}<span
              v-if="goodsInfo.discountPrice"
              class="info_pay_discount"
            >¥{{goodsInfo.discountPrice}}</span></view>
          <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span>

        </view>
        <!-- 产品名称 -->
        <view class="info_name">

          <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text>
          <view class="info_name_share">
            <image src="/static/img/detail/share-icon.png"></image>
            <text>分享</text>
          </view>

        </view>
        <!-- 产品售后信息 -->
        <view class="info_after">
          <span>支持7天无理由退货</span>
          <span>顺丰发货</span>
          <span>30天质量保证</span>
        </view>
      </view>

      <view class="detail_info">
        <!-- 详细信息菜单 -->
        <view class="screen_bar">
          <view
            v-for="item in screenItems"
            :key="item.current"
            @click="tabChange(item.current)"
          >
            <view
              class="screen_item"
              v-bind:class="{ item_active: item_current === item.current }"
            >{{ item.text || '暂无' }}</view>
          </view>
        </view>
        <!-- 售后保障 -->
        <view
          class="screen_item"
          v-if="item_current === 2"
        >
          <AfterSails />
        </view>
      </view>

    </view>
  </template>
  
  <script>
  import store from '@/store'

  import AfterSails from './components/AfterSails'

  // import BottomSheet from '@/components/BottomSheet.vue'
  
  export default {

    components: {
      AfterSails,
    },

    data () {
      return {
        pid: 7, // 产品ID

        skId: undefined, // skuId
        // 详细信息菜单
        item_current: 0,
        screenItems: [
          { current: 0, text: '商品介绍' },
          { current: 1, text: '规格参数' },
          { current: 2, text: '售后保障' },
        ],

      }
    },
    onLoad({ pid = this.pid, sk_id: skId }) {
      this.pid = pid

      this.skId = skId

  
      // 获取产品详情
      this.getDetails({ pid, skId })
    },
    computed: {

      // 获取轮播图数据
      carousel() {
        return this.$store.state.details.carousel
      },
      // 商品基本信息
      goodsInfo() {
        return this.$store.state.details.goodsInfo
      },

    },
    methods: {
      // 获取产品详情
      getDetails({ pid, skId }) {

        store.dispatch('details/details', {

          pid,
          sk_id: skId,

        })
      },

      // 切换详细信息菜单
      tabChange (e) {
        if (this.current !== e) {
          this.item_current = e
        }

      },
    },
  }
  </script>
  
  <style lang="scss">
  .container {
    background-color: #f8f8f8;
    font-family: "PingFangSC-Regular";
    // 板块样式
    > view {
      background: #ffffff;
      margin-bottom: 10px;
      padding: 8px 20px 8px 20px;
      box-sizing: border-box;
    }

    // 基础信息板块
    .basic_info {

      // 轮播图
      .swiperImage {
        width: 684rpx;
        height: 480rpx;
        image {
          max-width: 100%;
          max-height: 100%;
          border-radius: 16rpx;
        }
      }
      // 产品价格及购买人数
      .info_pay {
        color: #eb5d3b;
        font-size: 18px;
        margin-top: 5px;
        font-family: "PingFangSC-Semibold";
        display: flex;
        justify-content: space-between;

        .info_pay_discount {
          text-decoration: line-through;
          margin-left: 8rpx;
          color: #999;
          font-size: 14px;
        }

        .info_pay_number {
          color: #999;
          font-size: 14px;
        }
      }
      // 产品名称
      .info_name {

        margin-top: 5px;

        display: flex;
        justify-content: space-between;
        .info_name_name {

          margin-right: 10px;

          font-size: 16px;
          font-family: "PingFangSC-Semibold";
          max-width: 592rpx;
        }
        .info_name_share {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          margin-top: 14rpx;
          > image {
            height: 40rpx;
            width: 40rpx;
          }
          > text {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #999;
            letter-spacing: -0.23px;
          }

        }
      }
      // 售后服务
      .info_after {
        font-size: 10px;
        color: #999;

        margin-top: 20rpx;

        > span {
          height: 14px;
          margin-right: 10px;
        }
      }
    }

    // 详细信息
    .detail_info {
      .screen_bar {
        width: 670rpx;
        margin-top: 20rpx;
        margin-bottom: 24rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #333333;
        transition: all 0.2s;
      }
      .item_active {
        border-bottom: 4rpx solid #ff6b4a;
      }
      .screen_item {
        font-size: 32rpx;
        color: #333333;
        display: flex;
        transition: all 0.2s;
      }
    }

  }
  </style>