<template>
  <div class="goods-detail">
    <div class="goods-detail-info">
      <div class="Gd-info-title">产品信息</div>
      <div v-for="(item, index) in skuDetailList" :key="index" class="Gd-info-content">
        <span>{{ item.attsName }}</span>
        <span>{{ item.attsValue }}</span>
      </div>
      <div v-if="skuDetailList.length" class="Gd-info-all" @click="goInfo">
        <span>查看全部</span>
        <span class="iconfont icon-arrow" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    skuDetailList: {
      type: Array,
      default: () => []
    },
    skuDetailAtts: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    goInfo() {
      this.$router.push({
        name: 'info',
        params: { data: this.skuDetailAtts }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.goods-detail {
  background: @white;
  padding: 0 @padding-sm - 2;
  margin-bottom: @padding-sm - 4;
  &-imgs {
    width: 100%;
  }
  &-info {
    .Gd-info-title {
      padding: @padding-sm + 4 0 @padding-unit;
      .text-size(18);
      color: @black;
      font-weight: bold;
    }
    .Gd-info-content {
      display: flex;
      padding: @padding-unit + 4 0 @padding-sm;
      span {
        .text-size(12);
        &:first-child {
          width: 62px;
          margin-right: @padding-xl - 4;
          color: @gray-4;
        }
        &:last-child {
          flex: 1;
          color: @gray-5;
        }
      }
    }
    .Gd-info-all {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: @padding-unit + 4 0 @padding-sm;
      width: 100%;
      .text-size(12);
      color: @gray-5;
      span {
        &:first-child {
          margin-right: @padding-x;
        }
        &:last-child {
          .text-size(12);
          color: @gray-4;
        }
      }
    }
  }
}
</style>
