<template>
  <el-descriptions
    :title="title"
    :column="column"
    :border="border"
    :size="size"
    :direction="direction"
    :extra="extra"
    :colon="colon"
    :labelClassName="labelClassName"
    :contentClassName="contentClassName"
  >
    <template #extra>
      <slot name="extra"></slot>
    </template>
    <el-descriptions-item
      v-for="(item, index) in items"
      :key="index"
      :label="item.label"
      :span="item.span"
      :labelClassName="item.labelClassName"
      :contentClassName="item.contentClassName"
    >
      <slot :name="item.slotName" v-if="item.slotName"></slot>
       <template v-else>
        <span :style="item.style">{{ item.value }}</span>
        <span class="zr-descriptions-icon-text" v-if="item.icon || item.text">
          <span v-if="item.icon" @click="item.iconClick">
            <i :class="item.icon" :title="item.iconTitle"></i>
          </span>
          <span :class="item.textClass" v-if="item.text" @click="item.textClick">
            {{ item.text }}
          </span>
        </span>
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
export default {
  name: 'ZrDescriptions',
  props: {
    title: {
      type: String,
      default: ''
    },
    column: {
      type: Number,
      default: 3
    },
    border: {
      type: Boolean,
      default: false
    },
    colon: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium'
    },
    direction: {
      type: String,
      default: 'horizontal'
    },
    extra: {
      type: String,
      default: ''
    },
    labelClassName:{
      type: String,
      default: ''
    },
    contentClassName:{
      type: String,
      default: ''
    },
    items: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
.zr-descriptions-icon-text{
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
}
</style>