<template>
  <view class="goods-detail">
    <view class="goods-detail-info">
      <text class="Gd-info-title">产品信息</text>
      <view v-for="(item, index) in skuDetailList" :key="index" class="Gd-info-content">
        <text>{{ item.attsName }}</text>
        <text>{{ item.attsValue }}</text>
      </view>
      <view v-if="skuDetailList.length" class="Gd-info-all" @click="goInfo">
        <text>查看全部</text>
        <text class="iconfont icon-arrow" />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    skuDetailList: {
      type: Array,
      default: () => []
    },
    skuDetailAtts: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    goInfo() {
      const that = this;
      uni.navigateTo({
        url: `/pages/product/info`,
        success: function(res) {
          res.eventChannel.emit("getDetailInfo", { data: that.skuDetailAtts });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.goods-detail {
  background: $white;

  padding: 20rpx 40rpx;
  &-imgs {
    width: 100%;
  }
  &-info {
    margin-bottom: 20rpx;
    // padding: 20rpx 0;

    .Gd-info-title {
      padding: 10rpx 0;
      font-size: $font-lg;
      color: $text-color-n5;
      font-weight: bold;
    }
    .Gd-info-content {
      display: flex;
      padding: $padding-md 0;
      &:last-child {
        padding-bottom: 0;
      }
      text {
        font-size: $font-sm;
        &:first-child {
          width: 140rpx;
          margin-right: $margin-md;
          color: $text-color-n1;
        }
        &:last-child {
          flex: 1;
          color: $text-color-n3;
        }
      }
    }
    .Gd-info-all {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      font-size: $font-sm;
      color: $text-color-n3;
      text {
        &:first-child {
          margin-right: 10rpx;
        }
        &:last-child {
          font-size: $font-sm;
          color: $text-color-n3;
        }
      }
    }
  }
}
</style>
