<template>
  <div class="goods-prop-con">
    <div class="header flex-default">
      <m-icon icon="icon-goods-prop" :size="12" className="icon" />
      <div class="title">更多信息</div>
    </div>
    <div class="table-con" :style="{ maxHeight }">
      <table class="content" ref="propTable">
        <tr v-for="(item, index) of propList" :key="`prop-item-${index}`">
          <td class="prop-key">{{ item.name }}</td>
          <td class="prop-val">{{ item.val }}</td>
        </tr>
      </table>
    </div>
    <div class="collpase flex-default" @click="handleClick" v-show="showCollpase">
      <div class="text">{{ collpase ? "展开" : "收起" }}</div>
      <m-icon
        :class="collpase ? ['icon'] : ['icon', 'icon-rotate']"
        icon="icon-down"
        :size="9"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: String,
  },
  computed: {
    propList() {
      if (this.data) {
        return JSON.parse(this.data);
      }
      return [];
    },
    showCollpase() {
      if (this.$refs.propTable) {
        return this.$refs.propTable.offsetHeight > 200;
      }
    },
  },
  data() {
    return {
      maxHeight: "370rpx",
      collpase: true,
    };
  },
  methods: {
    handleClick() {
      this.maxHeight = this.collpase ? "999px" : "200px";
      this.collpase = !this.collpase;
    },
  },
};
</script>

<style lang="less">
.goods-prop-con {
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 15px 16px;
  .header {
    align-items: center;
    margin-bottom: 15px;
    .icon {
      margin-right: 4px;
    }
    .title {
      font-weight: bold;
      font-size: 12px;
      color: #140603;
    }
  }
  table,
  table tr th,
  table tr td {
    border: 1px solid #e8e8e8;
    color: #666666;
    height: 37px;
    font-size: 12px;
  }
  .table-con {
    overflow: hidden;
    // transition: max-height .3s;
  }
  .content {
    width: 100%;
    border-collapse: collapse;
    .prop-key {
      width: 104px;
      padding-left: 15px;
    }
    .prop-val {
      padding-left: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .collpase {
    margin-top: 15px;
    align-items: center;
    justify-content: center;
    .text {
      color: #666666;
      font-size: 12px;
      margin-right: 6px;
    }
    .icon {
      transition: transform 400ms;
    }
    .icon-rotate {
      transform: rotate(180deg);
    }
  }
}
</style>