<!-- 表格信息界面 -->
<template>
  <div class="tb-info displaydata">
    <div class="ValueCls" v-for="(value, key, index) of keyValue" :key="index">
      <div class="keyValueCls">{{ value }}：</div>
      <div class="dataInfoCls">{{ data[key] }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TableSingleView',
  props: {
    title: String,
    keyValue: Object,
    data: Object,
    faIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      maxWidth: document.body.clientWidth * 0.9 * 0.6,
      lineWidth: document.body.clientWidth * 0.9,
      flowerFlag: false
    };
  },
  methods: {
    //是否按文本域展示
    getNewline(value) {
      if (!value) return false;
      var chValue = value.match(/[\u4e00-\u9fa5]/g) ? value.match(/[\u4e00-\u9fa5]/g).join('') : '',
        onlineWidth = chValue.length * 14 + (value.length - chValue.length) * 7;
      return onlineWidth > this.maxWidth ? true : false;
    },
    //文本域是否超出展示区域
    getNewHeight(value) {
      if (!value) return false;
      var chValue = value.match(/[\u4e00-\u9fa5]/g) ? value.match(/[\u4e00-\u9fa5]/g).join('') : '',
        onlineWidth = chValue.length * 14 + (value.length - chValue.length) * 7;
      return onlineWidth / this.lineWidth > 2 ? true : false;
    }
  }
};
</script>

<style scoped lang="scss">
.displaydata {
  width: 100%;
  height: auto;
}
.ValueCls {
  padding: 8px 0;
  display: grid;
  grid-template-columns: 1fr 3fr;
}
.keyValueCls {
  width: 100%;
  color: #999999;
  text-align: right;
  font-size: 16px;
  white-space: nowrap;
}
.dataInfoCls {
  width: 100%;
  color: #333333;
  text-align: left;
  font-size: 16px;
  word-break: break-all;
}
</style>