<script>
export default {
  props: {
    height: {
      type: Number
    },
    list: {
      type: Array,
      default: () => []
    },
    tableItem: {
      type: Array,
      default: () => []
    },
    indent: {
      type: Number,
      default: 18
    },
    cellStyle: {
      type: Function,
      default: () => {
      }
    },
    rowStyle: {
      type: Function,
      default: () => {
      }
    },
    headerRowStyle: {
      type: Function,
      default: () => {
      }
    },
    headerCellStyle: {
      type: Function,
      default: () => {
      }
    },
    defaultExpandAll: {
      type: Boolean,
      default: true
    },
    expandRowKeys:{
      type: Array,
      default: ()=>[]
    },
    rowKey:{
      type:[String,Function],
      default:'id'
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    summaryMethod: {
      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
    },

    //  分页相关
    isPage: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number
    },
    pageSizeOpts:{
      type:Array,
      default:()=>[10, 20, 30, 40]
    },
    showSizer:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      tableHeight: 0,
      isShowPage: true
    }
  },
  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 - 25;
      that.tableHeight = tableHeight;
    },
    deleteClick(row) {
      this.$emit('delete', row)
    },
    editorClick(row) {
      this.$emit('editor', row)
    },
    selectClick(selection, row) {
      this.$emit('select', selection, row)
    },
    selectAllClick(selection){
      this.$emit('select-all',selection)
    },
    cellClick(row, column, cell) {
      this.$emit('cellClick', row, column, cell)
    },

    createPage() {
      if (this.isPage)
        return (
          <div>

            <transition
              enter-active-class="slide-in-bottom"
              leave-to-class="slide-out-down">
              <Page
                page-size-opts={this.pageSizeOpts}
                show-total={true}
                page-size={this.pageSize}
                v-show={this.isShowPage}
                total={this.total}
                size="small"
                show-elevator={true}
                show-sizer={this.showSizer}
                class="xy-table-page"
                on={{
                  ['on-page-size-change']: (e) => this.$emit('pageSizeChange', e),
                  ['on-change']: (e) => this.$emit('pageIndexChange', e)
                }}>
              </Page>
            </transition>
          </div>
        )
    },
    toggleRowSelection(row) {
      this.$nextTick(() => {
        this.$refs.table.toggleRowSelection(row);
      })
    },
    clearSelection() {
      this.$refs.table.clearSelection();
    },
    toggleAllSelection() {
      this.$refs.table.toggleAllSelection()
    }
  },
  created() {
    this.initLoad()
  },
  mounted() {
  },
  render(h) {
    let {
      createPage,
      summaryMethod,
      cellClick,
      btnWidth,
      selectClick,
      selectAllClick,
      height,
      createIndexRow,
      tableStyle,
      treeProps,
      showSummary,
      showHeader,
      $scopedSlots,
      showIndex,
      defaultExpandAll,
      headerCellStyle,
      headerRowStyle,
      rowStyle,
      cellStyle,
      indent,
      tableHeight,
      tableItem,
      list,
      rowKey,
      deleteClick,
      editorClick
    } = this
    return (
      <div class="table-tree" style={{'position': 'relative'}}>
        {tableItem && tableItem.length > 0 ?
          (<el-table
            ref="table"
            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}
            height={height ?? tableHeight}
            class="v-table"
            style={tableStyle}
            row-key={rowKey}
            border={true}
            default-expand-all={defaultExpandAll}
            tree-props={treeProps}
            fit={true}
            on={{
              ['select']: selectClick,
              ['cell-click']: cellClick,
              ['select-all']: selectAllClick}}>
              <el-table-column
                 type="index"
                 width="50" fixed="left" align="center" >
               </el-table-column>

            {
              tableItem.map((item, index) => {
                //自定义表格内容
                if (item.customFn) {
                  return (
                    <el-table-column
                      align={item.align ?? 'center'}
                      sortable={item.sortable ?? true}
                      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
                      header-align={item.headerAlign ?? 'center'}
                      label={item.label}>
                      {item.multiHd.map((item1, index1) => {
                        if (item1.customFn) {
                          return (
                            <el-table-column
                              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 ?? true}
                              scopedSlots={{
                                default(scope) {
                                  return item1.customFn(scope.row)
                                }
                              }}>
                            </el-table-column>
                          )
                        } else {
                          return (
                            <el-table-column
                              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 ?? true}
                              type={item1.type ?? ''}
                              formatter={item1.formatter}>
                            </el-table-column>
                          )
                        }
                      })}
                    </el-table-column>
                  )
                } else {
                  //默认内容
                  return (
                    <el-table-column
                      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 ?? true}
                      type={item.type}
                      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>
        {createPage()}
      </div>
    )
  }
}
</script>

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

::v-deep .el-table{
  margin-bottom: 0!important;
}
.xy-table-page {
  display: flex;
  justify-content: right;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background: rgba(140, 140, 140, 0.6);

  z-index: 10;
  padding: 6px 10px !important;
  position: relative;
  top: 0;
  left: 0;
  right: 0;

  &__close {
    cursor: pointer;
    border-radius: 100%;

    padding: 4px;
    z-index: 11;
    position: absolute;
    bottom: 2px;
    left: 8px;

    &:hover {
      transform: scale(1.1, 1.1);
    }
  }

  ::v-deep .ivu-page-item, .ivu-page-options {
    background: transparent !important;
  }

  ::v-deep .ivu-page-item a {
    color: #fff;
  }

  ::v-deep .ivu-page-item-active a {
    color: $primaryColor;
  }

  ::v-deep .ivu-page-total {
    color: #fff !important;
  }

  ::v-deep .ivu-page-options-elevator {
    color: #fff !important;
  }

  @media (max-width: 600px) {
    ::v-deep .ivu-page-options {
      display: none !important;
    }
  }

}

.slide-in-bottom {
  transform-origin: 0 100%;
  animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-bottom {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.slide-out-down {
  transform-origin: 0 100%;
  animation: slide-out-down 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-out-down {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}

.icon-scale-left {
  animation: icon-scale-left 0.5s forwards ease-out;
  @keyframes icon-scale-left {
    from {

    }
    to {
      clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%);
      background: rgba(140, 140, 140, 0.7);
      transform: scale(0.8, 0.8) translateX(-22px) translateY(-10px) rotate(-90deg);
    }
  }
}

.icon-recover {
  animation: icon-recover 0.5s forwards ease-out;
  @keyframes icon-recover {
    from {
      background: rgba(120, 120, 120, 0.8);
      transform: scale(0.8, 0.8) translateX(-30px) rotate(-90deg);
    }
    to {
    }
  }
}
</style>
