<template>
    <div class="mix-input-select">
        <bgo-form-item 
            :label="label" 
            :required="required" 
            :disabled="disabled"
            :readonly="disabled || readonly"
            role="select" 
            @click.native="onClickLink">
            <van-field
                v-show="!(readonly || disabled)"
                type="textarea"
                rows="1"
                autosize
                readonly
                :name="name"
                :value="selectedText"
                :placeholder="placeholder"
                :disabled="disabled"
                ref="select"
                :rules="validatePropRules" />
            <div v-show="readonly || disabled">
                {{selectedText}}
            </div>

            <template
                #right-icon 
                v-if="this.selectedText && !(disabled || readonly)">
                <bgo-font-icon 
                    type="vant" 
                    icon="clear" 
                    color="#BFC1C2" 
                    @click.stop="onClear" />
            </template>
        </bgo-form-item>

        <van-popup
            class="mix-input-popup"
            :class="{'mix-input-popup--with-search': isSearch, 'mix-input-popup--is-tree': isTree}"
            v-model="showPicker"
            round
            position="bottom">
            <div class="mix-input-popup__title-bar">
                <button @click="showPicker = false">取消</button>
                <button 
                    v-if="isSelectMultiple" 
                    @click="onConfirm" 
                    class="mix-input-popup__title-bar__button--primary">
                    确定
                </button>
            </div>
            <van-search
                class="mix-input-search"
                v-if="isSearch"
                v-model="search.name"
                @input="onSearch"
                placeholder="请输入搜索关键词">
                <!-- <span slot="left" class="clear">
                    <van-button class="mix-text-btn" type="default" size="small" @click="onClear">清空</van-button>
                </span> -->
                <template #left-icon>
                    <bgo-font-icon
                        icon="fas search"  
                        color="#BFC1C2" />
                </template>
            </van-search>
            <!-- <div v-else>
                <div class="block-clear clear">
                    <van-button class="mix-text-btn" type="default" size="small" @click="onClear">清空</van-button>
                </div>
            </div> -->
            
            <!-- 面包屑位置导航 -->
            <div class="mix-tree-layer-nav" v-if="isTree">
                <template v-for="(item, index) in treeLayerArray">
                        <span :key="'nav-' + item.id"
                              class="nav-title"
                              :class="{'active':(index === treeLayerArray.length - 1)}"
                              @click="backParentLayer(item, index)">{{item.label}}</span>
                    <span class="layer-separate"
                          :key="'nav-sep-' + item.id"
                          v-if="index < treeLayerArray.length - 1">
                            <van-icon name="arrow"></van-icon>
                        </span>
                </template>
            </div>

            <!-- 选项列表 -->
            <div class="mix-input-popup-body">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text=""
                    @load="onLoad">
                    <van-checkbox-group v-model="currentValue" v-if="isSelectMultiple">
                        <van-cell-group>
                            <van-cell
                                v-for="(item, index) in dataList"
                                clickable
                                :key="item.id"
                                :title="item.label"
                                @click="onClickItem(item, index, 'cell')"
                                :is-link="(item.children && item.children.length > 0)?true:false">
                                <span
                                    class="input-cell-left"
                                    slot="icon"
                                    v-if="showCheckBtn(item)"
                                    @click.stop="onClickItem(item, index, 'input')">
                                    <van-checkbox
                                        :name="item.id"
                                        ref="checkboxes">
                                        <template #icon="props">
                                            <img
                                                :src="getCustomCheckboxIcon(props.checked)"
                                                alt=""
                                                style="width: 20px; height: 20px;"
                                            />
                                        </template>
                                    </van-checkbox>
                                </span>
                            </van-cell>
                        </van-cell-group>
                    </van-checkbox-group>
                    <van-radio-group v-model="currentValue" v-else>
                        <van-cell-group>
                            <van-cell
                                v-for="(item, index) in dataList"
                                :title="item.label"
                                clickable
                                @click="onClickItem(item, index, 'cell')"
                                :is-link="(item.children && item.children.length > 0)?true:false"
                                :key="item.id">
                                <span
                                    class="input-cell-left"
                                    slot="icon"
                                    v-if="showCheckBtn(item)"
                                    @click.stop="onClickItem(item, index, 'input')">
                                    <van-radio :name="item.id">
                                        <template #icon="props">
                                            <img 
                                                :src="getCustomRadioIcon(props.checked)"
                                                alt=""
                                                style="width: 20px; height: 20px;"
                                            />
                                        </template>
                                    </van-radio>
                                </span>
                            </van-cell>
                        </van-cell-group>
                    </van-radio-group>
                    <van-empty v-if="dataList.length === 0" description="没有搜索到数据" />
                </van-list>
            </div>
            <!-- <div class="mix-pull-bottom mix-input-popup-footer" v-if="!loading && showBottomBtn">
                <div class="mix-button-group mix-input-popup-footer--btn-group">
                    <van-button type="primary" block @click="showPicker = false">取消</van-button>
                    <van-button type="info" block @click="onConfirm">确定</van-button>
                </div>
            </div> -->
        </van-popup>
    </div>
