<!--
    winMode: 组件模式
        'single-storage': 只选仓库，
        'single-loca': 只选仓库，
        'storage-loca': 仓库仓位选择，
    modelState: 
        模式判断：true=>选择仓库, false=>选择仓位
    uselocationState: 
        模式判断：true=>选择新仓位, false=>单选仓位
    editState: 是否可编辑
    model:编辑状态
        checkbox：多选,
        single：单选, // 仓库仓位
        newloca: 新仓位模式(多选),

-->
<template>
    <lj-win-common :title="title" ref="baseWin" class="lj-storage-widget" @fix-body="fixbody">
        <!-- <slot slot="header" name="header"></slot> -->
        <template slot="header_left">
            <mu-button icon @click="handleCloseWin">
                <template v-if="winMode.indexOf('storage-loca') > -1 && !modelState">
                    <i class="iconfont icon-kucun" style="font-size: 16px"></i>
                </template>
                <template v-else>
                    <i class="iconfont icon-left"></i>
                </template>
            </mu-button>
        </template>
        <mu-button icon slot="header_right" @click="hanldeScanLocation">
            <i class="iconfont icon-iconfontscan"></i></mu-button>
        <div ref="popup_main" class="popup-main" :class="{'searching': searchmodel, 'hasfooter': isShowFooter}" slot="body" :style="{'height': height}">
            <van-sticky class="search-widget" :container="popup_main" :offset-top="headerHeight" v-if="!modelState">
                <van-search
                    v-model.trim="searchKeyWord"
                    :placeholder="searchPlaceholder"
                    :show-action="searchState"
                    :class="{'searching': searchState}"
                    @search="handleSearchNow(false, searchKeyWord)"
                    @cancel="handleCancelSearch"
                    @blur="handleBlur"
                >
                    <template #left-icon>
                        <div class="search-icon">
                            <van-loading v-if="searchingState" type="spinner" size="16" color="#1989fa" />
                            <i v-else class="iconfont icon-Search_light" style="font-size: 16px;"></i>
                        </div>
                    </template>
                    <!-- <template #right-icon>
                        <div class="search-icon">
                            <van-loading v-if="searchingState" type="spinner" size="18" color="#1989fa" />
                            <i v-else class="iconfont icon-search" style="font-size: 18px; margin: auto;" @click="handleSearchNow(false, searchKeyWord)"></i>
                        </div>
                    </template> -->
                </van-search>
            </van-sticky>
            <!-- <div class="search-widget" slot="header_sub">
                <van-search
                    v-model.trim="searchKeyWord"
                    :placeholder="searchPlaceholder"
                    :show-action="searchState"
                    shape="round"
                    :class="{'searching': searchState}"
                    @search="handleSearchNow(false, searchKeyWord)"
                    @cancel="handleCancelSearch"
                    @blur="handleBlur"
                >
                    <template #left-icon>
                        <div class="search-icon">
                            <van-loading v-if="searchingState" type="spinner" size="18" color="#1989fa" />
                            <i v-else class="iconfont icon-search" style="font-size: 18px; margin: auto;"></i>
                        </div>
                    </template>
                </van-search>
            </div> -->

            <div class="material-widget" v-if="!modelState && JSON.stringify(mtrlMsg) != '{}'">
                <van-skeleton :row="2" :loading="JSON.stringify(mtrlware) == '{}'">
                    <van-cell
                        class="material-cell"
                        :title="mtrlware.mtrlcode"
                        center
                    >
                        <template #icon>
                            <i class="iconfont icon-huowu"></i>
                        </template>
                        <template #label>
                            {{ mtrlware.mtrlname }}
                        </template>
                        <template #default>
                            <div class="cell-right-part">
                                <!-- <div class="title">
                                    <i class="iconfont icon-kucun" style="font-size: 14px"></i>
                                    {{ storageData.storagename }}
                                </div> -->
                                <div class="mtrl_num">
                                    <van-tag plain :type="waretype ? 'primary' : 'danger'">{{ isTypeName }}</van-tag>
                                    <template v-if="planqty > 0">
                                        {{ planqty | thousandSeparatorFilter }}
                                        <span style="color: rgba(60, 60, 67, 0.6)">{{isUnit}}</span>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </van-cell>
                </van-skeleton>
            </div>

            <div class="freestyle-cell" v-if="!modelState && storageData.iflocation == 1">
                <van-field
                    v-model.trim="locaFreestyle"
                    class="list-cell"
                    center
                    clearable
                    label="自由选填"
                    placeholder="仓位可自由输入"
                >
                    <template #button>
                        <van-button size="small" type="info" @click="handleConfirmFreestyle">确定</van-button>
                    </template>
                </van-field>
            </div>

            <lj-widget-refresh-list
                class="loca-cell"
                ref="refresh_list"
                offset="100"
                @onRefresh="onRefresh"
                @onLoad="onLoad"
            >
                <template slot="list_body">
                    <template v-if="modelState">
                        <van-cell
                            class="list-cell lj-cell-left"
                            :class="{'storage_sel': item.storageid == storageData.storageid}"
                            v-for="item in storageList"
                            :key="item.scode"
                            :title="item.storagename"
                            :label="item.scode"
                            :is-link="winMode.indexOf('storage-loca') > -1"
                            @click="handleCellClick(item)"
                        >
                            <template #icon>
                                <i class="iconfont icon-kucun"></i>
                            </template>
                            <div class="item-default" style="display:flex;height: 100%;flex-direction: column;">
                                <div class="item-name">
                                    {{ item.outtype == 1 ? '包件进出' : item.outtype == 2 ? '条码进出' : item.outtype == 3 ? '条码进&出不使用' : '直接进出' }}
                                </div>
                                <div class="item-code"  style="font-size: 12px">
                                    <span>仓位:</span>
                                    <van-tag type="primary" plain :color="isTagColor(item)">
                                        <span>{{ item.iflocation == 1 ? '自由选填' : item.iflocation == 2 ? '严格选择' : 'OFF' }}</span>
                                    </van-tag>
                                    <template v-if="item.iflocation > 0">
                                        <van-tag type="primary" v-if="item.mustloca">必</van-tag>
                                        <van-tag type="success" v-if="isUselocation(item)">新</van-tag>
                                    </template>
                                </div>
                            </div>
                        </van-cell>
                    </template>
                    <template v-else>
                        <location-item
                            :datalist="showLocaList"
                            :selectedIndex="selectedIndex"
                            :mtrlCubage="mtrlware.cubage"
                            :uselocationState="uselocationState"
                            :waretype="waretype"
                            :model-type="islocaitemModel"
                            size="mini"
                            @cell-click="handleCellClick"
                            @change-stepper="handleChangeLocaStp"
                            @add-loca="handleActionLoca"
                            @stepper-blur="handleBlur"
                        >
                            <!-- <template slot="icon" slot-scope="data" v-if="model == 'checkbox' || model == 'single'">
                                <template v-if="model == 'checkbox'">
                                    <i class="iconfont" :class="selectedIndex.indexOf(data.item.locacode) == -1 ? 'icon-kongjianweixuan' : 'icon-kongjianyixuan'"></i>
                                </template>
                                <template v-else-if="model == 'single'">
                                    <i class="iconfont icon-unselected"></i>
                                </template>
                            </template> -->
                            <!-- <template slot="default" slot-scope="data">
                                <template v-if="model == 'checkbox'">
                                    <div class="mtrl_num" v-if="data.item.notoutqty > 0">
                                        <span class="span-dot"></span>
                                        {{ data.item.notoutqty | thousandSeparatorFilter }}
                                    </div>
                                </template>
                                <template v-else-if="uselocationState">
                                    <div class="icon-box" v-if="selectedIndex.indexOf(data.item.locacode) == -1">
                                        <div class="mtrl_num" v-if="data.item.notoutqty > 0">
                                            <span class="span-dot"></span>
                                            {{ data.item.notoutqty | thousandSeparatorFilter }}
                                        </div>
                                        <span class="locaicon add"></span>
                                    </div>
                                    <div class="selected-stepper" v-else  @click.prevent.stop>
                                        <van-stepper
                                            v-model="data.item.value"
                                            :min="0"
                                            step="1"
                                            :name="data.item.locacode"
                                            input-width="50px"
                                            @change="data.changeStepper"
                                            @blur="data.stepperBlur"
                                        />
                                    </div>
                                </template>
                                <template v-else-if="data.item.notoutqty">
                                    <div class="mtrl_num" v-if="data.item.notoutqty > 0">
                                        <span class="span-dot"></span>
                                        {{ data.item.notoutqty | thousandSeparatorFilter }}
                                    </div>
                                </template>
                            </template> -->
                            <template slot="title-right" slot-scope="data">
                                <span v-if="data.items.sort >= -4 && data.items.sort <= -2">
                                    <i class="iconfont icon-ic_event_note"/>
                                    {{ data.items.opdate | timeFilter }}
                                </span>
                                <span v-else-if="data.items.sort == 0">
                                    <i class="iconfont icon-relcode"/>
                                    {{ mtrlMsg.plancode }}
                                </span>
                            </template>
                            <template slot="middle-action" slot-scope="data">
                                <div class="mtrl-tag-box">
                                    <span class="lj_tag primary plain" v-if="data.item.sort <= -2 && data.item.ifdefault > 0">
                                        {{ data.item.ifdefault == 1 ? '默认存放' : '默认仓区' }}
                                    </span>
                                    <span class="lj_tag warning" v-if="data.item.sort == -4">
                                        同批号
                                    </span>
                                    <span class="lj_tag warning" v-else-if="data.item.sort == -3">
                                        不同批号
                                    </span>
                                    <span class="lj_tag primary plain" v-if="data.item.notoutqty > 0">
                                        {{ data.item.notoutqty | thousandSeparatorFilter }}{{ mtrlware.unit }}
                                    </span>
                                </div>
                                <template v-if="isNewlocaSelected(data.item)">
                                    <div class="selected-stepper" v-if="selectedIndex.indexOf(data.item.locacode) > -1" @click.prevent.stop>
                                        <van-stepper
                                            v-model="data.item.value"
                                            :min="0"
                                            step="1"
                                            :name="data.item.locacode"
                                            input-width="50px"
                                            @change="data.changeStepper"
                                            @blur="data.stepperBlur"
                                        />
                                    </div>
                                </template>
                            </template>
                        </location-item>

                    </template>
                </template>
            </lj-widget-refresh-list>
        </div>
        <footer class="widget-footer" slot="footer" v-if="isShowFooter">
            <van-popup
                class="footer-popup"
                v-model="showFooterPopup"
                lock-scroll
                position="bottom"
                :style="{ height: '560px' }"
            >
                <div class="footer-popup_main">
                    <div class="popup_header">
                        已选仓位
                    </div>
                    <van-empty v-if="!selectList.length"  description="已选仓位列表为空" />
                    <location-item
                        v-else
                        :datalist="showSelectList"
                        :selectedIndex="selectedIndex"
                        :mtrlCubage="mtrlware.cubage"
                        :uselocationState="uselocationState"
                        :waretype="waretype"
                        :model-type="islocaitemModel"
                        size="mini"
                        @cell-click="handleCellClick"
                        @change-stepper="handleChangeLocaStp"
                        @add-loca="handleActionLoca"
                        @stepper-blur="handleBlur"
                    >
                        <template slot="middle-action" slot-scope="data">
                            <div class="mtrl-tag-box">
                                <span class="lj_tag warning" v-if="data.item.sort == -4">
                                    同批号
                                </span>
                                <span class="lj_tag warning" v-else-if="data.item.sort == -3">
                                    不同批号
                                </span>
                                <span class="lj_tag primary plain" v-if="data.item.notoutqty > 0">
                                    {{ data.item.notoutqty | thousandSeparatorFilter }}{{ mtrlware.unit }}
                                </span>
                            </div>
                            <template v-if="isNewlocaSelected(data.item)">
                                <div class="selected-stepper" v-if="selectedIndex.indexOf(data.item.locacode) > -1" @click.prevent.stop>
                                    <van-stepper
                                        v-model="data.item.value"
                                        :min="0"
                                        step="1"
                                        :name="data.item.locacode"
                                        input-width="50px"
                                        @change="data.changeStepper"
                                        @blur="data.stepperBlur"
                                    />
                                </div>
                            </template>
                        </template>
                    </location-item>
                </div>
            </van-popup>
            <div class="footer_btn-box" :class="{'model_checkbox': model == 'checkbox'}">
                <div class="newloca-box" @click="handleOpenFooterPopup">
                    <div class="main-box">

                        <div class="select-loca" v-if="model == 'checkbox'">
                            已选仓位
                            <van-badge :content="selectedIndex.length" color="#2196f3" />
                        </div>
                        <div class="selected" v-else>
                            <span class="title">合计:</span>
                            <span class="num" :style="{'color': isFooterNumColor}">
                                {{ sumSeled | thousandSeparatorFilter(9999999) }}
                            </span>
                            <span class="deno" v-if="planqty > 0">
                                /{{ planqty | thousandSeparatorFilter(9999999) }}
                            </span>
                        </div>
                        <!-- <div class="waretype mtrl_num" v-if="planqty > 0">
                            <span class="title">{{ isTypeName }}:</span>
                            <span class="span-dot"></span>
                            {{ planqty | thousandSeparatorFilter }}
                        </div> -->
                    </div>
                </div>
                <van-button class="footer_btn" block type="info" @click.stop="handleConfirmFooter">
                    <template v-if="model == 'checkbox'">
                        选择
                    </template>
                    <template v-else>
                        {{ `确定(${selectedIndex.length})` }}
                    </template>
                </van-button>
            </div>
        </footer>
    </lj-win-common>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import LjSearchbar from "components/lj-searchbar";
    import locationItem from './location-item';
    import LjProgress from './lj-progress';
    import ljWidgetRefreshList  from "components/lj-widget-refresh-list"

    export default {
        components: {
            LjSearchbar,
            LjWinCommon,
            locationItem,
            LjProgress,
            ljWidgetRefreshList
        },
        data() {
            return {
                winMode: "",
                model: "single", // newLoca: 新仓位模式, single: 单选仓位
                allData: [],
                queryParams: {},
                // queryFields: [
                //     {title: "仓库编号/名称", property: "keyword"}
                // ]
                searchKeyWord: "",
                // visiblePopup: false,
                searchState: false,
                searchingState: false, // 正在搜索
                // // selLoading: true, // 组件等待状态
                // // locaLoading: true, // 组件等待状态
                selectList: [], // 已选仓库-列表
                selectedIndex: [], // 已选仓位简索
                storageList: [], // 可选仓库-列表
                storageInfo: {}, // 缓存中的数据
                locaList: [], // 可选仓库-列表
                showSelectList: [], // 展示已选仓位列表
                showSelectListIndex: [], // 展示已选仓位列表-索引
                showLocaList: [], // 展示仓位列表
                showLocaListIndex: [], // 展示仓位列表-索引
                paramsSelectList: [], // 入参已选
                paramsSelectListIndex: [], // 入参已选,仓位名
                /**操作类型：1：进仓，0：出仓 */
                searchPlaceholder: "搜索仓位编码/仓位名称",
                searchmodel: false,
                ready: false,
                height: 500,
                headerHeight: 0,
                modelState: true, // 模式判断：true=>选择仓库, false=>选择仓位
                uselocationState: false, // 模式判断：true=>新仓位, false=>单选仓位
                storageData: {}, // 仓库选择参数
                locaFreestyle: '', // 仓位：自由选填
                pageindex: 1,
                pagesize: 40,
                /**属性名 */
                datatype: {
                    code: "lcode",
                    name: "locacode",
                    numberA: "notoutqty",
                    numberB: "loca_qty",
                },
                /**详情属性名 */
                detailDatatype: {
                    propA: "mtrlcode",
                    propB: "mtrlname",
                    propC: "notoutqty",
                    propD: "unit",
                    propE: "mtrltype",
                },
                // mtrlCubage: 0, // 物料体积
                mtrlMsg: {},// 入参物料信息
                mtrlware: {},// 出参物料信息
                waretype: 1, // 进出仓：1，进；0：出
                planqty: 0,
                sumSeled: 0, // 已选全量
                ifbad: -1,
                editState: false, // 是否可编辑
                actionType: 0, // 新仓位模式，判断添加或删除动作
                showFooterPopup: false,
                popupLoading: false,
                popup_main:""
            }
        },
        mounted() {
            this._autoInit();
            this.$refs.refresh_list.fnGotoSkeloading();
            this.onLoad(() => {
                 if (!this.ready) {
                    this.$refs.refresh_list.fnReady();
                    this.ready = true;
                } 
            });
            this.popup_main = this.$refs.refresh_list;
        },
        methods: {
            handleOpenFooterPopup () {
                this.showFooterPopup = !this.showFooterPopup;
                // this.$refs.popup_main.scrollTo(0, 0);
                setTimeout(() => {
                    this.popupLoading = false;
                    
                }, 3800);
            },
            /**底部菜单 */
            handleConfirmFooter() {
                if (this.model == "checkbox") {
                    if (!this.selectList.length) {
                        // 自由选填
                        if (Number(this.storageData.mustloca) == 1 && this.locaFreestyle == '') {
                            $lj.toast('仓位必填，请输入仓位名称');
                            return false;
                        }
                    }

                    $lj.sendEvent('storage-loca', {'storageList':this.storageData, 'locaList': this.selectList});
                    $lj.closeWin();
                    return false;
                } else if (this.uselocationState) {
                    let location = [];
                    let sum = 0;
                    let location_str = "";
                    for (let i = 0; i < this.selectList.length; i++) {
                        if (this.selectList[i].value > 0) {
                            let val = this.selectList[i].value.toString();
                            if (val.indexOf(".") == -1) {
                                val += ".";
                            }
                            location.push(`${this.selectList[i].locacode}:${val}`);
                            sum += Number(val);
                        }
                    }
                    if (location.length) {
                        location_str = location.join(";") + ";";
                    } else {
                        location_str = "";
                    }
                    $lj.sendEvent('storage-loca', {'storageList':this.storageData, 'location_str': location_str, 'sum': sum,'location_list': this.selectList});
                    $lj.closeWin();
                    return;
                    // this.$emit("confirm", {location_str, sum})
                }

                let mainObject = {
                    storageid: this.storageData.storageid,
                    storagename: this.storageData.storagename,
                };
                // 选择仓位
                $lj.sendEvent('storage-loca', {'storageList':this.storageData, 'locaList': mainObject});
                $lj.closeWin();

            },
            /**失去焦点 */
            handleBlur() {
                setTimeout(() => {
                    this.$refs.baseWin.initStyle();
                }, 200);
                console.log('handleBlur this.selectList :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.selectList));
            },
            /**捕捉locaList的步进器变化 */
            handleChangeLocaStp(value, {name}) {
                console.log(' value :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(value));
                console.log(' name :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(name));
                this._autoSyncValue(this.selectList, "locacode", name, "value", value);
                if (this.showFooterPopup) {
                    // 同步showLocaList的值
                    this._autoSyncToShowList(this.showLocaList, "locacode", name, "value", value)
                }
                console.log('handleChangeLocaStp this.selectList :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.selectList));
                let index;
                if (value <= 0 && value != "") {
                    index = this.selectedIndex.indexOf(name);
                    this.handleActionLoca(0, this.selectList[index]);
                }

                this.autoComputAll();
            },
            _autoSyncValue(cpList, attrName, attrVal, setName, setVal) {
                for (let i = 0; i < cpList.length; i++) {
                    if (cpList[i][attrName] == attrVal) {
                        this.$set(cpList[i], setName, setVal);
                        break;
                    }
                }
            },
            _autoSyncToShowList(cpList, attrName, attrVal, setName, setVal) {
                for (let i = 0; i < cpList.length; i++) {
                    for (let j = 0; j < cpList[i].children.length; j++) {
                        if (cpList[i].children[j][attrName] == attrVal) {
                            this.$set(cpList[i].children[j], setName, setVal);
                            return;
                        }
                    }
                }
            },
            /**点击添加或删除 */
            handleActionLoca(type, item) {
                console.log('handleActionLoca item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
                let obj;
                api.notification({
                    vibrate:[50,50], 
                });
                this.actionType = type;
                if (type) {
                    // add
                    if (this.searchState) {
                        // 正在搜索
                        /**如果已经在数据源中，则改变显示状态 */
                        let name = item.locacode;
                        let length = this.locaList.length;
                        for (let i = 0; i < length; i++) {
                            if (name == this.locaList[i].locacode) {
                                this.locaList[i].hasSel = true;
                                // this.$set(this.locaList[i], 'hasSel', true);
                                break;
                            }
                        }
                    }
                    item.hasSel = true;
                    obj = JSON.parse(JSON.stringify(item));
                    obj.value = 0;
                    // obj.isMatch = true;
                    this.selectList.push(obj);
                    this.selectedIndex.push(obj.locacode);
                    this._autoSumSelect(obj);
                } else {
                    // del
                    let name = item.locacode;
                    // 改变正常状态-可选仓库状态
                    for (let i = 0; i < this.locaList.length; i++) {
                        if (name == this.locaList[i].locacode) {
                            this.locaList[i].hasSel = false;
                            break;
                        }
                    }
                    // 删除已选仓库列表
                    if (this.selectedIndex.length > 0 && this.selectedIndex.indexOf(name) > -1) {
                        let delIndex = this.selectedIndex.indexOf(name);

                        // 同步showLocaList的值
                        this._autoSyncToShowList(this.showLocaList, "locacode", name, "value", 0)
                        this._autoDelSelect(item);
                        this.selectList.splice(delIndex, 1);
                        this.selectedIndex.splice(delIndex, 1);
                    }
                    // item.value = 0;
                }
                this.autoComputAll();
            },
            /**外用-开启组件-数据处理 */
            // changeStepper(item) {
            //     console.log(' item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
            //     if (item.value == 0) {
            //         this.handleActionLoca(0, item)
            //     } else {
            //         this.autoComputAll()
            //     }
            // },
            /**外用-开启组件-数据处理 */
            autoComputAll() {
                let sum = 0;
                for (let i = 0; i < this.selectList.length; i++) {
                    sum = $lj.floatAdd(sum, this.selectList[i].value)
                }
                this.sumSeled = sum;
            },
            /** 获取仓位分组名 */
            _fnGetArea(item) {
                let areaName = '';
                switch (true) {
                    case item.sort >= -4 && item.sort <= -2: // -4:同批号； -3:不同批号
                        areaName = this.waretype ? '最后进仓' : '最后出仓';
                        break;
                    case item.sort == 0:
                        areaName = '同批号';
                        break;
                    case item.sort == 1:
                        areaName = '不同批号';
                        break;
                    case item.sort >= 10 && item.sort < 800000:
                        areaName = '默认存放仓位';
                        break;
                    case item.sort <= 999998:
                        areaName = item.area;
                        break;
                    default:
                        areaName = '其他仓位';
                        break;
                }
                return areaName
            },
            /**仓位数据模型变化 */
            _autoSumLoca(item) {
                let areaName = this._fnGetArea(item);
                let hasArea = this.showLocaListIndex.indexOf(areaName);
                if (hasArea == -1) {
                    let obj = {};
                    obj.area = areaName;
                    obj.sort = item.sort;
                    if (item.opdate) {
                        obj.opdate = item.opdate;
                    }
                    obj.children = [item];
                    this.showLocaList.push(obj);
                    this.showLocaListIndex.push(areaName);
                } else {
                    this.showLocaList[hasArea].children.push(item);
                }
            },
            _autoSumSelect(item) {
                let areaName = this._fnGetArea(item);
                let hasArea = this.showSelectListIndex.indexOf(areaName);
                if (hasArea == -1) {
                    let obj = {};
                    obj.area = areaName;
                    obj.sort = item.sort;
                    obj.children = [item];
                    this.showSelectList.push(obj);
                    this.showSelectListIndex.push(areaName);
                } else {
                    this.showSelectList[hasArea].children.push(item);
                }
                console.log('_autoSumSelect++++ showSelectList :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.showSelectList));
            },
            _autoDelSelect(item) {
                let areaName = this._fnGetArea(item);
                for (let i = 0; i < this.showSelectList.length; i++) {
                    if (this.showSelectList[i].area == areaName) {
                        for (let j = 0; j < this.showSelectList[i].children.length; j++) {
                            if (this.showSelectList[i].children[j].locacode == item.locacode) {
                                this.showSelectList[i].children.splice(j, 1);
                                break;
                            }
                        }
                        if (!this.showSelectList[i].children.length) {
                            let index = this.showSelectListIndex.indexOf(areaName);
                            this.showSelectList.splice(i, 1);
                            this.showSelectListIndex.splice(index, 1);
                            break;
                        }
                    }
                }
                console.log('_autoDelSelect---- showSelectList :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.showSelectList));
            },
            /**窗口高度 */
            fixbody(obj){
                console.log('fixbody obj :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(obj));
                this.height = obj.minHeight;
                this.headerHeight = obj.marginTop;
            },
            /**设置仓库数据 */
            getStorageList() {
                this.storageInfo = $lj.getStorage("storageInfo") || {};
                if (this.storageInfo.storagePower == null || this.storageInfo.storagePower == "") {
                    $lj.toast("该用户的仓库权限不存在 / 该用户不存在");
                    return false;
                }
                if (this.storageInfo.storagePower == "-1") {
                    $lj.toast("你没有仓库权限");
                    return false;
                }
                this.storageList = this.storageInfo.storageList;
                console.log(' getStorageList ====>this.storageList :>> ', JSON.stringify(this.storageList));
            },
            /**获取仓位列表 */
            _fnGetLocaList(apiName, requestBody, callback, errorback) {
                // let self = this;
                $lj.postLJRequest(apiName, requestBody, function(ret) {
                    if (ret) {
                        callback(ret);
                    }
                }, function(ret) {
                    if (errorback && !errorback(ret)) return false;
                }, true)
            },
            /**获取仓位列表 */
            getLocaList(selectedList, callback, errorCallBack) {
                let self = this;
                let targetList = []
                for (const key in this.mtrlMsg) {
                    let obj = {};
                    obj.lable = key;
                    obj.value = this.mtrlMsg[key];
                    targetList.push(obj);
                }
                console.log('getLocaList  targetList :>> ', JSON.stringify(targetList));
                let requestBody = {
                    token: $lj.getStorage("token"),
                    keyword: this.searchKeyWord,
                    locaList: selectedList || [],
                    targetList: targetList,
                    storageid: this.storageData.storageid,
                    waretype: this.waretype,
                    ifbad: this.ifbad,
                    pageindex: this.pageindex,
                    pagesize: this.pagesize
                }
                this._fnGetLocaList("GetL1StorageLocaListNew", requestBody, function (ret) {
                    callback && callback();
                    // 新仓位模式
                    if (ret.hasOwnProperty("selectedList") && ret.selectedList.length) {
                        self.selectList = [];
                        self.selectedIndex = [];
                        // 更新已选仓位信息
                        let selList = JSON.parse(JSON.stringify(ret.selectedList));
                        for (let i = 0; i < selList.length; i++) {
                            let index = self.paramsSelectListIndex.indexOf(selList[i][self.datatype.name]);
                            if (index > -1) {
                                if (self.model == "newloca") {
                                    selList[i].value = self.paramsSelectList[index].value;
                                }
                                self.selectList.push(selList[i]);
                                self.selectedIndex.push(selList[i][self.datatype.name])
                                self._autoSumSelect(selList[i]);
                                self.autoComputAll();
                            }
                        }
                        console.log('新仓位模式已选仓位信息 :>> ', JSON.stringify(self.selectList));
                        console.log('新仓位模式已选仓位信息 :>> ', JSON.stringify(self.selectedIndex));
                    }

                    if (ret.hasOwnProperty("locaList")) {
                        for (let i = 0; i < ret.locaList.length; i++) {
                            let obj = JSON.parse(JSON.stringify(ret.locaList[i]));
                            let name = obj[self.datatype.name]
                            obj.hasSel = false;
                            obj.value = 0;
                            // 是否已选
                            if (self.selectedIndex.length && self.selectedIndex.indexOf(name) > -1) {
                                let index = self.selectedIndex.indexOf(name);
                                obj.value = self.selectList[index].value;
                                obj.hasSel = true;
                            }
                            self.locaList.push(obj);
                            self._autoSumLoca(obj);
                        }
                        if (ret.locaList.length < self.pagesize) {
                            self.$refs.refresh_list.fnLoaded(1);
                        } else {
                            self.pageindex++;
                            self.$refs.refresh_list.fnLoaded(0);
                        }
                        console.log('locaListlocaListlocaList :>> ', JSON.stringify(self.locaList));
                        console.log('showLocaList :>> ', JSON.stringify(self.showLocaList));
                    }

                    if (ret.hasOwnProperty("mtrlware")) {
                        // self.mtrlCubage = ret.cubage;
                        self.mtrlware = ret.mtrlware;
                    }

                    // if (ret.hasOwnProperty("cubage")) {
                    //     // self.mtrlCubage = ret.cubage;
                    //     self.mtrlMsg.mtrlCubage = ret.cubage;
                    // }
                    // if (ret.hasOwnProperty("unit")) {
                    //     // self.mtrlCubage = ret.cubage;
                    //     self.mtrlMsg.unit = ret.unit;
                    // }

                }, function(ret) {
                    self.$refs.refresh_list.fnLoadError();
                    errorCallBack && errorCallBack();
                    return true;
                })
            },
            _autoLoadSelectedList() {
                if (this.queryParams.locationStr) {

                    if (this.queryParams.locationStr.indexOf(";") > -1) {
                        // 新仓位模式
                        this.paramsSelectList = [];
                        this.paramsSelectListIndex = [];
                        let selList = this.queryParams.locationStr.split(";");
                        console.log("selList==>", JSON.stringify(selList));
                        let length = selList.length;
                        for (let i = 0; i < length; i++) {
                            if (selList[i] == "") continue;
                            let obj = {};
                            let val = selList[i].split(":");
                            obj.locacode = val[0];
                            // obj[this.datatype.numberA] = Number(val[1]);
                            obj.value = Number(val[1])
                            // obj.isMatch = true;
                            this.paramsSelectList.push(obj);
                            this.paramsSelectListIndex.push(val[0]);
                            // this.selectedIndex.push(obj.locacode);
                        }
                        console.log(' this.paramsSelectList :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.paramsSelectList));
                        /**计算总数 */
                        this.autoComputAll();
                    } else {
                        // 仓位单选
                    }
                }
            },
            /**扫描，调用摄像头 */
            hanldeScanLocation() {
				let self = this;
                $lj.openScanner((ret) => {
                    setTimeout(() => {
                        let content = ret.content.trim();
                        self.searchKeyWord = $lj.matchStorageQrCode(content);
                        self.handleSearchNow(true, $lj.matchStorageQrCode(content));
                    }, 200);
                });
            },
            /**点击选择 */
            handleCellClick(mainObject) {
                console.log(' mainObject :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(mainObject));
                console.log(' this.winMode :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.winMode));
                switch (this.winMode) {
                    // 单选仓库
                    case "single-storage":
                        $lj.sendEvent('storage-loca', {'storageList': mainObject});
                        $lj.closeWin();
                        break;
                    // 仓库仓位选择
                    case "storage-loca":
                        if (this.modelState) {
                            // 选择仓库
                            this.$refs.popup_main.scrollTo(0, 0);
                            this.storageData = mainObject;
                            this._autoStorageAction(this.storageData);
                        } else {
                            // 选择仓位
                            if (this.uselocationState || this.model == "checkbox") {
                                let hasSel = this.selectedIndex.indexOf(mainObject.locacode) == -1 ? 1 : 0;
                                this.handleActionLoca(hasSel, mainObject);
                                return false;
                            }

                            $lj.sendEvent('storage-loca', {'storageList':this.storageData, 'locaList': mainObject});
                            $lj.closeWin();
                        }
                        break;
                    // 单选仓位
                    case "single-loca":
                        // 选择仓位
                        if (this.uselocationState || this.model == "checkbox") {
                            let hasSel = this.selectedIndex.indexOf(mainObject.locacode) == -1 ? 1 : 0;
                            this.handleActionLoca(hasSel, mainObject);
                            return false;
                        }

                        $lj.sendEvent('storage-loca', {'storageList':this.storageData, 'locaList': mainObject});
                        $lj.closeWin();
                        break;
                }
            },
            /**关闭组件后调用 */
            handleCloseWin() {
                switch (this.winMode) {
                    // // 单选仓库
                    // case "single-storage":
                    //     break;
                    // 仓库仓位选择
                    case "storage-loca":
                        if (!this.modelState) {
                            // 返回选择仓库
                            this.modelState = true
                            this.$refs.popup_main.scrollTo(0, 0);
                            this.uselocationState = false;
                            this.pageindex = 1;
                            this.selectList = []; // 清空已选
                            this.selectedIndex = [];
                            this.showSelectList = [];
                            this.showSelectListIndex = [];
                            this._autoResetLoca();
                            // this.getStorageList();
                            // 加载状态结束
                            this.$refs.refresh_list.fnLoaded(1);
                            return false;
                        }
                        break;
                }
                $lj.closeWin();
            },
            /**点击仓库后，业务逻辑判断 */
            _autoStorageAction(storage) {
                if(storage.iflocation == 0){
                    // 不使用仓位
                    // this.uselocationState = false;
                    $lj.sendEvent('storage-loca', {'storageList': storage});
                    $lj.closeWin();
                    return false;
                }else{
                    if (this.model == "single") {
                        this.uselocationState = false;
                    } else {
                        this.uselocationState = $lj.ifUselocation(this.storageData);
                    }
                }
                console.log('点击仓库后_autoStorageAction this.uselocationState :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.uselocationState));
 
                this.modelState = false;
                this.$refs.refresh_list.fnLoading();
                this.ready = false;
                this.getLocaList(this.paramsSelectListIndex);
            },
            /**选择仓位-重置状态 */
            _autoResetLoca() {
                this.locaList = [];
                this.showLocaList = [];
                this.showLocaListIndex = [];
                // this.mtrlCubage = 0;
                // this.mtrlMsg.mtrlCubage = 0;
                // this.mtrlMsg.unit = '';
                this.showFooterPopup = false;
            },
            /**取消搜索 */
            handleCancelSearch() {
                this.searchState = false;
                this.searchKeyWord = "";
                // this.$refs.refresh_list._autoResetStatus();
                this.onRefresh();
            },
            /**加载更多 */
            onLoad(callback, errorCallBack) {
                switch (this.winMode) {
                    // 单选仓库
                    case "single-storage":
                        // this.getStorageList(callback);
                        callback && callback();
                        // 加载状态结束
                        this.$refs.refresh_list.fnLoaded(1);
                        break;
                    // 仓库仓位选择
                    case "storage-loca":
                        if (this.modelState) {
                            // 选择仓库
                            // this.getStorageList(callback);
                            callback && callback();
                            // 加载状态结束
                            this.$refs.refresh_list.fnLoaded(1);
                        } else {
                            // 选择仓位
                            this.getLocaList(this.paramsSelectListIndex, callback, errorCallBack);
                        }
                        break;
                    // 单选仓位
                    case "single-loca":
                        this.getLocaList(this.paramsSelectListIndex, callback, errorCallBack);
                        break;
                }
            },
            /**下拉加载 */
            onRefresh() {
                this.pageindex = 1;
                this.onLoad(() => {
                    if (this.modelState) {
                        // 选择仓库
                        // this.storageList = [];
                        // return false
                    } else {
                        // 选择仓位
                        this._autoResetLoca();
                    }
                    console.log('刷新啦 ~~~~~~~~~~ :>> ');
                    this.$refs.refresh_list.fnRefreshed();
                });
            },
            /**仓位自由选填：确定按钮 */
            handleConfirmFreestyle() {
                if (this.storageData.iflocation == 1) {
                    // 自由选填
                    if (Number(this.storageData.mustloca) == 1 && this.locaFreestyle == '') {
                        $lj.toast('仓位必填，请输入仓位名称');
                        return false;
                    }
                }

                let mainObject = {
                    storageid: this.storageData.storageid,
                    storagename: this.storageData.storagename,
                    locacode: this.locaFreestyle,
                    lcode: this.locaFreestyle
                };
                // 选择仓位
                $lj.sendEvent('storage-loca', {'storageList':this.storageData, 'locaList': mainObject});
                $lj.closeWin();
            },
            /**搜索功能，未完善 */
            handleSearchNow(isScan, keyword) {
                console.log('keyword :>> ', keyword);
                
                switch (this.winMode) {
                    // 单选仓库
                    case "single-storage":
                        // 在本地找
                        let matchLocal 
                        // if (isScan) {
                            matchLocal = this._fnMatchStorage(keyword, this.storageList);
                        // }

                        console.log('handleSearchNow matchLocal :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(matchLocal));

                        break;
                    // 仓库仓位选择
                    case "storage-loca":
                        if (this.modelState) {
                            // 选择仓库
                            let matchLocal 
                            // if (isScan) {
                                matchLocal = this._fnMatchStorage(keyword, this.storageList);
                            // }

                            console.log('handleSearchNow matchLocal :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(matchLocal));
                        } else {
                            // 选择仓位
                            this._autoResetLoca();
                            this.pageindex = 1;
                            this.searchingState = true;
                            this.getLocaList(null, () => {
                                this.searchState = true;
                                this.searchingState = false;
                            }, () => {
                                this.searchingState = false;
                            });

                        }
                        break;
                    // 单选仓位
                    case "single-loca":
                        // 选择仓位
                        this._autoResetLoca();
                        this.pageindex = 1;
                        this.searchingState = true;
                        this.getLocaList(null, () => {
                            this.searchState = true;
                            this.searchingState = false;
                        }, () => {
                            this.searchingState = false;
                        });
                        break;
                }
            },
            /**扫描匹配仓库仓位 关键信息：storageid,storagename,locacode,lcode*/
            _fnMatchStorage(keyWord, list) {
                let obj = null;
                // 再检测仓库仓位列表
                for (let i = 0; i < list.length; i++) {
                    if ((list[i].hasOwnProperty("lcode") && list[i].lcode) || (list[i].hasOwnProperty("locacode") && list[i].locacode)) {
                        if (keyWord == list[i].lcode || keyWord == list[i].locacode) {
                            obj = list[i];
                            break;
                        }
                    } else if (keyWord == list[i].storageid || keyWord == list[i].storagename) {
                        obj = list[i];
                        break;
                    }
                }
                return obj;
            },
            // handleDataReset(response) {
            //     // alert(JSON.stringify(response.sptList));
            //     // alert(JSON.stringify(response));
            //     this.allData.length = 0;
            //     this.addList(response.storageList);
            // },
            // handleDataLoaded(response) {
            //     // let moreItems = response.storageList;
            //     // if (moreItems.length > 0) {
            //     //     this.addList(moreItems);
            //     //     return true;
            //     // }
            //     return false;
            // },
            // addList(list) {
            //     this.allData = this.allData.concat(list);
            // },
            // handleSearchbar(text) {
            //     this.$refs.baseWin.refresh({keyword: text});
            // },
            /**初始化 */
            _autoInit() {
                this.pageindex = 1;
                let pageParam = $lj.getPageParam();
                console.log('初始化！！！ pageParam :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(pageParam));
                if (pageParam) {
                    this.winMode = pageParam.winMode;
                    if (pageParam.model) this.model = pageParam.model;
                    if (pageParam.storageList) {
                        this.storageList = pageParam.storageList;
                    } else {
                        this.getStorageList();
                    }
                    this.queryParams = pageParam.queryParams || {};
                    if (JSON.stringify(this.queryParams) != '{}') {
                        this.mtrlMsg = pageParam.queryParams.mtrlMsg || {};
                        if (pageParam.queryParams.waretype != undefined) this.waretype = pageParam.queryParams.waretype ;
                        this.planqty = pageParam.queryParams.planqty || 0;
                        this.editState = pageParam.queryParams.editState || false;
                        this.ifbad = pageParam.queryParams.ifbad || -1;
                        // this.storageData = pageParam.queryParams.storageData || {};
                        this.modelState = pageParam.queryParams.modelState || true;
                        if (pageParam.queryParams.hasOwnProperty('storageid')) {
                            let index = -1;
                            for (let i = 0; i < this.storageList.length; i++) {
                                if (this.storageList[i].storageid == pageParam.queryParams.storageid) {
                                    index = i;
                                    break;
                                }
                            }
                            if (index == -1) {
                                $lj.toast("你没有此仓库编辑权限");
                            } else {
                                this.storageData = this.storageList[index];
                            }
                        }

                        this._autoLoadSelectedList();
                    }
                }
                console.log('pageParam :>>', JSON.stringify(pageParam));
                switch (this.winMode) {
                    // 仓库仓位选择
                    case "single-loca":
                    case "storage-loca":
                        if (JSON.stringify(this.storageData) != "{}") {
                            // 进入仓库选择页面
                            // this.storageData = this.queryParams.storageData;
                            if (this.storageData.iflocation > 0) this.modelState = false;
                            this.uselocationState = $lj.ifUselocation(this.storageData);
                        }
                        if (this.model == "single") this.uselocationState = false;
                        break;
                }
            }
            // addcus() {
            //     $lj.openWin("spt-detail");
            // },
            // handleQueryFieldClick({property}) {
            //     if (property === 'cusareaid') {
            //         this.$refs.areaChooseDialog.open();
            //     }
            // },
        },
        computed: {
            // isShowLocaList() {
            //     for (let index = 0; index < array.length; index++) {
            //         const element = array[index];
                    
            //     }
            //     return []
            // },
            // isSelectMode() {
            //     return this.winMode === "single-select";
            // },
            title() {
                let name = ""
                switch (this.winMode) {
                    case "single-storage":
                        name = "仓库选择";
                        break;
                    case "single-loca":
                        // name = "仓位选择";
                        name = this.storageData.storagename;
                        break;
                    case "storage-loca":
                        if (this.modelState) {
                            name = "仓库选择";
                        } else {
                            // name = "仓位选择";
                            name = this.storageData.storagename;
                        }
                        break;
                }
                return name;
            },
            isVolumeProgress(a, b) {
                return function(a, b) {
                    return $lj.floatMul($lj.floatDiv(a, b).toFixed(2) ,  100)
                }
            },
            isProgressColor(a, b) {
                return function(a, b) {
                    let percent = $lj.floatMul($lj.floatDiv(a, b).toFixed(2) ,  100);

                    return percent > 100 ? '#f44336' : '#66bb6a';
                }
            },
            isTypeName() {
                return Number(this.waretype) ? '进仓' : '出仓';
            },
            isAssumePercent(a, b) {
                return function(a, b) {
                    // return $lj.floatMul($lj.floatDiv(a * this.mtrlCubage, b).toFixed(2), 100);
                    return $lj.floatMul($lj.floatDiv(a * this.mtrlware.cubage, b).toFixed(2), 100);
                }
            },
            isShowFooter() {
                /**是否显示底部控制栏 */
                if (!this.editState) return false;
                let bool = false;
                if (!this.modelState) {
                    // 选仓位的时候
                    if (this.storageData.iflocation == 1 && !this.storageData.mustloca) {
                        // 自由选填时，非仓位必填
                        bool = true
                    } else if (this.uselocationState) {
                        // 新仓位模式
                        bool = true
                    } else if (this.model == "checkbox") {
                        bool = true
                    }
                }
                return bool
            },
            isNewlocaSelected(item) {
                return function(item) {
                    if (this.selectedIndex.indexOf(item.locacode) == -1) {
                        return false;
                    } else {
                        if (this.model == 'checkbox') {
                            return false;
                        }
                        if (this.uselocationState) {
                            return true
                        }
                    }
                    return false
                }
            },
            // 标签颜色：仓位设置类型
            isTagColor(item) {
                return function(item) {
                    let color = "";
                    switch (item.iflocation) {
                        case 0:
                            color = "#8B8B8B"
                            break;
                        case 1:
                            color = "#ffa726"
                            break;
                        case 2:
                            color = "#fc4e2c"
                            break;
                    }
                    return color
                }
            },
            // 控制location模式，
            islocaitemModel() {
                let model = this.model;
                if (this.winMode == 'single-loca' && !this.uselocationState) {
                    // 当只能仓位单选时，不使用新仓位模式的仓库，model改成single,
                    model = 'single'
                }
                return model
            },
            // 是否使用新仓位模式
            isUselocation(item) {
                return function(item) {
                    return $lj.ifUselocation(item);
                }
            },
            // 计算是否超填合计数
            isFooterNumColor() {
                if (this.planqty == 0) return '#2196f3';
                let percent = $lj.floatMul($lj.floatDiv(this.sumSeled, this.planqty).toFixed(2),  100);

                return percent > 100 ? '#f44336' : '#2196f3';
            },
            isUnit() {
                let pageParam = $lj.getPageParam();
                return pageParam.queryParams.unit || this.mtrlware.unit
            }
        },
        watch: {
            selectList: {
                handler(newVal, oldVal) {
                    // add
                    if (this.planqty > 0 && this.actionType) {
                        let sum = this.planqty;
                        this.actionType = false;

                        for (let i = 0; i < newVal.length; i++) {
                            if (newVal[i].value > 0) {
                                sum = $lj.floatSub(sum, newVal[i].value);
                            } 
                            if (i == newVal.length - 1) {
                                let num = 0;
                                console.log(' i :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(i));
                                console.log(' num :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(num));
                                console.log(' sum :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(sum));
                                console.log(' !Number(this.waretype) :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(!Number(this.waretype)));
                                console.log('__________________ :>> ');
                                if (!Number(this.waretype)) {
                                    // 出仓
                                    num = sum > Number(newVal[i].notoutqty) ? Number(newVal[i].notoutqty) : sum > 0 ? sum : 0;
                                } else {
                                    // 进仓
                                    num = sum > Number(this.planqty) ? Number(this.planqty) : sum > 0 ? sum : 0;
                                }
                                console.log(' i :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(i));
                                console.log(' num :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(num));
                                console.log(' sum :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(sum));
                                this.$set(newVal[i], "value", num);
                                this._autoSyncValue(this.locaList, "locacode", newVal[i].locacode, "value", num);
                                sum = 0;
                            }
                            if (sum <= 0) break;
                        }
                        this.autoComputAll();
                    }
                },
                deep: true
            }
        }
    }
</script>

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

.lj-storage-widget {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    position: relative;

    // background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &.searching {
        background-color: #fff;
    }
    .header_btn {
        padding-left: 0;
        padding-right: 0;
        width: 60px;
        min-width: 60px;
    }
    .search-widget {
        // flex-shrink: 0;
        position: relative;
        background-color: #f2f2f2;
        z-index: 10;

        .van-search {
            background-color: rgb(238, 238, 238)!important;
        }
        .van-search__content {
            border-radius: 8px;
            // background-color: #fff;
            // border: 1px solid transparent;
        }
        .searching {
            .van-search__content {
                // border-color: rgba(33, 150, 243, 0.8);
                box-shadow: 0 1px 4px rgba(33, 150, 243, 0.3);
            }
        }
        .search-icon {
            height: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .freestyle-cell {
        padding: 5px 10px;
        padding-bottom: 8px;
        .list-cell {
            background-color: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            padding: 8px 16px;

            .van-cell__label {
                margin-top: 0;
            }
        }
        .van-button {
            border-radius: 8px;
        }
    }
    .widget-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px;
        width: 100%;
        display: flex;
        z-index: 9999;
        // background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);

        // .van-overlay {
        //     background-color: unset;
        // }
        // .van-cell-group {
        //     background-color: unset;
        // }

        .footer_btn-box {
            display: flex;
            padding: 4px;
            width: 100%;
            height: 44px;
            z-index: 9999;
            // box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.04), 0px 0px 6px 0px rgba(0,0,0,0.12);
            overflow: hidden;
            border-radius: 8px;
            background-color: #fff;

            box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px rgba(0, 0, 0, 0.25), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
            // box-shadow: 0px 5px 12px 4px rgba(0, 0, 0, 0.09), 0px 3px 6px rgba(0, 0, 0, 0.12), 0px 1px 2px -2px rgba(0, 0, 0, 0.16);


            .newloca-box {
                flex-shrink: 0;
                min-width: 50%;
                max-width: 80%;
                display: flex;
                align-items: stretch;
                height: 100%;
                // width: 60%;
                background-color: #fff;

                .select-loca {
                    display: flex;
                    align-items: center;
                    // padding: 0 8px;
                    font-size: 12px;
                    color: @summaryLightTextColor;
                }
                .main-box {
                    display: flex;
                    align-items: center;
                    // justify-content: flex-end;
                    // flex-direction: column;
                    flex: 1;
                    padding: 0 8px;
                    text-align: left;

                    > div {
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }

                    .title {
                        font-size: 12px;
                        // color: @summaryLightTextColor;
                        font-weight: normal;
                    }
                    .num {
                        font-weight: 700;
                        font-size: 20px;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        text-align: center;
                    }
                    .deno {
                        color: @summaryLightTextColor;
                        text-align: right!important;
                        font-size: @statusBadgeTextFontSize;
                    }
                    // .waretype {
                    //     color: @summaryLightTextColor;
                    //     text-align: left!important;
                    //     font-size: @statusBadgeTextFontSize;
                    // }
                }
            }
            .footer_btn {
                flex: 1;
                max-width: 50%;
                min-width: 20%;
                height: auto;
                border-radius: 8px;
            }

            &.model_checkbox {
                .footer_btn {
                    width: 60%;
                }
            }
        }
    }

    .footer-popup {
        // background-color: unset;
        // padding: 10px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;

        .footer-popup_main {
            // background-color: #f8f8f8;
            position: relative;
            overflow: auto;
            height: 100%;
            border-radius: 10px;
            padding-bottom: 60px;
            padding-top: 44px;
            // display: flex;
            // flex-direction: column;
        }

        .popup_header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            background-color: #f8f8f8;
        }
        // .popup_body {
        //     flex: 1;
        //     overflow: auto;
        //     height: 518px;
        //     // height: 100%;
        // }

        .selected-stepper {
            display: flex;
            justify-content: center;

            .van-stepper__input {
                color: @musePrimary;
            }
        }
    }

    .suggestion{
        margin: 5px 10px;
        color: @musePrimary;
        font-size: 14px;
    }

    .popup-main {
        position: relative;
        flex: 1;
        overflow: auto;
        // background: linear-gradient(to up, rgba(0, 0, 0, 0.2), transparent);
        &.hasfooter{
            padding-bottom: 60px;
        }
    
        .loca-cell {
            position: relative;
            background-color: transparent;
            min-height: 300px;
            
            .list-cell {
                margin: 0 10px;
                margin-top: 8px;
                background-color: #ffffff;
                border-radius: 8px;
                overflow: hidden;
                padding: 8px 16px;
                width: inherit;

                .icon-kucun {
                    font-size: 14px;
                    margin-right: 4px;
                    color: @summaryLightTextColor;
                }

                &.storage_sel {
                    border: 1px solid rgba(33, 150, 243, 0.6);
                    background-color: rgb(237, 245, 252);
                    box-shadow: 0px 8px 20px 8px rgba(33, 150, 243, 0.05), 0px 6px 16px rgba(33, 150, 243, 0.08), 0px 3px 6px -4px rgba(33, 150, 243, 0.12);
                }
            }
            .selected-stepper {
                display: flex;
                justify-content: center;

                .van-stepper__input {
                    color: @musePrimary;
                }
            }
            .van-skeleton__row, .van-skeleton__title{
                background-color: #fff;
                border-radius: 4px;
            }
            .van-cell-group {
                background-color: unset;
            }
            .loca_title_widget {
                display: flex;
                color: #999999;
                font-size: 12px;

                .loca_left {
                    flex: 1;
                }
                .loca_right {
                    flex-shrink: 0;
                }
            }

            .mtrl_num {
                font-size: @statusBadgeTextFontSize;
                color: @secondary;
                font-weight: normal;
            }
        }
        .van-cell::after {
            content: none;
        }
        &.searching {
			.van-cell::after {
				content: ''!important;
			}
        }
    }
    // .van-search__action {
    //     padding: 0;
    // }
    .search-right-action {
        flex-shrink: 0;
        display: flex;
        width: 50px;
        margin: 0 5px;

        .search-child-btn {
            width: 100%;
            height: inherit;
            text-align: center;
            border-radius: 25px;

            &.confirm-btn {
                background-color: @musePrimary;
                color: #ffffff;
            }
        }
    }
    .material-widget {
        padding: 5px 10px;
        .material-cell {
            padding: 8px 16px;
            border-radius: 8px;
            // background-color: #f5f5f5;
            background-color: transparent;

            .iconfont {
                padding-right: 5px;
            }
        }
        .van-skeleton__row, .van-skeleton__title{
            background-color: #fff;
            border-radius: 4px;
        }
    }
    .cell-right-part {
        display: flex;
        flex-direction: column;

        .title {
            color: #999999;
            flex: 1;
        }
    }
}
.mtrl-tag-box {
    position: absolute;
    top: -8px;
    right: 8px;
}
.mtrl_num {
    font-size: 14px;
    color: #333;
    // font-weight: bold;
    text-align: right;

    // .span-dot {
    //     display: inline-block;
    //     background-color: @colorBlue;
    //     width: 8px;
    //     height: 8px;
    //     border-radius: 50%;
    // }
}
</style>
