<template>
  <!-- 表格 -->
  <div class="tabBox">
    <el-table ref="multipleTableRef" cell-style-scoped v-loading="tableloading" fit element-loading-text="加载中..." stripe
      :height="tableHeight" :data="tableData" :show-summary="showSummary" :summary-method="getSummaries"
      :span-method="getSpanMethod" :highlight-current-row="highlightCurrentRow" style="width: 100%" border
      @sort-change="handleSortChange" @header-dragend="headerDragend" @row-click="rowClick"
      @selection-change="onSelectionChange">
      <el-table-column type="selection" width="55" v-if="props.isSelect" fixed :selectable="handleSelectTable" />
      <el-table-column type="index" label="序号" :width="sortWidth ? sortWidth : '55'" v-if="props.isSort" fixed>
        <template v-if="props.isCanSetColCfg" #header>
          <div class="flex align-center just-center pointer" @click="onSetConfig">
            <el-icon style="font-size: 20px">
              <Setting />
            </el-icon>
          </div>
        </template>
      </el-table-column>
      <!-- <template> -->
      <el-table-column v-for="column in tableCol" :key="column.prop" :label="column.title || column.label"
        :prop="column.prop" show-overflow-tooltip :fixed="column.fixed || false" :sortable="column.sortable || false"
        :width="column.prop == 'actions' ? actionsW : column.width">
        <template v-if="column.slot" #default="scope">
          <slot :name="column.prop" :row="scope.row" v-bind="scope" />
        </template>
        <!-- 默认 -->
        <template v-if="!column.slot && column.prop" #default="scope">
          {{ scope.row[column.prop] }}
        </template>
        <el-table-column v-if="column.suntab" v-for="it in column.suntab" :key="it.prop" :prop="it.prop"
          show-overflow-tooltip :label="it.title" tooltip :fixed="it.fixed || false" :sortable="it.sortable || false"
          :width="it.prop == 'actions' ? actionsW : it.width">
          <template #default="scope">
            <slot v-if="it.slot" :name="it.prop" :row="scope.row" v-bind="scope" />
            <span v-else>{{ scope.row[it.prop] }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <!-- </template> -->
    </el-table>
    <!-- 分页插槽 -->
    <slot name="fenye"></slot>
    <columCfg v-if="isShowColCfg" :columns="tableColumns" :cfgData="colSet" @close="isShowColCfg = false"
      @ok="colCfgOk" />
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, watch, ref, getCurrentInstance, nextTick, defineExpose, computed } from "vue"
import columCfg from "./components/columCfg.vue"
const props = defineProps({
  // 表格数据
  tableData: {
    type: Array,
    default: []
  },
  // 操作栏宽
  actionsW: {
    type: String,
    default: "250"
  },
  // 是否需要多选
  isSelect: {
    type: Boolean,
    default: false
  },
  // 是否需要排序
  isSort: {
    type: Boolean,
    default: false
  },
  // 标头数据
  tableColumns: {
    type: Array,
    default: []
  },
  // 页面标题
  pageTitle: {
    type: String,
    default: ""
  },
  // 组织机构树的筛选
  searchType: {
    type: String,
    default: "01"
  },
  // 表格加载
  tableloading: {
    type: Boolean,
    default: false
  },
  tableHeight: {
    type: String,
    default: "100%"
  },
  /** 是否展示总计 */
  showSummary: {
    type: Boolean,
    default: false
  },
  /** 序号宽度 */
  sortWidth: {
    type: String,
    default: undefined
  },
  /** 获取总计方法 */
  getSummaries: {
    type: Function,
    default: undefined
  },
  /** 是否可以设置列 */
  isCanSetColCfg: {
    type: Boolean,
    default: false
  },
  /** 列配置数据: 格式['userName', 'userAge'] */
  colSet: {
    type: Array,
    default: () => []
  },
  /** 合并单元格 */
  spanMethod: {
    type: Function,
    default: undefined
  },
  /** 是否可以被选择 */
  selectable: {
    type: Function,
    default: undefined
  },
  highlightCurrentRow: {
    type: Boolean,
    default: undefined
  }
})
const emits = defineEmits(["getDeptId", "SortChange", "headerDragend", "mounted", "colCfgChange", "rowClick", "selectionChange"])
const multipleTableRef = ref()
const isShowColCfg = ref(false)
const tableCol = computed(() => {
  if (!props.isCanSetColCfg) return props.tableColumns
  return props.colSet
    .map(item => {
      let find = props.tableColumns.find(col => {
        return col.prop === item
      })
      return find
    })
    .filter(col2 => col2)
})
const getSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (props.spanMethod) {
    return props.spanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    })
  }
}

const rowClick = (row, column, event) => {
  emits("rowClick", row, column, event)
}
const onSelectionChange = (val) => {
  emits("selectionChange", val)
}
const handleSelectTable = row => {
  if (typeof props.selectable === 'function') return props.selectable(row)
  return false
}
function handleSortChange({ column, prop, order }) {
  emits("SortChange", prop, order)
}
/** 头部拖拽 */
const headerDragend = () => {
  emits("headerDragend", multipleTableRef.value)
}
const onSetConfig = () => {
  // emits("onConfig")
  isShowColCfg.value = true
}
/**获取tableRef */
const getTableRef = () => {
  if (!multipleTableRef) return
  return multipleTableRef.value
}
onMounted(() => {
  emits("mounted", multipleTableRef.value, "tableinner")
})
/** 列配置修改 */
const colCfgOk = cfgArr => {
  emits("colCfgChange", cfgArr)
}
defineExpose({ getTableRef })
</script>

<style lang="scss" scoped>
.el-table__body-wrapper is-scrolling-left {
  border: none;
}

.tableAuto.el-table .cell {
  white-space: nowrap;
}

.el-table__row {
  line-height: 21px;
}

.el-table th,
.el-table td {
  padding: 4px 8px;
}

.el-table__body-wrapper is-scrolling-left .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabBox {
  // height: calc(100% - 80px);
  height: 100%;
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

  .fenye {
    position: static !important;
  }
}

.btn {
  padding: 10px;
  float: right;
}
</style>
