<template>
  <el-descriptions v-bind="_buildProps()">
    <template v-for="(column, index) in columns">
      <el-descriptions-item v-if="showNullValue(column)" :key="index" :label="column.label">
        <slot :cellValue="cellValue(column)" :column="column" :index="index" :name="slotName(column)" :row="data">
          <ed-descriptions-item :column="column" :data="data" :index="index"></ed-descriptions-item>
        </slot>
      </el-descriptions-item>
    </template>
  </el-descriptions>
</template>

<script lang="jsx">
import EdDescriptionsItem from "./EdDescriptionsItem";
import lodashGet          from 'lodash/get'
import Props              from './Props'

export default {
  name: "EdDescriptions",
  components: {EdDescriptionsItem},
  props: Props,
  methods: {
    // 设置组件属性
    _buildProps() {
      return Object.assign({}, this.$attrs, this.$props)
    },
    // 获取字段名
    slotName(column) {
      return column.prop.includes('.') ? column.prop.split('.').pop() : column.prop
    },
    // 获取字段值
    cellValue(column) {
      return lodashGet(this.data, column.prop) || ''
    },
    // 是否显示空值
    showNullValue(column) {
      let cellValue = lodashGet(this.data, column.prop)
      return !this.showNull ? (cellValue !== undefined && cellValue !== null) : true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../style/index";
</style>
