<template>
    <div class="syswin-table" style="position: relative;" :style="{height}">
        <!--筛选下拉-->
        <drag-set v-if="showDragSet" :listConf='columnList' @save="dragChange" />
        <el-table
            border
            stripe
            class="cusTable"
            :row-key="rowKey"
            :show-summary="showSummary"
            :summary-method="customSum ? getSummaries : getSummariesNum"
            ref="cusTable"
            height='100%'
            :indent="indent"
            :lazy="lazy"
            :load="load"
            :tree-props="treeProps"
            v-bind="attrs"
            :default-expand-all="defaultExpandAll"
            :expand-row-keys="expandRowKeys"
            @sort-change="handleSortChange"
            @selection-change="handleSelectionChange"
            @select-all="handleSelectAll"
            @select="handleSelect"
            @expand-change="handleExpandChange"
            @header-dragend="handleHeaderDragend"
        >
            <slot name="start"></slot>
            <el-table-column
                v-for="(item, index) in columnData"
                :key="item.prop + index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width || 'auto'"
                :min-width="item.minWidth"
                :fixed="item.fixed"
                :align="item.align"
                :sortable="item.sortable"
                :show-overflow-tooltip="item.tooltip"
                :resizable="item.resizable"
                :header-align="item.headerAlign"
            >
                <template #header>
                    <template v-if="!item.slotHeader">
                        <span v-if="!item.filterType">{{item.label}}</span>
                        <span v-else>
                            {{item.label}}
                            <!-- 多选 -->
                            <el-popover
                                v-if="item.filterType === 'multiple'"
                                placement="bottom"
                                :ref="`${item.prop}`"
                                v-model="item.visible"
                                trigger="click"
                                width="160">
                                <div style="max-height:300px;overflow: auto;">
                                    <el-checkbox-group v-model="item.value">
                                        <div class="filterItem" v-for="(x, index) in item.filters || []" :key="index" :title="x.label">
                                            <el-checkbox :label="x.value">{{x.label}}</el-checkbox>
                                        </div>
                                    </el-checkbox-group>
                                </div>
                                <div style="text-align: center;margin-top:10px">
                                    <el-button type="primary" size="mini" @click="item.visible = false;handleSearch(item)">确定</el-button>
                                    <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
                                </div>
                                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{'selected-color': item.value && item.value.length}" @click.stop=""></i>
                            </el-popover>
                            <!-- 日期选择 -->
                            <el-popover
                                v-else-if="item.filterType === 'daterange'"
                                placement="bottom"
                                :ref="`${item.prop}`"
                                v-model="item.visible"
                                trigger="click"
                                width="360">
                                <el-date-picker
                                    v-model="item.value"
                                    type="daterange"
                                    size="small"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                                <div style="text-align: center;margin-top:10px">
                                    <el-button type="primary" size="mini" @click="item.visible = false;handleSearch(item)">确定</el-button>
                                    <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
                                </div>
                                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{'selected-color': item.value && item.value.length}" @click.stop=""></i>
                            </el-popover>
                            <!-- 月份选择 -->
                            <el-popover
                                v-else-if="item.filterType === 'monthrange'"
                                placement="bottom"
                                :ref="`${item.prop}`"
                                v-model="item.visible"
                                trigger="click"
                                width="300">
                                <el-date-picker
                                    v-model="item.value"
                                    type="monthrange"
                                    size="small"
                                    range-separator="至"
                                    start-placeholder="开始月份"
                                    end-placeholder="结束月份">
                                </el-date-picker>
                                <div style="text-align: center;margin-top:10px">
                                    <el-button type="primary" size="mini" @click="item.visible = false;handleSearch(item)">确定</el-button>
                                    <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
                                </div>
                                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{'selected-color': item.value && item.value.length}" @click.stop=""></i>
                            </el-popover>
                            <!-- 输入框 -->
                            <el-popover
                                v-else-if="item.filterType === 'text'"
                                placement="bottom"
                                :ref="`${item.prop}`"
                                v-model="item.visible"
                                trigger="click"
                                width="160">
                                <el-input v-model="item.value" clearable size="small"></el-input>
                                <div style="text-align: center;margin-top:10px">
                                    <el-button type="primary" size="mini" @click="item.visible = false;handleSearch(item)">确定</el-button>
                                    <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
                                </div>
                                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{'selected-color': item.value}" @click.stop=""></i>
                            </el-popover>
                            <!-- 单选 -->
                            <el-popover
                                v-else-if="item.filterType === 'single'"
                                placement="bottom"
                                :ref="`${item.prop}`"
                                v-model="item.visible"
                                trigger="click"
                                width="160">
                                <div style="max-height:300px;overflow: auto;">
                                    <el-radio-group v-model="item.value">
                                        <div class="filterItem" v-for="(x, index) in item.filters || []" :key="index" :title="x.label">
                                            <el-radio :label="x.value">{{x.label}}</el-radio>
                                        </div>
                                    </el-radio-group>
                                </div>
                                <div style="text-align: center;margin-top:10px">
                                    <el-button type="primary" size="mini" @click="item.visible = false;handleSearch(item)">确定</el-button>
                                    <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
                                </div>
                                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{'selected-color': item.value || item.value === 0}" @click.stop=""></i>
                            </el-popover>
                        </span>
                    </template>
                    <!-- 自定义表头 -->
                    <slot v-else :name="item.slotHeader"></slot>
                </template>
                <template slot-scope="scope" >
                    <span v-if="!item.slotCell" :style="item.style" @click="handleColumnClick(scope.row, item)">
                        {{transContent(scope.row, item.prop) || '-'}}
                    </span>
                    <!--自定义表格内容-->
                    <slot v-else :name="item.slotCell" :row="scope.row" :index="scope.$index"></slot>
                </template>
            </el-table-column>
            <!-- 自定义表尾列 -->
            <slot name="end"></slot>
            <div slot="empty" class="empty" style="margin-top:22px;">
                <noData></noData>
            </div>
        </el-table>
        <div class="sum" v-if="customSum">
            <slot name="customSum"></slot>
        </div>
        <el-dropdown class="sum" @command="changeSumType" v-if="showSummary && data.length && !customSum">
            <span class="el-dropdown-link">
                {{totalText[sumType]}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="showPageSum" :command="0">分页合计</el-dropdown-item>
                <el-dropdown-item v-if="showChoiseSum" :command="1">选中合计</el-dropdown-item>
                <el-dropdown-item :command="2">全部合计</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>
<script>
import noData from './noData';
import dragSet from '../../drag-set';
import BigDataTable from './BigDataTable.js'

/** localStorage 列偏好版本：与 props.columns 合并，避免缓存覆盖新增列与代码侧列定义 */
const COLUMN_STORAGE_VERSION = 2

function migrateLegacyColumnArray (savedArr, devColumns) {
    const devPropSet = new Set(devColumns.map((c) => c.prop).filter(Boolean))
    const order = savedArr.map((c) => c.prop).filter((p) => p && devPropSet.has(p))
    const show = {}
    for (const item of savedArr) {
        if (item.prop && devPropSet.has(item.prop) && item.isShow !== undefined) {
            show[item.prop] = item.isShow
        }
    }
    return {
        order,
        show,
        resizedWidths: {}
    }
}

function parseColumnPrefs (raw, devColumns) {
    if (!raw) return null
    let parsed
    try {
        parsed = JSON.parse(raw)
    } catch {
        return null
    }
    if (Array.isArray(parsed)) {
        return migrateLegacyColumnArray(parsed, devColumns)
    }
    if (parsed && parsed.v === COLUMN_STORAGE_VERSION) {
        return {
            order: Array.isArray(parsed.order) ? parsed.order : [],
            show: parsed.show && typeof parsed.show === 'object' ? parsed.show : {},
            resizedWidths:
                parsed.resizedWidths && typeof parsed.resizedWidths === 'object'
                    ? parsed.resizedWidths
                    : {}
        }
    }
    return null
}

function mergeColumnsWithPrefs (devColumns, prefs) {
    if (!devColumns || !devColumns.length) return []
    if (!prefs) return devColumns.map((c) => ({ ...c }))
    const { order, show, resizedWidths } = prefs
    const mergedByProp = new Map()
    for (const devCol of devColumns) {
        const prop = devCol.prop
        mergedByProp.set(prop, {
            ...devCol,
            isShow: show[prop] !== undefined ? show[prop] : devCol.isShow,
            width:
                resizedWidths[prop] !== undefined && resizedWidths[prop] !== null
                    ? resizedWidths[prop]
                    : devCol.width
        })
    }
    const ordered = []
    const seen = new Set()
    const devPropOrder = devColumns.map((c) => c.prop)
    for (const prop of order) {
        if (mergedByProp.has(prop)) {
            ordered.push(mergedByProp.get(prop))
            seen.add(prop)
        }
    }
    for (const prop of devPropOrder) {
        if (!seen.has(prop)) {
            ordered.push(mergedByProp.get(prop))
            seen.add(prop)
        }
    }
    return ordered
}

export default {
    name: 'SyTable',
    props: {
        // 列表数据
        data: {
            type: Array,
            required: true,
            default: () => []
        },
        // 列表列
        columns: {
            type: Array,
            default: () => []
        },
        // 列表高度
        height: {},
        // 列表内容转换的方法
        transContent: {
            type: Function,
            required: true,
            default: () => {}
        },
        // 是否显示合计功能
        showSummary: {
            type: Boolean,
            default: () => false
        },
        // 是否显示选中合计： 默认不显示
        showChoiseSum: {
            type: Boolean,
            default: () => false
        },
        // 是否显示当前页合计： 默认显示
        showPageSum: {
            type: Boolean,
            default: () => true
        },
        // 自定义合计样式
        customSum: {
            type: Boolean,
            default: () => false
        },
        // 合计的处理方法
        getSummaries: {
            type: Function,
            default: () => {}
        },
        // 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
        rowKey: {
            type: String,
            default: () => ''
        },
        // 展示树形数据时，树节点的缩进
        indent: {
            type: Number,
            default: () => 16
        },
        // 是否懒加载子节点数据
        lazy: {
            type: Boolean,
            default: () => false
        },
        // 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息
        load: {
            type: Function,
            default: () => {}
        },
        // 渲染嵌套数据的配置选项
        treeProps: {
            type: Object,
            default: () => { return { hasChildren: 'hasChildren', children: 'children' }; }
        },
        // 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
        defaultExpandAll: {
            type: Boolean,
            default: () => false
        },
        // 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
        expandRowKeys: {
            type: Array,
            default: () => undefined
        },
        // 是否显示表格右上角设置功能，默认true
        showDragSet: {
            type: Boolean,
            default: () => true
        },
        // 合计信息
        sumInfo: {
            type: Object,
            default: () => {}
        },
        // 功能模块key唯一（应用内需区分不同表格时请保证唯一或使用 columnPrefsScope）
        nameKey: {
            type: String,
            default: () => ''
        },
        /**
         * 列偏好命名空间：避免不同页面共用相同 nameKey 时 localStorage 冲突。
         * 键名为 vsyswin_{columnPrefsScope}__{nameKey}
         */
        columnPrefsScope: {
            type: String,
            default: () => ''
        },
        // 合计功能保留小数位
        decimalNum: {
            type: Number,
            default: () => 2
        },
        virtual: Boolean
    },
    data () {
        return {
            totalText: {
                0: '分页合计',
                1: '选中合计',
                2: '全部合计'
            },
            columnList: [], // 表格列数据
            columnPrefs: {
                resizedWidths: {}
            },
            sumType: 2, // 合计类型 0：分页合计；1选中合计；2全部合计
            selection: [], // 当前选中表格数据
            fillData: [],
        };
    },
    components: {
        noData,
        dragSet
    },
    computed: {
        // 表格列数据
        columnData () {
            return this.columnList.filter((item) => item.isShow);
        },
        table () {
            return this.$refs.cusTable;
        },
        attrs() {
            if (this.virtual) {
                return {
                    data: this.fillData,
                    'row-style': this.fillrow
                }
            } else {
                return {
                    data: this.data,
                }
            }
        }
    },
    watch: {
        data: {
            handler(data) {
                if (this.virtual) {
                    this.reload()
                }
            },
            immediate: true
        },
        columns: {
            handler () {
                this.syncColumnsFromProps()
            },
            deep: true
        },
        nameKey () {
            this.syncColumnsFromProps()
        },
        columnPrefsScope () {
            this.syncColumnsFromProps()
        }
    },
    created() {
        this.getColumnsData(); // 获取表格列数据
    },
    mounted () {
        this.applyColumnFilterDefaults()
    },
    updated () {
        this.doLayout();
    },
    methods: {
        fillrow({
            row,
            rowIndex
        }) {
            if (rowIndex === 0) {
                return {
                    height: this.topSpan + 'px'
                }
            }
            if (rowIndex === this.fillData.length - 1) {
                return {
                    height: this.bottomSpan + 'px'
                }
            }
        },
        reload() {
            this.$nextTick(() => {
                console.log(this.$refs.cusTable, 353)
                if (!this.$refs.cusTable) return
                const ref = this.$refs.cusTable.$refs.bodyWrapper
                if (!this.tableControl) {
                    this.initBigDataTable(ref)
                } else {
                    this.tableControl.refresh()
                }
            })
        },
        // 初始化大数据表
        initBigDataTable(ref) {
            const options = {
            scrollerRef: ref,
            data: 'data', // length:50000
            fill_data: 'fillData',
            top_span: 'topSpan',
            bottom_span: 'bottomSpan',
            filldata_length: 33,
            table_item_height: 32
            }
            this.tableControl = new BigDataTable(this, options)
            console.log(this.fillData, 375)
        },
        getColumnStorageKey () {
            if (!this.nameKey) return ''
            const scope = (this.columnPrefsScope || '').trim()
            return scope
                ? `vsyswin_${scope}__${this.nameKey}`
                : `vsyswin_${this.nameKey}`
        },
        persistColumnPrefs () {
            if (!this.nameKey) return
            const props = new Set(this.columnList.map((c) => c.prop).filter(Boolean))
            const pruned = {}
            for (const key of Object.keys(this.columnPrefs.resizedWidths)) {
                if (props.has(key)) pruned[key] = this.columnPrefs.resizedWidths[key]
            }
            const payload = {
                v: COLUMN_STORAGE_VERSION,
                order: this.columnList.map((c) => c.prop),
                show: Object.fromEntries(
                    this.columnList.map((c) => [c.prop, !!c.isShow])
                ),
                resizedWidths: pruned
            }
            localStorage.setItem(this.getColumnStorageKey(), JSON.stringify(payload))
        },
        syncColumnsFromProps () {
            this.getColumnsData()
            this.applyColumnFilterDefaults()
        },
        applyColumnFilterDefaults () {
            for (const item of this.columnList) {
                if (item.visible === undefined) this.$set(item, 'visible', false)
                if (['multiple', 'daterange', 'monthrange'].indexOf(item.filterType) > -1) {
                    if (item.value === undefined) this.$set(item, 'value', [])
                } else if (['text', 'single'].indexOf(item.filterType) > -1) {
                    if (item.value === undefined) this.$set(item, 'value', '')
                }
            }
        },
        // 获取表格列数据（以 columns 为权威定义，localStorage 只存顺序 / 显示 / 用户拖拽宽度）
        getColumnsData () {
            const devColumns = Array.isArray(this.columns)
                ? this.columns.map((c) => ({ ...c }))
                : []
            if (!this.nameKey) {
                this.columnList = devColumns
                this.columnPrefs.resizedWidths = {}
                return
            }
            const raw = localStorage.getItem(this.getColumnStorageKey())
            const prefs = parseColumnPrefs(raw, devColumns)
            if (!prefs) {
                this.columnList = devColumns
                this.columnPrefs.resizedWidths = {}
                return
            }
            this.columnPrefs.resizedWidths = { ...prefs.resizedWidths }
            this.columnList = mergeColumnsWithPrefs(devColumns, prefs)
        },
        // 列表头宽度拉伸
        handleHeaderDragend (newWidth, oldWidth, column, event) {
            if (this.nameKey) {
                const prop = column.property
                for (const item of this.columnList) {
                    if (item.prop === prop) {
                        this.$set(item, 'width', newWidth)
                    }
                }
                if (prop !== undefined && prop !== null && prop !== '') {
                    this.$set(this.columnPrefs.resizedWidths, prop, newWidth)
                }
                this.persistColumnPrefs()
            } else {
                this.$emit('header-dragend', newWidth, oldWidth, column, event);
            }
        },
        // 点击表格内容
        handleColumnClick (row, column) {
            this.$emit('cell-click', row, column);
        },
        // 列表排序 value, row, column
        handleSortChange (params) {
            this.$emit('sort-change', params);
        },
        // 表格勾选事件
        handleSelectionChange (selection) {
            this.selection = selection;
            this.$emit('selection-change', selection);
        },
        // 当用户手动勾选全选 Checkbox 时触发的事件
        handleSelectAll (selection) {
          this.$emit('select-all', selection);
        },
        // 当用户手动勾选数据行的 Checkbox 时触发的事件
        handleSelect (selection, row) {
          this.$emit('select', selection, row);
        },
        // 表格行展开事件
        handleExpandChange (row, value) {
            this.$emit('expand-change', row, value);
        },
        // 合计类型转换
        changeSumType (type) {
            this.sumType = type;
        },
        doLayout () {
            this.$refs.cusTable.doLayout();
        },
        // 列表控制列表点击确定
        dragChange (list) {
            if (this.nameKey) {
                this.columnList = list;
                this.persistColumnPrefs()
            } else {
                this.$emit('drag-change', list);
            }
        },
        // 表头过滤筛选
        handleSearch (column) {
            this.$emit('filter-change', column);
        },
        // 表头过滤条件重置
        reset (column) {
            if (['multiple', 'daterange', 'monthrange'].indexOf(column.filterType) > -1) {
                column.value = [];
            } else if (['text', 'single'].indexOf(column.filterType) > -1) {
                column.value = '';
            }
            this.$emit('filter-change', column);
        },
        // 清空用户的选择，用于多选表格
        clearSelection () {
            this.$refs.cusTable.clearSelection();
        },
        // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        toggleRowSelection (row, selected) {
            this.$refs.cusTable.toggleRowSelection(row, selected);
        },
        // 用于多选表格，切换所有行的选中状态
        toggleAllSelection () {
            this.$refs.cusTable.toggleAllSelection();
        },
        // 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
        toggleRowExpansion (row, expanded) {
            this.$refs.cusTable.toggleRowExpansion(row, expanded);
        },
        // 用于清空排序条件，数据会恢复成未排序的状态
        clearSort () {
            this.$refs.cusTable.clearSort();
        },
        // 自定义合计方法
        getSummariesNum ({ columns, data }) {
            this.$nextTick(() => {
                this.doLayout();
            });
            const sums = [];
            columns.forEach((column, index) => {
                let values = data.map(item => Number(item[column.property]));
                if (this.sumType === 1) { // 当为选中合计时
                    values = this.selection.map(item => Number(item[column.property]));
                }
                // 判断当前列是否需要进行合计
                if (this.sumInfo[column.property] || this.sumInfo[column.property] === 0) {
                    if (this.sumType === 2) { // 当为全部合计时；使用传入的合计值
                        sums[index] = this.sumInfo[column.property];
                    } else {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                    }
                    sums[index] = (+sums[index]).toFixed(this.decimalNum);
                } else {
                    sums[index] = '';
                }
            });
            return sums;
        }
    },
};
</script>
<style lang="scss" scoped>
    .sum {
        position: absolute;
        margin-left: 10px;
        // width: 82px;
        font-size: 12px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: #F5F7FA;
        left: 1px;
        bottom: 1px;
        z-index: 4;
    }
    .filterItem {
        width: 100%;
        height: 30px;
        line-height: 30px;
        background: #fff;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .filter-icon {
        margin-top: 1px;
        float: right;
        font-size: 9px !important;
        cursor: pointer;
        color: rgba(0, 0, 0, .5);
    }
    .selected-color {
        color: #027AFF;
    }
    .el-button--primary {
        background-color: #027AFF;
        border-color: #027AFF;
    }
    // .el-button:hover {
    //     background: #027aff !important;
    //     color: #fff !important;
    //     border: 1px solid #027aff !important;
    // }
