<!--  -->
<template>
  <span >
    <!-- v-if="$slots.header" -->
     <template v-if="getScopedSlots(cell,bodyCustomData)" >
         <slot v-if="$slots[getScopedSlots(cell, bodyCustomData)]"  :name="getScopedSlots(cell, bodyCustomData)">
           <!-- 若存在 scopedSlots.customRender 则使用 scopedSlots.customRender 作为插��名 -->
         </slot>
         <template v-else>
            {{getCellVal(cell,row, bodyCustomData, cellIndex, rowIndex)}}
        </template>
     </template>
    <template v-else>
        {{getCellVal(cell,row, bodyCustomData, cellIndex, rowIndex)}}
    </template>
  </span>
</template>

<script>
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'CellBox',
  components: {},
  props: {
    cell: { type: Object },
    row:{type:Object},
    bodyCustomData:{type:Object},
    cellIndex: { type: Number },
    rowIndex:{type:Number}
  },
  data() {
    // 这里存放数据
    return {};
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    getCellVal(cell,row, bodyCustomData, cellIndex, rowIndex){
        const {dataIndex} = cell
        const {scopedSlots,customRender} = bodyCustomData[dataIndex]
        const tempCellVal = row[dataIndex]
        let res = tempCellVal
        if(customRender){
            res = customRender(tempCellVal)
        }

        return res
    },
    getScopedSlots(cell, bodyCustomData){
        const {dataIndex} = cell
        const {scopedSlots,customRender} = bodyCustomData[dataIndex]
        let SlotsName = null
        if(scopedSlots && scopedSlots.customRender){
            SlotsName = scopedSlots.customRender
        }
        return SlotsName
    }
  },
  }
</script>
<style lang='less' scoped>
</style>