<template>
  <view class="product">
    <text class="product-header">全部产品信息</text>
    <view v-for="(item, index) in goodInfo" :key="index" class="product-body">
      <text class="product-body-title">{{ item.groupName }}</text>
      <!-- <text class="product-body-title">{{item.groupAtts}}</text> -->
      <view v-for="(i, inde) in item.groupAtts" :key="inde" class="product-body-table">
        <text>{{ i.attsName }}</text>
        <text>{{ i.attsValue }}</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return { goodInfo: [] };
  },
  onLoad() {
    const eventChannel = this.getOpenerEventChannel();
    const that = this;
    eventChannel.on("getDetailInfo", function(info) {
      console.log("info", info.data);
      that.goodInfo = info.data;
      // this.$set(this.goodInfo, info.data)
    });
  }
};
</script>
<style lang="scss" scoped>
.product {
  padding: 40rpx;
  min-height: 100%;
  background: #fff;
  &-header {
    display: inline-block;
    padding-left: 20rpx;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 35rpx;
    color: #333333;
    background: #f7f7f7;
    border: 2rpx solid #ebebeb;
    border-bottom: 0;
  }
  &-body {
    &-title {
      display: inline-block;
      padding-left: 20rpx;
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      border: 2rpx solid #ebebeb;
      border-bottom: 0;
      font-size: 32rpx;
    }
    &-table {
      display: flex;
      text {
        display: inline-block;
        font-size: 24rpx;
        border: 2rpx solid #ebebeb;
        border-bottom: 0;
        &:first-child {
          display: flex;
          align-items: center;
          padding-left: 10rpx;
          width: 184rpx;
          color: #a3a3a3;
          border-right: 0;
        }
        &:last-child {
          padding: 10rpx;
          flex: 1;
          color: #717171;
        }
      }
    }
    &:last-child {
      .product-body-table {
        &:last-child {
          text {
            border-bottom: 2rpx solid #ebebeb;
          }
        }
      }
    }
  }
}
</style>