</style>
<style lang="scss">
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #027AFF;
    border-color: #027AFF;
}
.el-radio__input.is-checked .el-radio__inner {
    border-color: #027AFF;
    background: #027AFF;
}
// .el-input__inner {
//     height: 32px !important;
//     line-height: 32px !important;
//     border-radius: 2px !important;
//     box-sizing: border-box !important;
//     border-color: #D9D9D9 !important;
// }

.el-input__inner:hover {
    border-color: #D0D3D6!important;
}

.el-input.is-active .el-input__inner, .el-input__inner:focus {
    border-color: #4A8DF0!important;
}
.el-button--primary.is-plain {
    height: 20px!important;
    line-height: 18px!important;
    padding: 0 9px!important;
    background: none!important;
    border: 1px solid #4A8DF0!important;
    color: #4A8DF0!important;
    font-size: 12px;
}

.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
    background: #4184E7!important;
    color: #fff!important;
}

.el-button--primary.is-plain:active {
    background: #3070CF!important;
    color: #fff!important;
}

.syswin-table {
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    .el-table__empty-block {
        position: absolute!important;
        height: calc(100% - 60px)!important;
    }

    // .el-table::before {
    //     background: none!important;
    // }

    .el-table table {
        width: 100% !important;
    }

    .el-table__empty-block {
    width: 100% !important;
    }

    .el-table th {
    background: #F2F5F9 !important;
    padding: 3px 0!important;
    }

    .el-table td, .el-table th.is-leaf {
    border-right: 1px solid #D8D8D8;
    }

    .el-table th:first-child {
    padding: 0 !important;
    box-sizing: border-box;
    }

    .el-table th .cell {
        height: 34px !important;
        line-height: 34px !important;
        padding: 0 10px !important;
        box-sizing: border-box;
        min-width: 50px;
        overflow: hidden;
        text-overflow: clip;
        white-space: nowrap;
    }

    .el-table__footer .cell {
        padding: 0 10px !important;
        box-sizing: border-box;
        min-width: 50px;
        overflow: hidden;
        text-overflow: clip;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .el-table th:first-child .cell {
        padding: 0 10px !important;
        box-sizing: border-box;
    }

    .el-table td {
        padding: 7px 0!important;
    }

    .el-table tbody td {
        border-right: none;
    }

    .el-table tbody .hover-row>td {
        background: #DCE8F9 !important;
    }

    .el-table td:first-child {
        padding: 0 !important;
        box-sizing: border-box;
    }

    .el-table td:first-child .cell {
        padding: 0 10px !important;
        box-sizing: border-box;
    }

    .el-table th>.cell {
        font-size: 14px !important;
        font-weight: bold !important;
        color: rgba(0, 0, 0, 0.65) !important;
    }
    .el-table .sort-caret.ascending {
        border-bottom-color: rgba(0, 0, 0, .5) !important;
    }

    .el-table .sort-caret.descending {
        border-top-color: rgba(0, 0, 0, .5) !important;
    }

    .el-table .ascending .sort-caret.ascending {
        border-bottom-color: #027AFF !important;
    }

    .el-table .descending .sort-caret.descending {
        border-top-color: #027AFF !important;
    }

    .el-table__fixed-right::before, .el-table__fixed::before {
        height: 0;
    }
}
</style>