</template>

<script>
    import {
        getArrayIndexById,
        getUrlAllParam,
        handleNull,
        isEmpty, isNotEmpty,
        removeUrlParam,
        convertSelect,
        convertTree,
        isContainsProp,
        DICT_ITEM_URL_PREFIX,
        DICT_TREE_URL_PREFIX,
        DEFAULT_PAGE_SIZE
    } from "@bingoit/utils";
    import {showMsg} from "../../utils/common.ui";
    import {getAutoConvert} from "@bingoit/ajax";
    import { commonSelectMixin } from "../../mixins/form.component";
    import BgoFormItem from "../../FormItem/src/index";

    import _ from 'lodash/function';

    export default {
        name: "BgoSelect",
        components: { BgoFormItem },
        props: {
            name: {
                type: String,
                default: 'picker'
            },
            isSelectMultiple: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: false
            },

            /**
             * 是否是树形结构的数据
             */
            isTree: {
                type: Boolean,
                default: false
            },
            /**
             * 是否异步加载节点；默认为：false；（只有isTree属性为true时才生效）
             */
            isTreeAsync: {  //是否为树形异步加载
                type: Boolean,
                default: false
            },
            parentName: {   //树形属性
                type: String,
                default: 'parent_id'
            },
            parentId: {   //树形属性
                type: String,
                default: '0'
            },
            /**
             * 有能力选中父节点；默认为：false；只能选择叶子节点；只有isTree属性为true时才生效
             */
            enableCheckParent: {
                type: Boolean,
                default: false
            },
            /**
             * 是否支持搜索
             */
            isSearch: {
                type: Boolean,
                default: true
            }
        },
        inject: ['vanForm'],
        mixins: [commonSelectMixin],
        created() {
            this.handleFormRule();
            if(this.isSelectMultiple) {
                if(isNotEmpty(this.value)) {
                    if(!Array.isArray(this.value)) {
                        this.currentValue = this.value.split(',');
                    }
                } else {
                    this.currentValue = [];
                }
            }
        },
        mounted() {
            this.getDataItem();
            if(this.vanForm) {
                this.vanForm.addField(this.$refs.select);
            }
        },
        watch: {
            showPicker(val) {
                if(val) {
                    this.sourceResizeEvent = window.onresize;
                    //用于隐藏底部按钮（当移动端的虚拟键盘出现时）
                    window.onresize = () => {
                        let currentHeight = document.documentElement.clientHeight;
                        if(this.clientHeight > currentHeight) {
                            this.showBottomBtn = false;
                        }else{
                            this.showBottomBtn = true;
                        }
                    }
                } else {
                    if(this.sourceResizeEvent) {
                        window.onresize = this.sourceResizeEvent;
                    } else {
                        window.onresize = null;
                    }
                }
            },
            // 监听 v-model 绑定值变更,更新组件显示
            // 目前的实现方式在树形结构异步加载 以及 数据分页加载的情况下任然会有问题.
            value(val) {
                this.currentValue = val;

                if(isNotEmpty(val)) {
                    // 多选且 v-model 绑定值为非数组
                    if(this.isSelectMultiple) {
                        if(isNotEmpty(val) && !Array.isArray(val)) {
                            this.currentValue 
                                = String.prototype.split.call(val, ',');
                        }
                    }

                    // 更新显示
                    this.initData();
                } else {
                    this.selectedTextArray = [];
                    this.selectedText = '';
                }
            },
            // 监听数据源变更
            item() {
                this.getDataItem(false);
            }
        },
        data() {
            return {
                currentValue: this.value || (this.isSelectMultiple ? [] : ''),
                selectedTextArray: [],
                selectedText: '',
                showPicker: false,
                showBottomBtn: false,
                dataList: [],
                sourceDataList: [],
                treeLayerArray: [{id: '0', label:'全部'}],  //针对树形结构的,
                search: {
                    name: ''
                },
                loading: this.dataSource !== 'custom',
                finished: this.dataSource === 'custom',
                requestUrl: '',
                paginate: {   //分页参数定义
                    page: 1,
                    totalPage: 0,
                    pageSize: DEFAULT_PAGE_SIZE
                },
                isSelected: false,
                requestTimes: 0,
                clientHeight: document.documentElement.clientHeight,
                sourceResizeEvent: null,
                asyncLoading: this.isTreeAsync || false
            }
        },
        methods: {
            onClickLink() {
                if(this.readonly || this.disabled) {
                    return;
                }
                this.showPicker = true;
                setTimeout(() => {
                    this.showBottomBtn = true;
                }, 500);
            },
            showCheckBtn(item) {
                if(this.isTree) {
                    return this.enableCheckParent || !item.children;
                }
                return true;
            },
            onLoad() {
                this.paginate.page++;
                this.requestData(this.requestUrl, undefined, false);
            },
            onClear() {
                if(this.isSelectMultiple) {
                    this.currentValue = [];
                    this.selectedTextArray = [];
                    this.selectedText = '';
                } else {
                    this.currentValue = '';
                    this.selectedText = '';
                }
                this.$emit('clear');
            },
            onClickItem(item, index, flag) {
                if(this.isTree) {
                    if(flag === 'cell'
                        && ((item.children && item.children.length > 0)
                            || (item.childNum && item.childNum > 0))) {
                        this.nextLayer(item);
                        return;
                    }
                }
                if(!this.isSelectMultiple) {
                    this.currentValue = item.id;
                    this.selectedText = item.label;
                    this.onConfirm();
                } else {
                    let i = handleNull(this.currentValue).indexOf(item.id);
                    if(i > -1) {
                        this.currentValue.splice(i, 1);
                        let textIndex = this.selectedTextArray.indexOf(item.label);
                        if(textIndex > -1) {
                            this.selectedTextArray.splice(textIndex, 1);
                        }
                    } else {
                        this.currentValue.push(item.id);
                        this.selectedTextArray.push(item.label);
                    }
                    this.selectedText = this.selectedTextArray.join(',');
                }

                this.$emit("select", item);
            },
            onConfirm() {
                this.showBottomBtn = false;
                this.showPicker = false;
            },
            onSearch: _.debounce(function(value) {
                this.onStartSearch(value);
            }, 500),

            /**
             * 开始搜索
             */
            onStartSearch(value) {
                this.dataList = [];
                this.loading = true;
                this.finished = false;
                this.paginate.page = 1;
                if(this.isCustom() || (this.isTree && !this.asyncLoading)) {
                    if(isEmpty(value)) {
                        this.dataList = this.sourceDataList;
                    } else {
                        this.searchLocation(value, this.sourceDataList, this.dataList);
                    }
                    this.loading = false;
                    this.finished = true;
                } else {
                    this.remoteSearch(value);
                }
            },

            /**
             * 搜索从已经加载或指定的选项中搜索
             */
            searchLocation(value, locationData, storeItems) {
                if(!locationData || !storeItems) {
                    return null;
                }
                for(let item of locationData) {
                    if(handleNull(item.label).indexOf(value) > -1) {
                        //去重
                        let existIndex = getArrayIndexById(storeItems, item.id);
                        if(existIndex === -1) {
                            storeItems.push(item);
                        }
                    }
                    if(this.isTree) {
                        if(item.children && item.children.length > 0) {
                            this.searchLocation(value, item.children, storeItems);
                        }
                    }
                }
            },

            /**
             * 远程搜索
             */
            remoteSearch(value) {
                this.requestData(this.requestUrl, {name: value});
            },

            /**
             * 获取数据项
             * @param {boolean} performRequest 是否在处理参数后立即请求数据
             */
            getDataItem(performRequest = true) {
                let requestUrl = '';
                if (this.isCustom()) {
                    if(this.isDataConvert) {
                        if(this.isTree) {
                            this.dataList = convertTree(this.item);
                        } else {
                            this.dataList = convertSelect(this.item);
                        }
                    } else {
                        this.dataList = this.item;
                    }
                    this.sourceDataList = this.dataList;
                    this.initData();
                    return;
                } else if (this.dataSource === 'dict') {
                    if (isEmpty(this.item)) {
                        showMsg('获取数据字典项失败');
                        return;
                    }
                    if(this.isTree) {
                        requestUrl = DICT_TREE_URL_PREFIX
                    } else {
                        requestUrl = DICT_ITEM_URL_PREFIX;
                    }
                    requestUrl = requestUrl + this.item;
                } else if (this.dataSource === 'url') {
                    requestUrl = this.item;
                }
                let args = {};
                if(isNotEmpty(this.value)) {
                    if(Array.isArray(this.value)) {
                        args.value = this.value.join(',');
                    } else {
                        args.value = this.value;
                    }
                    args.inputValue = args.value;
                }
                this.requestUrl = requestUrl;
                if(isEmpty(this.requestUrl)) {
                    console.error('未定义请求URL地址');
                    return;
                }
                if(this.asyncLoading) {
                    args[this.parentName] = this.parentId;
                }
                performRequest && this.requestData(requestUrl, args, true);
            },
            /**
             * 请求数据
             * @param url
             * @param args
             * @param isRefresh
             */
            requestData(url, args, isRefresh, callback) {
                this.requestUrl = url;
                let handleArgs = getUrlAllParam(url);
                if(handleArgs) {
                    for(let key in handleArgs) {
                        let value = handleArgs[key];
                        if(typeof(value) === 'string' && value.startsWith('${') && value.endsWith('}')) {
                            handleArgs[key] = '';
                        }
                        if(key.startsWith('s_')) {
                            let newKey = key.substring(2);
                            handleArgs[newKey] = value;
                            delete handleArgs[key];
                        }
                    }
                }
                url = removeUrlParam(url);
                if(!args) {
                    args = {};
                }
                if(handleArgs) {
                    args = Object.assign({} , handleArgs , args);
                }
                if(!this.isTree) {
                    args.page = this.paginate.page;
                    args.size = this.paginate.pageSize;
                }
                // if(!args.name && isNotEmpty(this.search.name)) {
                //     args.name = this.search.name;
                // }
                this.getRemoteData(url, args, isRefresh, callback);
            },

            /**
             * 获取远程数据
             * @param requestUrl
             * @param args
             * @param isRefresh
             */
            getRemoteData(requestUrl, args, isRefresh, callback) {
                this.isSelected = false;
                if(isRefresh) {
                    this.dataList = [];
                }
                this.loading = true;
                getAutoConvert(requestUrl, args).then(result => {
                    this.loading = false;
                    this.requestTimes++;
                    // 考虑同时请求多次的情况，可能会导致重复数据
                    if(isRefresh) {
                        this.dataList = [];
                    }
                    if (result.code === 1) {
                        let isAsync = true;
                        if(this.isDataConvert) {
                            if(this.isTree) {
                                this.dataList.push(...convertTree(result.datas));
                                for(let item of this.dataList) {
                                    if(isContainsProp(item, 'children') && isNotEmpty(item.children)) {
                                        isAsync = false;
                                        break;
                                    }
                                }
                            } else {
                                this.dataList.push(...convertSelect(result.datas));
                            }
                        } else {
                            this.dataList.push(...result.datas);
                        }
                        if(this.requestTimes === 1) {
                            if(!isAsync) {
                                this.sourceDataList = this.dataList;
                            }
                        }
                        if(isAsync || !this.asyncLoading) {
                            this.asyncLoading = isAsync;
                        }
                        if(isNotEmpty(this.value) && (isEmpty(this.currentValue) || this.currentValue.length === 0)) {
                            this.currentValue = this.value;
                        }
                        if(result.totalPage) {
                            this.paginate.totalPage = result.totalPage;
                            if(this.paginate.page >= result.totalPage) {
                                this.finished = true;
                            }
                        } else {
                            this.finished = true;
                        }
                        this.initData();
                    } else {
                        this.finished = true;
                    }
                    if(callback) {
                        callback();
                    }
                }).catch(err => {
                    console.error(err);
                    if(callback) {
                        callback();
                    }
                })
            },
            /**
             * 初始化数据
             */
            initData() {
                //数据记载结束;初始化表单数据
                if (this.currentValue 
                    && this.dataList 
                    && this.dataList.length > 0
                ) {
                    let data = this.dataList[0];
                    let propName = 'value';

                    // 考虑v-model绑定值更新的情况
                    // 不清空会导致多选时选中列表累加
                    this.selectedText = '';
                    this.selectedTextArray = [];

                    if(Object.prototype.hasOwnProperty.call(data, 'id') && isNotEmpty(data['id'])) {
                        propName = 'id';
                    }

                    let selectedData = "";
                    if(this.isSelectMultiple) {
                        selectedData = [];
                        let arrayValue = [];
                        if(Array.isArray(this.currentValue)) {
                            arrayValue = this.currentValue;
                        } else {
                            arrayValue = this.currentValue.split(',');
                        }
                        for(let value of arrayValue) {
                            let item = this.findItem(
                                this.getAllDataList(), 
                                value, 
                                propName
                            );
                            if(item && item.data) {
                                selectedData.push(item.data.item);
                                this.selectedTextArray.push(item.data.item.label);
                                this.isSelected = true;
                            }
                        }
                        this.selectedText = this.selectedTextArray.join(',');
                    } else {
                        let item = this.findItem(
                            this.getAllDataList(), 
                            this.currentValue, 
                            propName
                        );
                        if(item && item.data) {
                            selectedData = item.data.item;
                            this.selectedText = item.data.item.label;
                            this.selectedIndex = item.data.index;
                            this.isSelected = true;
                        }

                        // 更新树型数据导航面包屑
                        if(item && item.path) {
                            this.treeLayerArray = [
                                    {
                                        id: '0', 
                                        label: '全部', 
                                        children: this.getAllDataList(), 
                                    }, 
                                    ...item.path
                                ]
                            this.getChildren(
                                this.treeLayerArray[
                                    this.treeLayerArray.length - 1
                                ]
                            )
                        }
                    }

                    this.$emit("loaded", selectedData);
                }
            },

            /**
             * 获取当前所有选项数据
             * 
             * sourceDataList 用于本地搜索, 仅在dataSource为custom
             * 或者 isTree为true且数据不为异步加载的情况下会被赋值.
             * 
             * 当数据为树型结构时,this.dataList为当前所在层级的数据.
             */
            getAllDataList() {
                if(isNotEmpty(this.sourceDataList)) {
                    return this.sourceDataList;
                } else {
                    return this.dataList;
                }
            },

            /**
             * 查找数据
             * @param items
             * @param value
             * @param propName
             * @returns {Object} 返回值定义为:
             * {
             *  data: object,
             *  path: Array<object>
             * }
             * 其中data为查找到的目标数据；path为查找路径，仅对树型数据有效．
             * 为降低复杂度，我们使用扁平化的数组来存储查找路径，下标越大层级越深．
             */
            findItem(items, value, propName) {
                let index = 0;

                for(let item of items) {
                    if(item[propName] === value) {
                        return {
                            data: {index: index, item: item}, 
                            path: [],
                        };
                    } else if(this.isTree && item.children && item.children.length > 0) {
                        let tmp = this.findItem(item.children, value, propName);
                        if(tmp) {
                            const path = [item, ...tmp.path];
                            return {data: tmp.data, path};
                        }
                    }
                    index++;
                }
            },

            /**
             * 到下一层级(针对树形结构的数据)
             */
            nextLayer(item) {
                this.treeLayerArray.push(item);
                this.getChildren(item);
            },

            /**
             * 获取指定项的子列表(针对树形结构的数据)
             */
            getChildren(item) {
                this.paginate.page = 1;
                if(item.children && item.children.length > 0) {
                    this.dataList = item.children;
                } else if(this.asyncLoading) {
                    let args = {};
                    args[this.parentName] = item.id;
                    if (this.search.name) {
                        args["name"] = this.search.name;
                    }
                    this.requestData(this.requestUrl, args, true);
                }
            },
            /**
             * 返回到选中的父层级上 (针对树形结构的数据)
             * @param item
             * @param index
             */
            backParentLayer(item, index) {
                if(index === (this.treeLayerArray.length - 1)) {
                    return;
                }
                this.treeLayerArray.splice(index + 1, this.treeLayerArray.length - index);
                if(item.id === '0') {
                    this.dataList = this.sourceDataList;
                } else {
                    this.getChildren(item);
                }
            },

            /**
             * 获取当前列表中，当前节点前不可选中的父节点数；
             * @param index
             * @returns {number}
             */
            getCurrentNoCheckParentCount(index) {
                if(this.isTree) {
                    if(this.enableCheckParent) {
                        return 0;
                    } else {
                        let count = 0;
                        for(let i = 0; i < index; i++) {
                            let item = this.dataList[i];
                            if(item.children && item.children.length > 0) {
                                count++;
                            }
                        }
                        return count;
                    }
                }
                return 0;
            },
            /**
             *
             * 用来判断重新初始化数据时，当前值是否选中了（是否在重新加载的数据中）
             * @returns {boolean}
             */
            selected() {
                return this.isSelected;
            },
            getSourceElement() {
                return this.$refs.select
            },

            /**
             * 获取自定义单选图标
             */
            getCustomRadioIcon(checked) {
                let icon
                if(checked) {
                    icon = require('../../assets/icons/radio-checked.png')
                    if(this.disabled || this.readonly) {
                        icon = require('../../assets/icons/radio-check-disabled.png')
                    }
                } else {
                    icon = require('../../assets/icons/uncheck.png')
                    if(this.disabled || this.readonly) {
                        icon = require('../../assets/icons/disabled.png')
                    }
                }

                return icon
            },
            /**
             * 获取自定义单选图标
             */
            getCustomCheckboxIcon(checked) {
                let icon
                if(checked) {
                    icon = require('../../assets/icons/checkbox-checked.png')
                    if(this.disabled || this.readonly) {
                        icon = require('../../assets/icons/checkbox-check-disabled.png')
                    }
                } else {
                    icon = require('../../assets/icons/uncheck.png')
                    if(this.disabled || this.readonly) {
                        icon = require('../../assets/icons/disabled.png')
                    }
                }

                return icon
            },
        }
    }
