<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">
      <a-tooltip>
        <template slot="title">
          {{text}}
        </template>
        <template v-if="text && text.length>0">{{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,
      default() {
        return ''
      }
    }
  },
  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>
