<template>
  <el-table-column v-bind="propAttrs">
    <template v-if="propAttrs.slotHeader" #header="scopeHeader">
      <slot :name="propAttrs.slotHeader" v-bind="{
            ...scopeHeader,
            key: propKey,
            label: propAttrs.label,
            prop: propAttrs
          }">{{ propAttrs.label }}
      </slot>
    </template>
    <template slot-scope="scope">
      <slot v-if="propAttrs.slot" :name="propAttrs.slot" v-bind="{
            ...scope,
            key: propKey,
            label: propAttrs.label,
            value: scope.row[propKey],
            prop: propAttrs
          }">
        <span>{{ scope.row[propKey] }}</span>
      </slot>
      <span v-else>{{ scope.row[propKey] }}</span>
    </template>
    <template v-if="propAttrs.children">
      <mx-table-column v-for="(childProp, childKey) in propAttrs.children" :key="childKey" :prop="childProp">
      </mx-table-column>
    </template>
  </el-table-column>
</template>

<script>
export default {
  // TODO: hht, 22.4.11 需要实现跨组件传递slot, 才能使用该组件
  name: 'mx-table-column',
  props: {
    propKey: {
      type: String
    },
    propAttrs: {
      type: Object
    }
  }
}
</script>

<style scoped>

</style>