</script>

<style lang="scss">
    @import "../../style/var";

    $title-bar-height: 48px;
    $search-height: 66px;
    $breadcrumb-height: 40px;

    .mix-input-select {
        .van-cell::after {
            content: ' ';
            position: absolute;
            pointer-events: none;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            left: $padding-md;
            right: $padding-md;
            bottom: 0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            // border-bottom: 1px solid $border-color;
            border-bottom: none;
        }
        .van-hairline--top-bottom::after, 
        .van-hairline-unset--top-bottom::after {
            border-width: 0;
        }
    }

    .mix-input-popup {
        height: 60vh;
        // make fixed position relative to ancester 
        // instead of viewport
        transform: scale(1);

        .mix-input-popup__title-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: $title-bar-height;
            padding: 0 $padding-md;
            background-color: $gray-1;

            button {
                padding: 0;
                font-size: $font-size-lg;
                background-color: transparent;
                border: none;
                outline: none;
            }

            &__button--primary {
                color: $primary-color;
            }
        }
        .mix-input-search {
            position: fixed;
            top: $title-bar-height;
            z-index: 99999;
            height: $search-height;
            width: 100%;
            border-radius: 16px 16px 0 0;

            .van-search__content {
                border-radius: 6px;
            }
        }
        .mix-input-popup-body {
            height: calc(100% - #{$title-bar-height});
            margin-top: $title-bar-height;
            overflow: auto;

            .van-cell {
                padding: $padding-md;
            }
        }
        .input-cell-left {
            padding-right: $padding-xs;
        }
        .mix-input-popup-footer {
            height: 44px;
        }
        .mix-input-popup-footer--btn-group {
            position: fixed;
            height: 44px;
            z-index: 99999;
            width: 100%;
        }
        .van-search {
            padding: $padding-md;
        }
        .clear .van-button--small {
            font-size: 0.9rem;
        }
        .block-clear {
            padding-left: 10px;
        }
        .mix-tree-layer-nav {
            overflow-x: scroll;
            white-space: nowrap;
            position: fixed;
            top: $search-height + $title-bar-height;
            height: $breadcrumb-height;
            z-index: 99999;
            width: 100%;
            padding: $padding-xs $padding-md;
            box-sizing: border-box;
            color: $blue;
            span {
                padding-right: $padding-base;
            }
            .nav-title {
                font-size: $font-size-lg;
            }
            .layer-separate {
                color: #A3A6A8;
                vertical-align: bottom;
            }
            .active {
                color: $gray-6;
            }
        }

        &--with-search {
            .mix-input-popup-body {
                height: calc(100% - #{$title-bar-height} - #{$search-height});
                margin-top: $title-bar-height + $search-height;
            }
        }

        &--is-tree {
            .mix-input-popup-body {
                height: calc(
                    100% - #{$title-bar-height} - #{$breadcrumb-height}
                );
                margin-top: $title-bar-height + $breadcrumb-height;
            }
        }

        &--is-tree#{&}--with-search {
            .mix-input-popup-body {
                height: calc(
                    100% - #{$title-bar-height} - #{$search-height} - #{$breadcrumb-height}
                );
                margin-top: $title-bar-height + $search-height + $breadcrumb-height;
            }
        }
    }
</style>
