<template>
    <!-- 1.先判断是否常用类型
    2. 特殊列columned = true 插槽名称同展示字段名 -->
    <!-- ref="multipleTable"  //获取元素的标识
          :height="settings.height"//表格自定义高度
          v-loading="settings.isLoading"//数据加载动画
          @selection-change="(e) => handleClick('select', e)"//当选择项发生变化时会触发该事件
          highlight-current-row//高亮行
          @current-change="handleCurrentChange"//行发生变化时出发
          @cell-click="handleCellclick"//当某个单元格被点击时会触发该事件
          @select="handleSelect"//有勾选框单选
          @select-all="handleSelectall"//有勾选框全选
          :data="data.list"//表格展示数据
          style="width: 100%"//表格宽度
          row-key="id"//折叠表格必填项，行标识
          :expand-row-keys="settings.expandrowkeys"//需要展开行的数组
          :indent="0"//展开行缩紧
          default-expand-all//默认关闭展开行
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"//展开行设置，有children默认就有展开行 -->
    <div class="eltable">
        <el-table
            ref="multipleTable"
            :max-height="props.settings.height"
            v-loading="props.settings.isLoading"
            @selection-change="(e) => handleClick('select', e)"
            highlight-current-row
            @current-change="handleCurrentChange"
            @cell-click="handleCellclick"
            @select="handleSelect"
            @select-all="handleSelectall"
            :data="props.tableData"
            style="width: 100%"
            :border="props.settings.isBorder"
            :indent="32"
            :default-expand-all="props.settings.defaultExpandAll"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            :reserve-selection="props.settings.isSelection"
        >
            <!-- //固定勾选框列，按需设置settings -->
            <el-table-column v-if="props.settings.isSelection" width="55" type="selection" fixed></el-table-column>
            <!-- //固定排序列，按需设置settings -->
            <el-table-column v-if="props.settings.isIndex" type="index" :index="1" fixed label="序号" width="60"></el-table-column>
            <!-- //默认数据展示 -->
            <template v-for="item in props.header">
                <template v-if="item.prop !== 'action' && !item.columned">
                    <!-- type //selection/index/expand -->
                    <el-table-column
                        :key="item.prop"
                        :type="item.type"
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width"
                        :fixed="item.fixed"
                        :show-overflow-tooltip="true"
                        header-align="left"
                        class-name="cloumnCell"
                    ></el-table-column>
                </template>
                <slot v-if="item.columned" :name="item.prop"></slot>
            </template>
            <!-- //操作列之类的插槽 -->
            <slot name="action"></slot>
        </el-table>
        <!-- //翻页组件封装 -->
        <el-pagination
            v-if="props.settings.isPagination"
            background
            style="display: flex; justify-content: flex-end; padding: 25px 25px 25px 0; background: #fff; margin-top: 10px"
            @size-change="(e) => handleClick('pageSize', e)"
            @current-change="(e) => handleClick('currentPage', e)"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="props.settings.total"
        ></el-pagination>
    </div>
</template>

<script setup>
/* 传值说明:
          settings:{ 相关配置
              isLoading加载数据时显示动效
              height表格高度
              autoHeight:true 是否自动高度
              isSelection; 是否有多选
              selectionWidth多选的宽度
              isIndex 是否需要序列号,默认不需要
              isBorder:是否加框线,默认添加,
              isPagination:是否添加分页,默认false,
              total: 列表总条数
              currentPage 当前页数
          }
          tableData: { 表格数据}
          header:{表头字段
              columned 是否使用插槽
          }
      事件说明:
          handleClick
          参数 type 点击的类型,如
          选择select, 多选时
          编辑edit, 按钮为编辑时
          查看show, 按钮为查看时
          删除delete, 按钮为删除时
          当前条数pageSize, 开启分页时
          当前页数currentPage等 开启分页时
          e 选中项
          i 选中索引
      */
import { ref, reactive, onMounted, watch, computed, useAttrs } from 'vue';

const $attrs = useAttrs();
const emit = defineEmits(['select', 'pageSize', 'currentPage', 'currentChange', 'handleSelect', 'handleSelectall']);
const props = defineProps({
    tableData: {
        type: Array,
        default: () => {
            return [];
        },
    },
    header: { type: Array, required: true },
    settings: {
        type: Object,
        default: () => {
            return {
                height: null,
                isBorder: true,
                isLoading: false,
                isIndex: false,
                isSelection: false,
                isPagination: false,
                currentPage: 1,
                pageSize: 20,
                total: 0,
                defaultExpandAll: false,
            };
        },
    },
});
const multipleTable = ref(null);
watch(
    props.settings,
    (e) => {
        if (typeof e.isBorder === 'undefined') e.isBorder = true;
        if (typeof e.total === 'undefined') e.total = 0;
    },
    { immediate: true },
);

// watch(() => props.settings., () => {
//     debugger
//     props.tableData.map((item) => {
//         if (props.settings.expandrowkeys[0] != item.id) {
//             props.$refs.multipleTable.toggleRowExpansion(item, false);
//         } else {
//             props.$refs.multipleTable.toggleRowExpansion(item);
//         }
//     });
// })
const toggleSelection = (rows) => {
    if (rows) {
        rows.forEach((row) => {
            multipleTable.value.toggleRowSelection(row);
        });
    } else {
        multipleTable.value.clearSelection();
    }
};
const handleClick = (type, e) => {

    if (type == 'select') {
        emit('select', e);
    } else if (type == 'pageSize') {
        // 一页多少条
        emit('pageSize', e);
    } else {
        // 第几页
        emit('currentPage', e);
    }
};
const handleCurrentChange = (val) => {
    emit('currentChange', val);
};
// handleCellclick(row, column, cell, event) {//下面函数可包含参数
const handleCellclick = () => {
    // 切换选中状态
    // this.$refs.multipleTable.toggleRowSelection(row);
};
const handleSelect = (selection) => {
    // 勾选
    emit('handleSelect', selection);
};
const handleSelectall = (selection) => {
    // 全选
    emit('handleSelectall', selection);
};
</script>

<style scoped lang="less">
::v-deep(.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed) {
    border-right: 0 !important;
}
::v-deep(.el-table--border, .el-table--group) {
    border: 0 !important;
    height: 50%;
    overflow-y: auto;
    border-right: 0 !important;
}
::v-deep(.el-table--border::after, .el-table--group::after, .el-table::before) {
    background-color: transparent !important;
}
::v-deep(.el-table thead) {
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 900;
    color: #1d2129;
}

::v-deep(.el-table__fixed-right::before, .el-table__fixed::before) {
    height: 0px !important;
}

/* //关闭原生组件展开行按钮 */
.el-table .el-table__expand-icon {
    display: none;
}

/* //展开行样式单独设置 */
.el-table__row--level-1 {
    background-color: #f0edff;
}

/* //取消点击行配置 */
.el-table__body tr.current-row > td {
    background-color: #fff !important;
}

::v-deep(.el-table thead) {
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 900;
    color: #1d2129;
}

::v-deep(.el-table .cell) {
    font-size: 13px;
}

.eltable {
    background: white;
    padding: 10px 10px;
}
::v-deep(.is-leaf) {
    /* background: #f7f9fb !important; */
}
</style>
