<!--表格控件-->
<!--文档：-->
<!--props：看代码注释-->
<!--events-->
<!--行点击：row-click，参数{row, index}-->
<!--单元格点击：cell-click，参数{column,row,index}-->
<!--可编辑单元格值改变(暂只支持文字编辑框)change：参数{column,row,rowIndex}-->


<template>
<div>
    <mu-data-table
            class="lj-grid-data-table"
            stripe
            :columns="visibleColumns"
            :data="tableData"
            :loading="loading"
            @row-click="handleRowClick"
            border
            :auto-expand="false"
            :fit="false"
            :hover="tableHover"
            :row-style="rowStyle"
            :height="height"
            :no-data-text="emptyText">
        <!-- <template slot="th" slot-scope="column">
            <header-cell :column="column" :class="{'lj-grid-editable-cell':column.editable||column.sloteditable}"/>
        </template> -->
        <template slot="header" slot-scope="column">
            <header-cell :column="column.columns" :class="{'lj-grid-editable-cell':column.editable||column.sloteditable}"/>
        </template>
        <template slot-scope="scope" v-if="!ifHideProp || !scope.row[ifHideProp]">
            <td v-for="(column,index) in visibleColumns" :style="column.cellStyle" :class="{'sticky-left': column.sticky > 0, 'sticky-right': column.sticky < 0}" :key="index">
                <content-cell
                        :row="scope.row"
                        :column="column"
                        :row-index="scope.$index"
                        :editing="editing"
                        @clear="$emit('content-cell-clear',$event)"
                        @change="$emit('content-cell-change',$event)"
                        @inputfocus="$emit('inputfocus',$event)"
                        @inputblur="$emit('inputblur',$event)"
                        @inputkeydown="$emit('inputkeydown',$event)"
                        @touchstart.native="handleTouchStart({column:column,row:scope.row,index:scope.$index})"
                        @click.native="handleClick({column:column,row:scope.row,index:scope.$index})"
                        :style="scope.row.cellStyle"/>
            </td>
        </template>
        <template slot="footer" slot-scope="column" v-if="tableData.length > 0">
            <slot name="table-footer" :column="column.columns" :data="tableData" :columnMap="columnMap"></slot>
        </template>
    </mu-data-table>

    <lj-quick-enter
        v-if="quickEnterName"
        ref="quickEnter"
        :table-name="quickEnterName"
        :direction="quickEnterDirection"
        :propertyName="quickEnterProperty"
        @confirm="autoQuickEnter"
    ></lj-quick-enter>
</div>
</template>

