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

<script>
export default {
  name: 'TableDoubleView',
  props: {
    title: String,
    keyValue: Object,
    data: Object,
    faIndex: {
      type: Number,
      default: 0
    },
    //title是否使用原本的样式
    keyClass: {
      type: Boolean,
      default: true
    },
    //传入自定义的title样式
    incomingKeyCls: Object,
    //value是否使用原本的样式
    valueCls: {
      type: Boolean,
      default: true
    },
    //传入自定义的value样式
    incomingValCls: Object,
    //传入自定义的Grid样式
    incomingGridCls: Object
  },
  datakey: '',
  datalength: 0,
  data() {
    return {
      maxWidth: document.body.clientWidth * 0.9 * 0.6,
      lineWidth: document.body.clientWidth * 0.9,
      flowerFlag: false
    };
  },
  activated() {
    this.datalength = Math.ceil((Object.keys(this.keyValue).length) / 2);
  },
  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;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.ValueCls {
  margin: 8px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.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;
}
</style>