<template>
    <lj-win-common title="列设置" ref="baseWin">
        <slot name="header_sub" slot="header_sub"></slot>
        <div slot="body" style="padding-bottom: 24px">
            <div class="sellist-widget">
                <div class="loca_title_widget">
                    <div class="loca_left">
                        预览
                    </div>
                </div>

                <van-sticky :offset-top="previewOffsetTop">
                    <div class="setting-preview">
                        <van-loading v-if="gridLoading" size="24" color="#2196f3" />
                        <mu-data-table
                            class="lj-grid-data-table"
                            stripe
                            :columns="visibleColumns"
                            border
                            :auto-expand="false"
                            :fit="false"
                            :hover="false"
                            >
                            <template slot="header" slot-scope="column">
                                <header-cell :column="column.columns"/>
                            </template>
                        </mu-data-table>
                    </div>
                </van-sticky>
            </div>

            <div class="sellist-widget">
                <div class="loca_title_widget">
                    <div class="loca_left">
                        展示数据列
                    </div>
                    <div class="loca_right">
                        <van-tabs v-model="selNavActive" class="sellist-widget__nav" color="#2196f3">
                            <van-tab title="列宽"></van-tab>
                            <van-tab title="位置"></van-tab>
                        </van-tabs>
                    </div>
                </div>
                <div class="loca_list-widget">
                    <draggable 
                        :list="columns"
                        draggable=".loca-cell"
                        handle=".mover"
                        chosenClass="chosen"
                        ghostClass="ghost"
                        forceFallback="true"
                        :animation="100"
                        :move="autoSort"
                        @end="handleDraggableEnd"
                    >
                        <template v-for="(item, index) in columns">
                            <van-cell
                                v-if="!item.invisible"
                                :key="index[datatype.code]"
                                class="loca-cell"
                                :title="item[datatype.name] | gridTitleFilter(item[datatype.code])"
                                :label="item | gridLabelFilter"
                                center
                            >
                                <template #icon>
                                    <div class="icon-box" @click="handleActionLoca(0, item, index)">
                                        <span class="locaicon del"></span>
                                    </div>
                                </template>
                                <template #default>
                                    <div class="drap-box">
                                        <template v-if="selNavActive == 0">
                                            <div class="slider-box">
                                                <van-slider 
                                                    v-model="item.wSlider" 
                                                    step="5"
                                                    min="5"
                                                    @input="handleSliderChange(item)"
                                                >
                                                    <template #button>
                                                        <div class="custom-button">{{ item.wSlider | toFixedFilter(0) }}%</div>
                                                    </template>
                                                </van-slider>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div class="icon-box sticky-icon" @click="handleShowStickyAction(item)">
                                                <i class="iconfont" :class="isStickyIcon(item)"></i>
                                            </div>
                                            <div class="icon-box mover">
                                                <i class="iconfont icon-tuozhuai"></i>
                                            </div>
                                        </template>
                                    </div>
                                </template>
                            </van-cell>
                        </template>
                    </draggable> 

                </div>
            </div>

            <div class="localist-widget">
                <div class="loca_title_widget">
                    <div class="loca_left">
                        隐藏数据列
                    </div>
                </div>
                <div class="loca_list-widget">
                    <template v-for="(item, index) in columns">
                        <van-cell
                            v-if="item.invisible"
                            :key="index"
                            class="loca-cell"
                            :title="item[datatype.name]"
                            :label="item | gridLabelFilter"
                        >
                            <template #icon>
                                <div class="icon-box" @click="handleActionLoca(1, item, index)">
                                    <span class="locaicon add"></span>
                                </div>
                            </template>
                        </van-cell>
                    </template>
                </div>
            </div>
            
            <van-action-sheet
                v-model="showActionSticky"
                :actions="actionsSticky"
                cancel-text="取消"
                description="设置粘性布局"
                close-on-click-action
                @select="handleSelStickyAction"
            />
        </div>
        <template slot="footer">
            <mu-row>
                <mu-col span="6">
                    <mu-button large color="primary" @click="saveSetting(false)" full-width>保存</mu-button>
                </mu-col>
                <mu-col span="6">
                    <mu-button v-if="this.empid == 0" large color="success" @click="saveSetting(true)" full-width>保存系统布局</mu-button>
                    <mu-button v-else large color="success" @click="getSysLayout" full-width>获取系统布局</mu-button>
                </mu-col>
            </mu-row>
        </template>
    </lj-win-common>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import LjGrid from "components/lj-grid";
    import Draggable from 'vuedraggable'
    import {productInfo} from "components/project-set.js"

    export default {
        name: "grid-view-setting",
        components: {
            LjGrid, 
            LjWinCommon, 
            Draggable,
            '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);
                }
            },
        },
        data() {
            return {
                token: "",
                empid: 0,
                apiName: "",
                columns: [],
                gridHeight: 400,
                columnProperties: [
                    {
                        property: "order_arrow",
                        label: "顺序",
                        width: 150,
                        slot: this.orderSlotRender
                    },
                    {property: "label", label: "表头名称"},
                    {property: "property", label: "字段"},
                    {property: "invisible", label: "不可见", width: 90, type: "selection", editable: true},
                    {property: "fixed", label: "固定列", width: 90, type: "selection", editable: true}
                ],

                selectList: [],
                visibleColumns: [],
                datatype: {
                    code: "property",
                    name: "label",
                    numberA: "",
                    numberB: ""
                },
                selNavActive: 1,
                gridLoading: false,
                previewOffsetTop: 0,
                actionColItem: {},
                showActionSticky: false,
                actionsSticky: [
                    { name: '粘左边' },
                    { name: '不设置' },
                    { name: '粘右边' },
                ],
                defaultGirdWidth: 20, // 默认宽度
            }
        },
        computed: {
            isThWidth(item) {
                return function(item) {
                    return item.wSlider ? ((item.wSlider / 100) * screen.width)  + 'px': item.width + 'px';
                }
            },
            isStickyIcon(item) {
                return function(item) {
                    let icon = '';
                    switch (item.sticky) {
                        case 1:
                            icon = 'icon-zongxiang_l sticky-icon-left'
                            break;
                        case -1:
                            icon = 'icon-zongxiang sticky-icon-right'
                            break;
                        default:
                            icon = 'icon-settings-02'
                            break;
                    }
                    return icon
                }
            }
        },
        created() {
            this.token = $lj.getStorage("token");
            let pageParams = $lj.getPageParam();
            this.columns = pageParams.columns;
            this.apiName = pageParams.apiName;
            let userInfo = $lj.getStorage('userInfo');
            this.empid = userInfo.empid;
            this.init(this.columns);
        },
        mounted() {
            this.gridHeight = this.$refs.baseWin.contentStyle.minHeight.replace("px", "");
            this.previewOffsetTop = document.querySelector('.mu-appbar.header').clientHeight;
        },
        methods: {
            init(data) {
                let arr = [];
                data.forEach(item => {
                    if (item.hasOwnProperty('width')) {
                        this.$set(item, 'wSlider', (item.width / screen.width) * 100)
                    } else {
                        this.$set(item, 'wSlider', this.defaultGirdWidth);
                        this.$set(item, 'width', (Number(this.defaultGirdWidth) / 100 ) * screen.width);
                    }
                    if (!item.invisible) {
                        arr.push(item);
                    }
                });
                this.computeColumnSetting(data);
                this.visibleColumns = arr;
            },
            /**设置粘性布局，动作面板 */
            handleSelStickyAction(action, index) {
                let item = this.actionColItem;
                let length = this.columns.length;
                let colIndex = -1;
                for (let i = 0; i < length; i++) {
                    if (item.hasOwnProperty('properties') && this.columns[i].hasOwnProperty('properties')) {
                        if (item.properties.join(",") == this.columns[i].properties.join(",")) {
                            colIndex = i;
                            break;
                        }
                    } else if (item.property == this.columns[i].property) {
                        colIndex = i;
                        break;
                    }
                }
                let _sticky = false;
                // let num;
                switch (index) {
                    case 0:
                        // 左
                        _sticky = 1
                        break;
                    case 2:
                        // 右
                        _sticky = -1
                        break;
                }
                this.$set(this.columns[colIndex], 'sticky', _sticky);
            },
            handleShowStickyAction(item) {
                this.showActionSticky = true;
                this.actionColItem = item;

                for (let itm of this.actionsSticky) {
                    itm.disabled = false
                }
                if (item.sticky) {
                    if (item.sticky > 0) {
                        this.actionsSticky[0].disabled = true
                    } else {
                        this.actionsSticky[2].disabled = true
                    }
                } else {
                    this.actionsSticky[1].disabled = true
                }
            },
            handleSliderChange(item) {
                this.$toast.clear()
                this.$toast(item.wSlider);
                this.gridLoading = true;

                let arr = $lj.deepCopyFn(this.columns);
                let vArr = [];
                let scrollX = 0;
                let hasMatch = false;
                for (let itm of arr) {
                    if (item.hasOwnProperty('properties') && itm.hasOwnProperty('properties')) {
                        if (item.properties.join(",") == itm.properties.join(",")) {
                            itm.width = ((Number(item.wSlider) / 100 ) * screen.width);
                            hasMatch = true
                        }
                    } else if (item.property == itm.property) {
                        this.$set(itm, 'width', (item.wSlider / 100 ) * screen.width);
                        hasMatch = true
                    }
                    if (!itm.invisible) {
                        vArr.push(itm);
                        if (!hasMatch) {
                            scrollX += Number(itm.width);
                        }
                    }
                }
                this.visibleColumns = vArr;
                
                setTimeout(() => {
                    this.fnScrollToX(scrollX);
                }, 15);
            },
            fnScrollToX(scrollX) {
                let oTableHeader = document.querySelector(".lj-grid-data-table .mu-table-header-wrapper") || null;
                if (oTableHeader) {
                    oTableHeader.scrollTo({
                        left: scrollX,
                        top: 0,
                        behavior: 'auto'
                    })
                }
                this.gridLoading = false;
            },
            /** 拖拽时的反馈 */
            autoSort(e) {
                api.notification({
                    vibrate:[50,50], 
                });
                if (e.draggedContext.element.disabledSort && e.draggedContext.element.disabledSort.length > 0) {
                    if (e.draggedContext.element.disabledSort.indexOf(e.relatedContext.index) > -1) {
                        return false
                    }
                }
            },
            /** 完成拖拽后，重新编好顺序 */
            handleDraggableEnd() {
                for (const i in this.columns) {
                    this.columns[i].order = i;
                }
            },
            /**点击添加或删除 */
            handleActionLoca(type, item, idx) {
                if (type) {
                    // add
                    this.$set(item, 'invisible', false)
                } else {
                    this.$set(item, 'invisible', true)
                    if (item.hasOwnProperty('sticky')) {
                        // this.$set(item, 'sticky', 0)
                        delete item.sticky
                    }
                }
            },
            saveSetting(ifSys) {
                let requestBody = {
                    token: this.token,
                    empid: ifSys ? -1 : this.empid,
                    dwname: productInfo.productCode,
                    itemname: this.apiName,
                    itemvalue: JSON.stringify(this.columns),
                    ifcompress: 1
                };
                $lj.postLJRequest(
                    "SetSysUserFileString", requestBody,
                    function (ret) {
                        if (!ret.ErrMsg) {
                            $lj.toast("保存成功", 2000);
                            $lj.sendEvent("grid_style_updated", {
                                dwname: requestBody.dwname,
                                itemname: requestBody.itemname
                            });
                            api.closeWin();
                        }
                    }
                );
            },
            getSysLayout(){
                let requestBody = {
                    token: $lj.getStorage("token"),
                    empid: -1,
                    dwname: productInfo.productCode,
                    itemname: this.apiName,
                    ifcompress: 1
                };
                let self = this
                $lj.postLJRequest(
                    "GetSysUserFileString", requestBody,
                    function (ret){
                        if(ret && ret.itemvalue){
                            let customSetting = JSON.parse(ret.itemvalue);
                            // 构建field-style键值对
                            let customSettingDictionary = new Map();
                            for (let item of customSetting) {
                                customSettingDictionary.set(item.property, item);
                            }
                            // 合并过滤字段，以这个字典为准，用户历史设置多删少补
                            for (let item of self.columns) {
                                let curField = item.property;
                                let userStyle = customSettingDictionary.get(curField);
                                if (userStyle) {
                                    item.order = userStyle.order
                                    item.invisible = userStyle.invisible;
                                    item.width = userStyle.width;
                                    item.sticky = userStyle.sticky;
                                }
                            }
                            let newColumns = []
                            for(let i = 0;i<self.columns.length;i++)
                            {
                                for(let item of self.columns)
                                {
                                    if(item.order == i)
                                    {
                                        newColumns.push(item)
                                    }
                                }
                            }
                            self.columns = newColumns
                        }
                        else{
                            $lj.toast('暂无设置系统布局')
                        }
                    })
            },
            orderSlotRender(h, {row, column, rowIndex}) {
                let self = this;
                return h('div', [
                    h('mu-button', {
                            attrs: {icon: true, disabled: rowIndex === 0},
                            style: {float: "left", margin: 0},
                            on: {
                                click: function () {
                                    if (rowIndex <= 0) {
                                        return;
                                    }
                                    let tmp = self.columns[rowIndex - 1];
                                    let tmpOrder = tmp.order;
                                    tmp.order = self.columns[rowIndex].order;
                                    self.columns[rowIndex].order = tmpOrder;
                                    self.$set(self.columns, rowIndex - 1, self.columns[rowIndex]);
                                    self.$set(self.columns, rowIndex, tmp);
                                }
                            }
                        },
                        [h('i', {class: ["iconfont", "icon-up"]})]
                    ),
                    h('mu-button', {
                            attrs: {icon: true, disabled: rowIndex === self.columns.length - 1},
                            style: {float: "right", margin: 0},
                            on: {
                                click: function () {
                                    if (rowIndex >= self.columns.length - 1) {
                                        return;
                                    }
                                    let tmp = self.columns[rowIndex + 1];
                                    let tmpOrder = tmp.order;
                                    tmp.order = self.columns[rowIndex].order;
                                    self.columns[rowIndex].order = tmpOrder;
                                    self.$set(self.columns, rowIndex + 1, self.columns[rowIndex]);
                                    self.$set(self.columns, rowIndex, tmp);
                                }
                            }
                        },
                        [h('i', {class: ["iconfont", "icon-down"]})]
                    )
                ])
            },
            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);
                    }
                    //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);
                    if (column.invisible) {
                        continue;
                    }
                    // if (!this.showSummary && (column.showCounter || column.showSummary)) {
                    //     this.showSummary = true;
                    // }
                    if (column.sticky) {
                        if (column.sticky > 0) {
                            stickyCls = ['sticky-left']
                            column.cellStyle.left = this.fnSumStickWidth(arrStickyLeft, index, false) + 'px';
                        } else {
                            stickyCls = ['sticky-right']
                            column.cellStyle.right = this.fnSumStickWidth(arrStickyRight, index, true) + 'px';
                        }
                    } else {
                        delete column.cellStyle.left
                        delete column.cellStyle.right
                    }

                    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
                                        },
                                        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) {
                                return h('th', {
                                    style: column.cellStyle,
                                    class: stickyCls
                                },  [
                                    h('span', {
                                        domProps: {
                                            innerHTML: column.label.replace(/\r\n/g, "<br>")
                                        }
                                    })
                                ]);
                            }
                        } else {
                            column.renderHeader = function (h) {
                                return h('th', {
                                    style: column.cellStyle,
                                    class: stickyCls
                                },  [
                                    h('span', {
                                        style: {
                                            height: "24px"
                                        },
                                        domProps: {
                                            innerHTML: column.label
                                        }
                                    })
                                ]);
                                // return h('span', {
                                //     style: {
                                //         height: "24px"
                                //     },
                                //     domProps: {
                                //         innerHTML: column.label
                                //     }
                                // });
                            }
                        }
                    }
                }
            },
            fnFindStickWidth(stickyNum) {
                let length = this.columns.length;
                let sum = 0;
                if (stickyNum > 0) {
                    for (let i = 0; i < length; i++) {
                        if (this.columns[i].hasOwnProperty('sticky') && Number(stickyNum) > Number(this.columns[i].sticky) && Number(this.columns[i].sticky) > 0) {
                            sum += Number(this.columns[i].width)
                        }
                    }
                } else {
                    for (let i = 0; i < length; i++) {
                        if (this.columns[i].hasOwnProperty('sticky') && Number(stickyNum) < Number(this.columns[i].sticky) && Number(this.columns[i].sticky) < 0) {
                            sum += Number(this.columns[i].width)
                        }
                    }
                }
                return sum
            },
            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
            },
        },
        watch: {
            columns: {
                handler(newVal) {
                    this.visibleColumns = [];
                    this.$nextTick(() => {
                        this.init(newVal)
                    })
                },
                deep: true
            }
            
        },
        filters: {
            gridTitleFilter(title, code) {
                return code == 'checked' ? '复选框' : title;
            },
            gridLabelFilter(item) {
                if (item.properties) {
                    return item.properties.join(" + ");
                } else {
                    return item.property;
                }
            },
            toFixedFilter(data, num) {
                return data.toFixed(num)
            }
        }
    }
