<template>
  <div
    style="padding: 20px 0px; display: flex"
    v-if="tableHeaderList.length > 0"
  >
    <div
      :style="
        ifShrink
          ? 'width:96%;height:30px;overflow: hidden;'
          : 'width:96%;height:auto;overflow: hidden;'
      "
    >
      <!-- width: 96%; -->
      <div
        v-for="(item, index) in tableHeaderList"
        :key="index"
        style="
          margin-right: 30px;
          display: inline-block;
          font-size: 16px;
          line-height: 40px;
        "
      >
        <span>{{ item.title }}</span
        >:
        <span>{{ item.value }}</span>
      </div>
    </div>

    <div class="shrink" @click="shrinkClick">
      <a href="javascript:void(0);"
        >{{ ifShrink ? "展开" : "收缩"
        }}<Icon :type="ifShrink ? 'ios-arrow-down' : 'ios-arrow-up'"
      /></a>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ifShrink: true,
    };
  },
  props: {
    tableHeaderList: {
      type: Array,
      default: [],
    },
  },
  methods: {
    shrinkClick() {
      this.ifShrink = !this.ifShrink;
      console.log(this.ifShrink);
    },
  },
  mounted(){console.log(this.tableHeaderList);}
};
</script>
<style>
.shrink {
  margin-top: 5px;
  font-size: 18px;
}
.shrink > a {
  color: #515a6e;
}
</style>