<script>
    import {DataTable} from 'muse-ui'
    import LjQuickEnter from "./lj-quick-enter";

    export default {
        name: "lj-grid",
        props: {
            //Table 的高度，默认为自动高度
            height: {
                // default: "auto"
            },
            tableData: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            // 列配置
            columns: {
                type: Array,
                default: function () {
                    return [
                        // ！！！维护时尽量做到与lj-dictionary的column配置定义相同！！！
                        // {
                        //     label: 表头名称(支持\r\n换行)
                        //     property: 字段
                        //     properties: 多重字段，用于同一列显示多个字段（暂只支持不可编辑文本列）
                        //     filtable:是否支持过滤
                        //     editable: 是否可编辑(受editing限制)
                        //     alwaysEditable: 常态可编辑(不受editing限制)
                        //     cellEditingCall(row,column,rowIndex):具体单元格是否可编辑，需配合editable使用（声明此回调将会覆盖table.editing的判断）
                        //     type: 编辑的类型(selection、number,默认文本，pic,ifbox(判断是否，显示为交叉和对勾,传入数据为0或1))
                        //     cellAlign: 默认number为right，其余center
                        //     width: 对应列的宽度
                        //     invisible: 不可见
                        //     fixed: 固定列（Boolean）
                        //     renderHeader(h, {museColumn}): 自定义表头，设计时参考ElementUI的Table组件的renderHeader属性，使用时也可参考本文件的默认表头设置
                        //     slot(h, {row, column, rowIndex})：自定义单元格，可参考本文件content-cell的默认样式
                        //     sloteditable:自定义单元格，头部是否为可编辑状态的蓝色，true/false
                        //     cellStyle: 单元格样式Object
                        //     headerType: 表头类型(selection:显示复选框，与column.checked绑定)
                        //     showCounter: 显示计数footer（待开发）
                        //     showSummary: 显示汇总footer（待开发）
                        //     icon: type为pic时，图标显示名
                        //     readflag: 对应属性字段
                        //     readflagColor: （有后台控制，接口的字段名称）当readflag为0时的显示颜色，默认显示为蓝色
                        //     readflagColor0: 当readflag为0时的显示颜色，默认显示为蓝色
                        //     readflagColor1: 当readflag为1时的显示颜色，默认显示为红色
                        //     textColor: 显示颜色
                        // }
                    ];
                }
            },
            // 是否正在加载状态（只是动画开关）
            loading: {
                type: Boolean,
                default: false
            },
            // 是否正在编辑状态（true时editable的字段才可编辑）
            editing: {
                type: Boolean,
                default: false
            },
            // 快捷输入的缓存名称, 默认：不引用
            quickEnterName: {
                type: String,
                default: ''
            },
            // 快捷输入的默认录入方向
            quickEnterDirection: {
                type: String,
                default: 'vertical'
            },
            // 快捷输入字段名
            quickEnterProperty: {
                type: String,
                default: ''
            },
            //行样式自定义函数
            rowStyle: {
                type: Function,
                default: function() {
                    return {height:'32px'}
                }
            },
            // 是否隐藏行数据名
            ifHideProp: {
                type: String,
                default: ''
            },
            // 是否显示鼠标悬浮在行上的样式
            tableHover: {
                type: Boolean,
                default: false
            }
        },
        created() {
            this.computeColumnSetting();
        },
        mounted() {
            this.computeTableDateSort();
        },
        data() {
            return {
                // tableData: this.data,
                // property-columnObject字典，用于LJColum对象的查找
                columnMap: new Map(),
                showSummary: false,
                sortArray: [],
                defaultSortColumn: null,
                currentIndex: -1
            }
        },
        methods: {
            fnScrollX() {
                setTimeout(() => {
                    this.$nextTick(() => {
                        let overElement = "";
                        let oTableBody = document.querySelector(".lj-grid-data-table .mu-table-body-wrapper" ) || null;
                        let oTableFooter = document.querySelector(".lj-grid-data-table .mu-table-footer-wrapper") || null;
                        console.warn(' oTableBody :>>>>>>>>>>>>>>>>>>>>>', oTableBody);
                        console.warn(' oTableFooter :>>>>>>>>>>>>>>>>>>>>>', oTableFooter);
                        if (oTableBody) {
                            oTableBody.ontouchstart = () => {
                                overElement = "body";
                                console.log(' overElement AA:>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(overElement));
                            };
                            // AA && AA.removeEventListener("scroll");
                            oTableBody.addEventListener("scroll", () => {
                                if (overElement === "body" && oTableFooter) {
                                    oTableFooter.scrollLeft = oTableBody.scrollLeft;
                                }
                            });
                        }
                        if (oTableFooter) {
                            oTableFooter.ontouchstart = () => {
                                overElement = "footer";
                                console.log(' overElement BB:>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(overElement));
                            };
                            // BB && BB.removeEventListener("scroll");
                            oTableFooter.addEventListener("scroll", () => {
                                if (overElement === "footer") {
                                    oTableBody.scrollLeft = oTableFooter.scrollLeft;
                                }
                            });
                        }
                    })
                }, 200);
            },
            handleClick({column, row, index}) {
                // if (column.editable && this.quickEnterName) {
                //     this.$refs.quickEnter && this.$refs.quickEnter.close();
                //     return;
                // }
                this.currentIndex = index;
                this.$emit('cell-click',{column:column, row:row, index:index})
            },
            handleTouchStart({column, row, index}) {
                if (this.quickEnterName && this.editing && column.editable) {
                    let self = this;
                    api.addEventListener({
                        name:'longpress'
                    }, function(ret, err){
                        self.$refs.quickEnter.show({column, row, index}, self.tableData, self.columns);
                        
                        setTimeout(() => {
                            api.removeEventListener({
                                name: 'longpress'
                            });
                        }, 200);
                    });
                }
                this.$emit('cell-touchstart',{column:column, row:row, index:index});
            },
            // 快捷录入功能回调
            autoQuickEnter(colOrNot, inputArr, list) {
                console.log('返回成功！！！ :>>');
                for (let i = 0; i < list.length; i++) {
                    let index = list[i].index;
                    let property = list[i].id;
                    this.$set(this.tableData[index], property, list[i].value);
                }

                this.$refs.quickEnter.enterDone();
            },
            fnSumStickWidth(arr, index, reverse) {
                let length = reverse ? arr.length : index;
                let sum = 0;
                if (reverse) {
                    for (let i = length - 1; i > index; i--) {
                        sum += Number(arr[i])
                    }
                } else {
                    for (let i = 0; i < length; i++) {
                        sum += Number(arr[i])
                    }
                }
                return sum
            },
            computeColumnSetting() {
                let self = this;
                let length = this.columns.length;
                let arrStickyLeft = [];
                let arrStickyRight = [];
                for (let i = 0; i < length; i++) {
                    if (this.columns[i].hasOwnProperty('sticky') && Number(this.columns[i].sticky) > 0) {
                        arrStickyLeft.push(Number(this.columns[i].width))
                    } else {
                        arrStickyLeft.push(0)
                    }
                    if (this.columns[i].hasOwnProperty('sticky') && Number(this.columns[i].sticky) < 0) {
                        arrStickyRight.push(Number(this.columns[i].width))
                    } else {
                        arrStickyRight.push(0)
                    }
                }

                let index = -1;
                for (let column of this.columns) {
                    index ++;
                    let stickyCls = [];

                    if (column.width) {
                        column.width = Number(column.width).toFixed(0);
                    }

                    if (column.sortable) {
                        column.width = Number(column.width) + Number(5);

                        if(column.defaultSort) {
                            this.defaultSortColumn = column;
                        }
                    }

                    //muse-ui字段
                    column.name = column.property;
                    column.title = column.label;
                    column.align = "center";
                    if (!column.cellStyle) {
                        column.cellStyle = {};
                    }
                    if (!column.cellStyle.textAlign) {
                        if (column.cellAlign) {
                            column.cellStyle.textAlign = column.cellAlign;
                        } else {
                            column.cellStyle.textAlign = column.type === "number" ? "right" : "center";
                        }
                    }
                    this.columnMap.set(column.property, column);
                    this.sortArray.forEach((item) => {
                        if (item.property == column.property) {
                            this.$set(column, 'orderByType', item.orderType)
                        }
                        // self.$set(self.columnMap.get(item.property),'orderByType',item.orderType);
                    })
                    
                    if (column.invisible) {
                        continue;
                    }
                    if (!this.showSummary && (column.showCounter || column.showSummary)) {
                        this.showSummary = true;
                    }
                    if (column.sticky) {
                        if (column.sticky > 0) {
                            stickyCls = {
                                'sticky-left': true
                            }
                            column.cellStyle.left = this.fnSumStickWidth(arrStickyLeft, index, false) + 'px';
                        } else {
                            stickyCls = {
                                'sticky-right': true
                            }
                            column.cellStyle.right = this.fnSumStickWidth(arrStickyRight, index, true) + 'px';
                        }
                    } else {
                        delete column.cellStyle.left
                        delete column.cellStyle.right
                    }

                    // if (column.filtable) {
                    //     if (!column.filters) {
                    //         let valueSet = new Set();
                    //         for (let dataItem of this.tableData) {
                    //             valueSet.add(dataItem[column.property]);
                    //         }
                    //         column.filters = [];
                    //         for (let valueItem of valueSet.keys()) {
                    //             column.filters.push({text: valueItem, value: valueItem});
                    //         }
                    //     }
                    //     if (!column.filterMethod) {
                    //         column.filterMethod = function (value, row, column) {
                    //             return row[column.property] == value;
                    //         }
                    //     }
                    // }

                    // if (!column.renderHeader) {
                        if (column.headerType === 'selection') {
                            column.renderHeader = function (h) {
                                return h('th', {
                                    style: column.cellStyle,
                                    class: stickyCls
                                }, [
                                    h('mu-checkbox',
                                        {
                                            attrs: {
                                                label: column.label,
                                                inputValue: column.checked,
                                                ripple: false,
                                                disabled: !column.editable
                                            },
                                            on: {
                                                change: function (checked) {
                                                    self.$set(column, 'checked', checked);
                                                    if (column.type === 'selection') {
                                                        if (self.tableData) {
                                                            self.tableData.forEach((row) => {
                                                                self.$set(row, column.property, checked);
                                                            })
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    )
                                ]);
                            }
                        } else {
                            // if (column.label.indexOf("\r\n") > 0) {
                                column.renderHeader = function (h) {
                                    if(!column.sortable) {
                                        return h('th', {
                                            style: column.cellStyle,
                                            class: {
                                                'lj-grid-editable-cell': column.editable||column.sloteditable,
                                                ...stickyCls
                                            }
                                        },  [
                                            h('span', {
                                                domProps: {
                                                    innerHTML: column.label.replace(/\r\n/g, "<br>")
                                                }
                                            })
                                        ]);
                                    }
                                    return h('th', {
                                        style: column.cellStyle,
                                        class: stickyCls
                                    },  [
                                        h('div',{},[
                                            h('span', {
                                                style: {
                                                    height: "24px"
                                                },
                                                domProps: {
                                                    innerHTML: column.label
                                                },
                                                on: {
                                                    click: ($event) => { self.handleHeaderClick($event, column) }
                                                }
                                            }),
                                            h('i', {
                                                class: {
                                                    'iconfont': true,
                                                    'icon-Swap_light': !column.orderByType,
                                                    'icon-Arrow-Up_light': column.orderByType === 'asc',
                                                    'icon-Arrow-Down_light': column.orderByType === 'desc',
                                                    'sortActive': column.orderByType
                                                },
                                                style: {
                                                    fontSize: '16px'
                                                }
                                            })
                                        ])
                                    ])
                                }
                            // } else {
                            //     column.renderHeader = function (h) {

                            //         if(!column.sortable) {
                            //             return h('span', {
                            //                 style: {
                            //                     height: "24px"
                            //                 },
                            //                 domProps: {
                            //                     innerHTML: column.label
                            //                 }
                            //             });
                            //         }

                            //         return h('div',{},[
                            //             h('span', {
                            //                 style: {
                            //                     height: "24px"
                            //                 },
                            //                 domProps: {
                            //                     innerHTML: column.label
                            //                 },
                            //                 on: {
                            //                     click: ($event) => { self.handleHeaderClick($event, column) }
                            //                 }
                            //             }),
                            //             h('i', {
                            //                 class: {
                            //                     'iconfont': true,
                            //                     'icon-Swap_light': !column.orderByType,
                            //                     'icon-Arrow-Up_light': column.orderByType === 'asc',
                            //                     'icon-Arrow-Down_light': column.orderByType === 'desc',
                            //                     'sortActive': column.orderByType
                            //                 },
                            //                 style: {
                            //                     fontSize: '14px'
                            //                 }
                            //             })
                            //         ])
                            //     }
                            // }
                        }
                    // }
                }
            },
            getFooter(param) {
                let result = [];
                const {columns, data} = param;
                if (!columns || columns.length === 0) {
                    return result;
                }
                columns.forEach((column, index) => {
                    let ljColumn = this.columnMap.get(column.property);
                    if (ljColumn) {
                        if (ljColumn.showCounter) {
                            result[index] = data.length
                        }
                        if (ljColumn.showSummary) {
                            let sum = 0;
                            data.forEach((item) => {
                                sum += Number(item[ljColumn.property]);
                            });
                            result[index] = sum;
                        }
                    }
                });
                return result;
            },
            handleRowClick(index, row, event) {
                console.log('handleRowClick index, row :>>>>>>>>>>>>>>>>>>>>>',index,  JSON.stringify( row));
                this.currentIndex = index;
                this.$emit('row-click', {row: row, index: index});
            },
            handleHeaderClick(event,column) {
                
                this.handleSetColumnSort(column);

                this.handleGridSortChange();
            },
            handleSetColumnSort(column) {
                if(!column.orderByType) {
                    this.$set(column,'orderByType','desc');
                } else if (column.orderByType === 'desc') {
                    this.$set(column,'orderByType','asc');
                } else {
                    this.$set(column,'orderByType','');
                }

                let isExist = false;
                for(let i = 0;i < this.sortArray.length;i++) {
                    
                    if(this.sortArray[i].property === column.property) {
                        isExist = true;
                        this.sortArray[i].orderType = column.orderByType;
                        break;
                    }
                }

                if(!isExist) {
                    // 清楚其他列状态
                    let self = this;
                    this.sortArray.forEach((item) => {
                        self.$set(self.columnMap.get(item.property),'orderByType','');
                    })

                    this.sortArray.length = 0;

                    this.sortArray.push({ property: column.property,orderType: column.orderByType });
                }

                var tempArray = [];
                this.sortArray.forEach((item) => {
                    if(item.orderType != '') {
                        tempArray.push(item)
                    }
                })

                this.sortArray = tempArray;
                
                // 记录排序数组
                this.recordTableDateSort()
            },
            handleUpdateCellSortType() {
                let self = this;
                this.sortArray.forEach((item) => {
                    self.$set(self.columnMap.get(item.property),'orderByType',item.orderType);
                })
            },
            handleGridSortChange() {
                // 后端排序,返回一个排序数组,支持多列排序
                this.$emit("sort-change",this.sortArray);
            },
            computeTableDateSort() {
                let sortHabit = $lj.getStorage("gridSortHabit") || {};
                let key = api.winName;
                let habit = sortHabit[key] || [];
                // 如果没有排序,则使用默认排序
                if(habit.length > 0) {
                    this.sortArray = habit;
                } else {
                    if (this.defaultSortColumn) {
                        this.sortArray.push({ property: this.defaultSortColumn.property,orderType: this.defaultSortColumn.defaultSort });
                    }
                }
                // this.handleGridSortChange()
                // this.handleUpdateCellSortType();
            },
            recordTableDateSort() {
                let sortHabit = $lj.getStorage("gridSortHabit") || {};
                let key = api.winName;
                sortHabit[key] = this.sortArray;
                $lj.setStorage("gridSortHabit",sortHabit);
            }
        },
        computed: {
            visibleColumns() {
                let result = [];
                for (let column of this.columns) {
                    if (!column.invisible) {
                        result.push(column);
                    }
                }
                return result;
            },
            emptyText() {
                if (this.loading) {
                    return "加载中";
                }
            }
        },
        watch: {
            columns: {
                handler() {
                    this.computeColumnSetting();
                },
                deep: false
            }
        },
        components: {
            LjQuickEnter,
            "mu-data-table": DataTable,
            // 'header-cell': {
            //     props: {column: Object},
            //     render(h) {
            //         if (this.column.renderHeader !== undefined) {
            //             return this.column.renderHeader(h, {museColumn: this.column});
            //         }
            //     }
            // },
            'header-cell': {
                props: {column: Array},
                render(h) {
                    let renderArr = [];
                    for (const itm of this.column) {
                        if (itm.renderHeader !== undefined) {
                            let rd = itm.renderHeader(h, {museColumn: itm})
                            renderArr.push(rd)
                        }
                    }
                    return h('tr',{}, renderArr);
                }
            },
            "content-cell": {
                props: {row: Object, column: Object, rowIndex: Number, editing: Boolean},
                render(h) {
                    let column = this.column;
                    let row = this.row;
                    let rowIndex = this.rowIndex;
                    let self = this;
                    let textAlign = column.textAlign || "center";
                    if (column.type === "number") {
                        textAlign = "right";
                    }
                    if (column.slot) {
                        return column.slot(h, {row: row, column: column, rowIndex: rowIndex});
                    } else if (column.type === 'selection' || column.type === 'checkbox') {
                        let _disabled = false;
                        if (column.alwaysEditable) {
                            _disabled = false;
                        } else if (typeof column.cellEditingCall !== 'undefined') {
                            _disabled = !column.cellEditingCall(row, column, rowIndex);
                        } else {
                            _disabled = !self.editing;
                        }
                        let _value = Boolean(Number(row[column.property]))
                        return h('mu-checkbox', {
                            props: {
                                disabled: _disabled,
                                inputValue: _value,
                                ripple: false,
                            },
                            on: {
                                change: function (value) {
                                    self.$set(row, column.property, value);
                                    self.$emit("change", {row: row, column: column, rowIndex: rowIndex})
                                }
                            }
                        })
                    }  else if (column.type === 'ifbox') {
                        let data = row[column.property] === undefined ? '' : row[column.property];
                        let htmlStr = "";
                        if (Number(data) === 0) {
                            htmlStr = "<i class='iconfont icon-kongjianweixuan'></i>"
                        }else{
                            htmlStr = "<i class='iconfont icon-kongjianyixuan'></i>"
                        }
                        return h('div', {
                            style: {
                                width: '100%',
                                fontSize:'15px',
                                color:'#666'
                            },
                            domProps: {
                                innerHTML: htmlStr
                            }
                        })
                    }  else if (column.editable || column.alwaysEditable) {
                        let inputElement;
                        let disabled = false;
                        if (column.alwaysEditable) {
                            disabled = false;
                        } else if (typeof column.cellEditingCall !== 'undefined') {
                            disabled = !column.cellEditingCall(row, column, rowIndex);
                        } else {
                            disabled = !self.editing;
                        }
                        inputElement = h("input", {
                            attrs: {
                                disabled: disabled,
                                type: column.type === "number" ? "number" : "text"
                            },
                            domProps: {
                                value: row[column.property]
                            },
                            style: {
                                textAlign: textAlign,
                                width: "100%",
                                color: "#2196f3",
                                paddingLeft: '5px',
                                paddingRight: '5px'
                            },
                            on: {
                                input: function (event) {
                                    self.$set(row, column.property, event.target.value);
                                    console.log(' iiiiiput :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(column));
                                    self.$emit("change", {row: row, column: column, rowIndex: rowIndex})
                                },
                                focus: function (event) {
                                    inputElement.elm.select();
                                    self.$emit("inputfocus", event)
                                },
                                blur: function (event) {
                                    let curValue = row[column.property];
                                    self.$set(row, column.property, column.type == "number" ? Number(curValue) : curValue);
                                    self.$emit("inputblur", event)
                                },
                                keydown: function (event) {
                                    if (event.keyCode == 13) {
                                        self.$emit("inputkeydown", {row: row, column: column, rowIndex: rowIndex})
                                    }
                                }
                            }
                        });
                        return inputElement;

                        // return h('mu-text-field', {
                        //     attrs: {
                        //         disabled: !self.editing,
                        //         value: row[column.property],
                        //         fullWidth: true
                        //     },
                        //     on: {
                        //         input: function (event) {
                        //             self.$set(row, column.property, event);
                        //         }
                        //     }
                        // })
                    }
                    let style = {};
                    if (textAlign === 'right') {
                        style.paddingRight = "5px";
                    }
                    if (column.type === 'number') {

                    }

                    let displayHtml = "";
                    if (column.properties) {
                        for (let prop of column.properties) {
                            displayHtml += row[prop] + "<br>";
                        }
                        displayHtml = displayHtml.substring(0, displayHtml.length - 4);
                    } else {
                        if (column.type === 'number') {
                            displayHtml = row[column.property] ? Number(row[column.property]) : Number(0);
                        } else if (column.type === 'pic') {
                            displayHtml = "<i class=\""+ column.icon +"\"></i>"
                        }
                        else {
                            displayHtml = row[column.property];

                            if (column.property.indexOf("location") > -1 && row[column.property]) {
                                displayHtml = displayHtml.replace(/;/g, `;<br>`)
                            }
                        }
                    }

                    if (column.readflag) {
                        /** 
                         * column: 列的定义的属性
                         * row: 行数据
                         * 默认值：
                         * 0【可编辑】：有设置readflagColor，就读取readflagColor，否则，#2196f3（蓝色）
                         * 1【警告】：有设置readflagColor，就读取readflagColor，否则，#f44336（红色）
                         * 不设置：默认黑色
                         * 
                        */
                        if (column.readflagColor && row.hasOwnProperty(column.readflagColor)) {
                            if (row[column.readflag] == 0){
                                style.color = row[column.readflagColor];
                            } else {
                                style.color = "#2196f3";
                            }
                        } else {
                            switch (Number(row[column.readflag])) {
                                case 0:
                                    style.color = column.readflagColor0 ? column.readflagColor0 : "#2196f3";
                                    break;
                                case 1:
                                    style.color = column.readflagColor1 ? column.readflagColor1 : "#f44336";
                                    break;
                                default: 
                                    style.color = "#333333"
                                    break
                            }
                        }
                    }
                    if (column.textColor) {
                        style.color = column.textColor;
                    }
                    if (column.enum && column.enum.length > 0) {
                        let item = column.enum.find(item => Number(item.value) == Number(displayHtml));
                        item && (displayHtml = item.label);
                    }

                    let clearBtnHtml = null;
                    if (column.clearable && displayHtml != "") {
                        clearBtnHtml =  h('i', {
                            class: ['iconfont', 'icon-close'],
                            style: {
                                color: '#fd8e78',
                                fontSize: '14px',
                                marginLeft: '4px',
                            },
                            on: {
                                click: ($event) => {
                                    $event.stopPropagation();
                                    self.$emit('clear', {row: row, column: column, rowIndex: rowIndex});
                                }
                            }
                        })
                    }

                    if (displayHtml == "" | displayHtml == undefined) {
                        let text = column.sloteditable ? "点击选择" : "(空)";
                        displayHtml = h('span', {
                            style: {
                                color: 'rgba(60, 60, 67, 0.3)',
                                fontSize: '14px',
                            },
                            domProps: {
                                innerHTML: text
                            }
                        })
                    } else {
                        displayHtml = h('span', {
                            style: style,
                            domProps: {
                                innerHTML: displayHtml
                            }
                        })
                    }

                    return h("div", {},
                        [
                            displayHtml,
                            clearBtnHtml
                        ]
                    )
                }
            }
        }
    }
</script>

<style lang="less">
    @import "~assets/css/lj-base.less";

    .lj-grid-editable-cell {
         color: @editableTextColor!important;
    }

    .lj-grid-data-table td {
        padding: 0;
    }

    .lj-grid-data-table th {
        background-color: #f5f5f5;
        padding: 0;
        font-size: 14px;
        height: 10px;
        line-height: 1.0;
        font-weight: bold;
    }

    .sortActive {
        color: @editableTextColor;
    }

    .lj-grid-data-table .mu-table-footer-wrapper {
        overflow: auto;
    }

    .lj-grid-data-table .table-footer_tr {
        height: 32px;

        td {
            height: 32px;
            min-height: 32px!important;
            // text-align: center;
        }
    }
    .lj-grid-data-table {
        .sticky-left {
            position: sticky!important;
            left: 0;
            z-index: 99;

            &::after {
                content: '';
                position: absolute;
                top: 0;
                right: -1px;
                height: 100%;
                border-right: 1px solid rgba(0,0,0,.12);
            }
        }
        .sticky-right {
            position: sticky!important;
            right: 0;
            z-index: 90;
            
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: -1px;
                height: 100%;
                border-left: 1px solid rgba(0,0,0,.12);
            }
        }
        tr.is-hover {
            background-color: rgba(209, 237, 253, 0.5)!important;
        }
        tr.is-stripe td[class *= "sticky-"]{
            background-color: #fafafa!important;
        }
        tr td[class *= "sticky-"]{
            background-color: #fff!important;
        }
    }
</style>