<template>
  <a-row type="flex" justify="center" align="top" class="detailContent">
    <a-col v-if="label !== ''" :title="label" :span="labelSpan" class="label">{{label}}：</a-col>
    <a-col v-else :title="label" :span="labelSpan" class="label" style="color:#fafafa">.</a-col>
    <a-col :span="textSpan" class="text">
      <!-- {{text}} -->
      <a-tooltip>
        <template slot="title">
          {{text}}
        </template>
        <template >{{text}}</template>
      </a-tooltip>
      <slot name='detailContent'></slot>
    </a-col>
  </a-row>
</template>

<script>

export default {
  name: 'DetailItem',
  props: {
    labelSpan: {
      type: Number,
      default: 10
    },
    textSpan: {
      type: Number,
      default: 14
    },
    label: {
      type: String,
      required: true
    },
    text: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      pointColor: ''
    }
  },
  computed: {
  },
  created(){
  },
  methods: {
  }
}
</script>
<style>
.detailContent { margin:1px ; font-size: 14px; line-height: 40px;border: 1px solid #ccc}
.detailContent  .label { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right:1px solid #ccc;
  background-color: #fafafa;
  text-align: right; color:rgba(0, 0, 0, 0.65);
}
.detailContent  .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px; 
  text-align: left;
  word-break:break-all;
}

</style>
