<script>
export default {
  props:{
    highlightCurrentRow: {
      type: Boolean,
      default: false
    },
    height:{
      type:Number
    },
    list:{
      type:Array,
      default:()=> []
    },
    tableItem:{
      type:Array,
      default:()=> []
    },
    indent:{
      type:Number,
      default:18
    },
    expandRowKeys:{
      type: Array,
      default: ()=>[]
    },
    rowKey:{
      type:[String,Function],
      default:'id'
    },
    cellStyle:{
      type:Function,
      default:()=>{}
    },
    rowStyle:{
      type:Function,
      default:()=>{}
    },
    headerRowStyle:{
      type:Function,
      default:()=>{}
    },
    headerCellStyle:{
      type:Function,
      default:()=>{}
    },
    defaultExpandAll:{
      type:Boolean,
      default:true
    },
    showIndex:{
      type:Boolean,
      default:true
    },
    showHeader:{
      type:Boolean,
      default:true
    },
    showSummary:{
      type:Boolean,
      default:false
    },
    summaryMethod:{
      type:Function
    },
    objectSpanMethod:{
      type:Function
    },
    treeProps:{
      type:Object,
      default:()=> {
        return { children: 'children', hasChildren: 'hasChildren' }
      }
    },
    tableStyle:{
      type:Object,
      default:()=>{
        return { width: '100%', marginBottom: "20px"}
      }
    },

    btnWidth:{
      type:Number,
      default:190
    }
  },
  data() {
    return {
      tableHeight: 0,
    }
  },
  methods: {
    initLoad() {
      var that = this;
      var clientHeight = document.documentElement.clientHeight
      var lxHeader_height = 96.5; //查询 头部
      var paginationHeight = 37; //分页的高度
      var topHeight = 50; //页面 头部
      let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
      that.tableHeight = tableHeight;
    },
    deleteClick(row){
      this.$emit('delete',row)
    },
    editorClick(row){
      this.$emit('editor',row)
    },
    selectClick(selection, row){
      this.$emit('select',selection, row)
    },
    rowClick(selection, row){
      this.$emit('rowClick',selection, row)
    },
    cellClick(row, column, cell){
      this.$emit('cellClick',row, column, cell)
    },
    selectAllClick(selection){
      this.$emit('select-all',selection)
    },
    selectChange(selection){
      this.$emit('selection-change',selection)
    },
    createIndexRow(){
      return <el-table-column type="index" align="center" fixed="left"></el-table-column>
    },
    toggleRowSelection(row){
      this.$nextTick(()=>{
        this.$refs.table.toggleRowSelection(row);
      })
    },
    clearSelection(){
      this.$refs.table.clearSelection();
    },
    toggleAllSelection(){
      this.$refs.table.toggleAllSelection()
    },
    doLayout() {
      this.$refs['table'].doLayout();
    },
    toggleRowExpansion(row,expanded){
      this.$refs['table'].toggleRowExpansion(row,expanded)
    },
    getSelection(){
      return this.$refs.table?.store?.states?.selection ?? []
    },
  },
  created() {
    this.initLoad()
  },
  mounted() {
  },
  render(h) {
    let {highlightCurrentRow,rowKey,expandRowKeys,selectChange,selectAllClick,summaryMethod,cellClick,btnWidth,selectClick,height,createIndexRow,tableStyle,treeProps,showSummary,showHeader,$scopedSlots,showIndex,defaultExpandAll,headerCellStyle,headerRowStyle,rowStyle,cellStyle,indent,tableHeight,tableItem,list,deleteClick,editorClick,rowClick,objectSpanMethod} = this
    return (
      <div className="table-tree" style={{ 'position': 'relative' }}>
        {tableItem && tableItem.length > 0 ?
          (<el-table
            ref="table"
            size="small"
            span-method={objectSpanMethod}
            show-summary={showSummary}
            show-header={showHeader}
            summary-method={summaryMethod}
            header-row-style={headerRowStyle}
            header-cell-style={headerCellStyle}
            row-style={rowStyle}
            cell-style={cellStyle}
            indent={indent}
            data={list}
            highlight-current-row={highlightCurrentRow}
            expand-row-keys={expandRowKeys}
            height={height ?? tableHeight}
            className="v-table"
            style={tableStyle}
            row-key={rowKey}
            border={true}
            default-expand-all={defaultExpandAll}
            tree-props={treeProps}
            fit={true}
            on={{
              ['row-click']: rowClick,
              ['select']: selectClick,
              ['cell-click']: cellClick,
              ['select-all']: selectAllClick,
              ['selection-change']: selectChange,
              ['expand-change']: (row, expanded) => this.$emit('expand-change', { row, expanded })
            }}
          >
          <el-table-column
            fixed='left'
            align='center'
            width='60'
            type='index'
          >
          </el-table-column>
            {
              tableItem.map((item, index) => {
                //自定义表格内容
                if (item.customFn) {
                  return (
                    <el-table-column
                      fixed={item.fixed ?? false}
                      render-header={item.renderHeader ?? undefined}
                      align={item.align ?? 'center'}
                      sortable={item.sortable ?? false}
                      width={item.width ?? 'auto'}
                      min-width={item.minWidth ?? item.width}
                      header-align={item.headerAlign ?? 'center'}
                      label={item.label}
                      prop={item.prop}
                      scopedSlots={{
                        default(scope) {
                          return item.customFn(scope.row, scope)
                        }
                      }}
                    >
                    </el-table-column>
                  )
                } else if (item.multiHd) {
                  //二级表头结构表格内容
                  return (
                    <el-table-column
                      render-header={item.renderHeader ?? undefined}
                      header-align={item.headerAlign ?? 'center'}
                      label={item.label}
                    >
                      {item.multiHd.map((item1, index1) => {
                        if (item1.customFn) {
                          return (
                            <el-table-column
                              render-header={item1.renderHeader ?? undefined}
                              align={item1.align ?? 'center'}
                              header-align={item1.headerAlign ?? 'center'}
                              label={item1.label}
                              width={item1.width ?? 'auto'}
                              min-width={item1.minWidth ?? item1.width}
                              sortable={item1.sortable ?? false}
                              prop={`${item.Fprop ? item.Fprop + '.' : ''}${item1.prop}`}
                              scopedSlots={{
                                default(scope) {
                                  return item1.customFn(scope.row)
                                }
                              }}
                            >
                            </el-table-column>
                          )
                        } else {
                          return (
                            <el-table-column
                              render-header={item1.renderHeader ?? undefined}
                              fixed={item1.fixed ?? false}
                              align={item1.align ?? 'center'}
                              header-align={item1.headerAlign ?? 'center'}
                              prop={`${item.Fprop ? item.Fprop + '.' : ''}${item1.prop}`}
                              label={item1.label}
                              width={item1.width ?? 'auto'}
                              min-width={item1.minWidth ?? item1.width}
                              sortable={item1.sortable ?? false}
                              type={item1.type ?? ''}
                              formatter={item1.formatter}
                            >
                            </el-table-column>
                          )
                        }
                      })}
                    </el-table-column>
                  )
                } else {
                  //默认内容
                  return (
                    <el-table-column
                      render-header={item.renderHeader ?? undefined}
                      fixed={item.fixed ?? false}
                      formatter={item.formatter}
                      width={item.width ?? 'auto'}
                      min-width={item.minWidth ?? item.width}
                      header-align={item.headerAlign ?? 'center'}
                      align={item.align ?? 'center'}
                      label={item.label}
                      prop={item.prop}
                      sortable={item.sortable ?? false}
                      type={item.type}
                      reserve-selection={item.reserveSelection}
                      selectable={item.selectable}
                      scopedSlots={item.type === 'expand' ? {
                        default(props) {
                          return item.expandFn(props)
                        }
                      } : ''}
                    >
                    </el-table-column>
                  )
                }
              })}

            {
              $scopedSlots.btns ? $scopedSlots.btns() :
                (<el-table-column
                  fixed="right"
                  label="操作"
                  width={btnWidth}
                  header-align="center"
                  scopedSlots={{
                    default(scope) {
                      return (
                        <div>
                          <Poptip
                            transfer={true}
                            confirm
                            title="确认要删除吗"
                            on={{ ['on-ok']: () => deleteClick(scope.row) }}
                          >
                            <i-button
                              type="error"
                              size="small"
                              style="margin-left: 10px;"
                              ghost
                            >删除
                            </i-button>
                          </Poptip>

                          <i-button
                            type="primary"
                            size="small"
                            style="margin-left: 10px;"
                            ghost
                            onClick={() => editorClick(scope.row)}
                          >编辑
                          </i-button>
                        </div>
                      )
                    }
                  }}
                >
                </el-table-column>)
            }
          </el-table>)
          :
          <el-table height={height ?? tableHeight}/>}

        <el-backtop
          target=".el-table__body-wrapper"
          visibility-height={120}
          bottom={100}
          right={36}
        >
        </el-backtop>
      </div>
    )
  }
}
</script>

<style scoped lang="scss">

</style>
