<template>
  <div>
    <div class="flex">
      <el-table :data="tableObject.tableList" border style="flex: 1">
        <slot></slot>
      </el-table>
      <el-button
        ref="ColumnSetting"
        plain
        style="writing-mode: vertical-lr; height: 100px; letter-spacing: 2px"
        @click="clickSetting"
        >表格列控制</el-button
      >
      <el-popover
        ref="TableColumnPop"
        :virtual-ref="ColumnSetting"
        placement="left"
        width="120px"
        trigger="click"
        virtual-triggering
      >
        <el-checkbox-group v-model="checkedColumns">
          <el-checkbox v-for="item in tableColumns" :key="item.field" :label="item.field">
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-popover>
    </div>
    <!-- 分页 -->
    <Pagination
      v-model:limit="pageSize"
      v-model:page="currentPage"
      :total="tableObject.total"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  tableObject: { type: Object, default: () => ({ tableList: [] }) },
  tableColumns: { type: Array, default: () => [] }
})

const emit = defineEmits(['update:tableObject', 'getList'])

const currentPage = ref(props.tableObject?.currentPage || 1)

const pageSize = ref(props.tableObject?.pageSize || 20)

const ColumnSetting = ref()
const TableColumnPop = ref()

const checkedColumns = ref([])

function getList({ page, limit }) {
  emit('update:tableObject', { ...props.tableObject, currentPage: page, pageSize: limit })
  nextTick(() => {
    emit('getList')
  })
}

const clickSetting = () => {
  unref(TableColumnPop).TableColumnPop?.delayHide?.()
}
</script>

<style lang="scss" scoped></style>
