<script>
// 自定义内容的组件 实现element 自带render函数
const RenderSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const renderTooltip = first => {
      return h(
        'el-tooltip',
        {
          props: {
            placement: 'bottom-end',
            content: first[0].data.props.title
            // effect: 'light'
          }
        },
        first
      )
    }
    const renderPopver = other => {
      return h(
        'el-popover',
        {
          props: {
            placement: 'bottom-end',
            width: '100',
            trigger: 'hover',
            popperClass: 'table-popver'
          },
          class: 'table-popver',
          scopedSlots: {
            reference: () =>
              h('el-button', {
                props: {
                  size: 'mini',
                  type: 'text',
                  icon: 'el-icon-more'
                },
                class: 'normal-button'
              })
          }
        },
        other
      )
    }
    const params = {
      row: data.props.row,
      index: data.props.index
    }
    if (data.props.column) {
      params.column = data.props.column
    }
    if (params.column.isRedraw) {
      let content = data.props.render(h, params)
      let contentDiv = content.children
      if (contentDiv.length > 2) {
        console.log(content)
        // 切割掉第一个div
        const first = contentDiv.splice(0, 1)
        const other = contentDiv.splice(0, contentDiv.length)
        first[0].data.class = 'normal-button'
        first[0].data.props.type = null
        first[0].data.props.size = null
        other.forEach(item => {
          item.data.class = 'normal-button popver-button'
        })

        content.children = [renderTooltip(first), renderPopver(other)]
        return content
      } else {
        // const first = contentDiv.splice(0, contentDiv)

        contentDiv = contentDiv.map(item => {
          console.log(item)
          item.data.class = 'normal-button'
          item.data.props.type = null
          item.data.props.size = null
          return renderTooltip([item])
        })
        content.children = contentDiv
        return content
      }
      // let div =
    } else {
      return data.props.render(h, params)
    }

    // return data.props.render(h, params)
  }
}
export default {
  name: 'FormSlot',
  props: ['item', 'scope'],
  components: { RenderSlot },
  render() {
    let { item, scope } = this
    return (
      //   <el-form-item prop={`"${item.ruleName}"`} rules={item.rules}>
      <render-slot row={scope.row} render={item.render} index={scope.$index} column={item} />
      // </el-form-item>
      // </el-form>
    )
  }
}
</script>