</script>

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

.ghost {
    position: relative;
    opacity: 0.3;
    &::before, &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-image: linear-gradient(to right, #2196f3 0%, #2196f3 50%, transparent 50%);
        background-size: 20px 2px;
        background-repeat: repeat-x;
    }
    &::before {
        top: 0;
    }
    &::after {
        top: calc(100% - 4px);
    }
}
.mover {
    display: inline-flex;
    height: 100%;
    align-items: center;
}
.cell-right-part {
    display: flex;
    flex-direction: column;

    .title {
        color: #999999;
        flex: 1;
    }
    .num {
        font-size: 14px;
        color: #333;
        font-weight: bold;
    }
    .num_label {
        color: #999999;
        font-size: 12px;
    }
}
.loca_title_widget {
    display: flex;
    color: #999999;
    font-size: 12px;
    padding: 8px 16px;
    padding-bottom: 4px;

    .loca_left {
        display: flex;
        flex: 1;
        align-items: flex-end;
    }
}
&.searching {
    .loca_title_widget {
        margin: 10px;
        padding: 5px;
        border-radius: 4px;
        background-color: #f2f2f2;
    }
}
.loca_list-widget {
    margin: 5px 10px;
    border-radius: 10px;
    overflow: hidden;

    .loca-cell {
        // padding: 2px;
        // padding-right: 10px;
        // background-color: #fff;
        padding: 5px 10px;
        // background-color: rgba(196, 196, 196, 0.1);
        background-color: #fff;

        .van-cell__label {
            margin-top: 0;
        }
        .icon-box {
            display: flex;
            justify-content: center;
            align-items: center;

            &.sticky-icon {
                padding-right: 10px;
                margin-right: 10px;
                border-right: 1px solid #ededed;
                color: @light-label-secondary;
                
                .iconfont {
                    font-size: 18px;
                }
            }
        }
        .selected-stepper {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 100%;

            .van-stepper__input {
                color: @musePrimary;
            }
        }
    }
    .drap-box {
        display: flex;
        justify-content: flex-end;
        // align-content: center;
        // height: 100%;
        
        .mover {
            color: #000;
        }
        .sticky-icon-left {
            color: @light-system-blue;
        }
        .sticky-icon-right {
            color: @light-system-orange;
        }
        .slider-box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            min-height: 28px;
            padding: 0 16px;

            .custom-button {
                width: 32px;
                color: #fff;
                font-size: 12px;
                line-height: 18px;
                text-align: center;
                background-color: #2196f3;
                border-radius: 100px;
            }
        }
    }
}
.setting-preview {
    position: relative;
    width: 100%;
    overflow-x: scroll;

    .van-loading {
        position: absolute;
        z-index: 100;
        // top: 0;
        // bottom: 0;
        // left: 0;
        // right: 0;
        // margin: auto;
        // width: 24px;
        // height: 24px;
        // z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.6);
    }
    // table {
    //     border-collapse: collapse;
    //     table-layout: fixed;
    // }
    // th {
    //     background-color: #f5f5f5;
    //     padding: 0;
    //     font-size: 14px;
    //     height: 10px;
    //     line-height: 1.0;
    //     font-weight: bold;
    // }
}
.van-skeleton__row, .van-skeleton__title {
    background-color: #dddddd;
}
.remind{
    font-size: 16px;
    color: @colorWarn;
}
.locaicon {
    display: block;
    position: relative;
    width: 16px;
    height: 16px;
    margin: auto 10px;
    border-radius: 50%;

    &::before, &.add::after {
        content: "";
        position: absolute;
        border-radius: 1px;
        background-color: #fff;
    }
    &::before {
        top: 7px;
        left: 3px;
        width: 10px;
        height: 2px;
    }

    &.add {
        background-color: rgb(57,203,106);
        &::after {
            top: 3px;
            left: 7px;
            height: 10px;
            width: 2px;
        }
    }
    &.del {
        background-color: rgb(255,59,48);
    }
}
</style>

<style lang="less">
.sellist-widget {
    .sellist-widget__nav {
        .van-tabs__wrap {
            height: auto!important;
        }
        // .van-tabs__nav--card {
        //     height: 24px!important;
        //     margin: 0;
        // }
        .van-tab {
            padding: 0 16px;
            font-size: 12px;
            // line-height: 18px;
        }
        .van-tabs__nav {
            background-color: unset;
        }
        .van-tabs__nav--line {
            padding-bottom: 0;
        }
        .van-tabs__line {
            bottom: 0;
        }
        .van-tab--active {
            color: @musePrimary;
        }
    }
    // .loca-cell {
    //     .van-cell__value {
    //         overflow: auto!important;
    //     }
    // }
    // .slider-box {
    //     .van-slider {
    //         margin: auto 0;
    //     }
    // }
}
.setting-preview {
    .mu-table-empty {
        display: none!important;
    }
    .mu-table-header-wrapper {
        position: relative;
        overflow-x: scroll;
    }
}
</style>