<!--
@name 业务组件：新仓位模式选择，附属组件-仓位列表
@desc 基于 vant-ui

【必填参数】：
    @param {Number/String} [waretype] - 操作类型：1：进仓，0：出仓 
    @param {Boolean} [searchmodel] - css样式切换 
    @param {Object} [datatype] - 数据属性名称
        @默认: {
            code: "lcode", // 仓位码
            name: "locacode", // 仓位名称
            numberA: "notoutqty", // 已存放数量
            numberB: "loca_qty", // 总存放量（全部产品）
        }
    @param {Array} [selectList] - 已选仓位列表
    @param {Array} [locaList] - 可选仓位列表

【选填参数】
    @param {String}} [errorText] - 错误提示，默认：”请求失败，点击重新加载“
    @param {String}} [finishedText] - 错误提示，默认：”没有更多了“
    @param {String}} [selectedText] - 已选栏标题
    @param {String}} [selectedRightText] - 已选栏，右侧标题
    @param {String}} [canchooseText] - 可选栏标题
    @param {String}} [canchooseRightText] - 可选栏，右侧标题
    @param {String}} [inputWidth] - 步进器输入框宽度

【插槽】
    @slot [selected-right] - 当前已选栏右侧插槽
        @param {Object} item - 数据源
        @param {Object} dtype - 数据属性名称
    @slot [choose-right] - 当前可选栏右侧插槽
        @param {Object} item - 数据源
        @param {Object} dtype - 数据属性名称

【回调出惨】
    @function {out} actionLoca({type, item, idx}) - 添加或删除按钮；
        【参数】{Number} type - 动作，0：删除， 1：添加;
              {Object} item - 数据，
              {Number} idx - 索引
    @function {out} change() - 监听步进器的值；
    @function {out} showdetail(data) - 点击查看仓位详情；
        【参数】{Object} data - 数据，

【父组件调用方法】
    @function {in} setEmpty() - 空状态；
    @function {in} selFirstDone() - 已选列表加载完成，关闭骨架；
    @function {in} selFirstLoading() - 已选列表第一次开启，打开骨架；
    @function {in} locaFirstDone() - 可选列表加载完成，关闭骨架；
    @function {in} locaFirstLoading() - 可选列表第一次开启，打开骨架；
    @function {in} onLoad() - list加载；
    @function {in} loadDone(isFinish) - list加载完成；【参数】{Boolean} 是否已经完成加载
    @function {in} loadError() - list加载出错


-->
<template>
   <div class="main-list" :class="searchmodel ? 'searching':''">
        <van-empty v-if="emptyState" image="search" description="暂无匹配数据" />
        <template v-else>
            <div class="sellist-widget">
                <div class="loca_title_widget">
                    <div class="loca_left">
                        {{ selectedText }}
                    </div>
                    <div class="loca_right">
                        {{ selectedRightText }}
                    </div>
                </div>
                <van-skeleton round :row="3" :loading="selLoading">
                    <div class="loca_list-widget select-list">
                        <template v-for="(item, index) in selectList">
                            <van-cell
                                v-if="item.isMatch"
                                :key="index"
                                class="loca-cell"
                            >
                                <template #title>
                                    <span @click="handleShowDetail(item)"><i class="iconfont icon-xing remind" v-if="item.ifmy"/>{{ item[datatype.name] }}</span>
                                </template>
                                <template #label>
                                    <template v-if="searchmodel">
                                        {{ item[datatype.code] }}
                                    </template>
                                    <template v-else>
                                        <van-loading
                                            v-if="selectedLoading"
                                            type="spinner"
                                            size="18"
                                        />
                                        <template v-else>
                                            <template v-if="item[datatype.numberA] != undefined">
                                                {{ '已储存:' + item[datatype.numberA] }}
                                            </template>
                                        </template>
                                    </template>
                                </template>
                                <template #icon>
                                    <div class="icon-box" @click="handleActionLoca(0, item, index)">
                                        <span class="locaicon del"></span>
                                    </div>
                                </template>
                                <template #default>
                                    <slot name="selected-right" :item="item" :dtype="datatype">
                                        <div class="selected-stepper">
                                            <van-stepper
                                                v-model="item.value"
                                                min="0"
                                                :max="isStepperMax(item[datatype.numberA])"
                                                step="1"
                                                :input-width="inputWidth"
                                                @change="handleChangeStepper"
                                            />
                                        </div>
                                    </slot>
                                </template>
                            </van-cell>
                        </template>
                    </div>
                </van-skeleton>
            </div>
            <div class="localist-widget">
                <div class="loca_title_widget">
                    <div class="loca_left">
                        {{ canchooseText }}
                    </div>
                    <div class="loca_right">
                        {{ canchooseRightText }}
                    </div>
                </div>
                <van-skeleton round :row="6" :loading="locaLoading">
                    <van-list
                        class="loca_list-widget cansel-list"
                        v-model="listLoading"
                        :error.sync="error"
                        :error-text="errorText"
                        :finished="finished"
                        :finished-text="finishedText"
                        offset="100"
                        :immediate-check="false"
                        @load="onLoad"
                    >
                        <van-cell
                            v-for="(item, index) in isShowLocaList"
                            :key="index"
                            class="loca-cell"
                            :label="item[datatype.code]"
                            @click="handleActionLoca(1, item)"
                        >
                            <template #title>
                                <span @click.prevent.stop="handleShowDetail(item)"><i class="iconfont icon-xing remind" v-if="item.ifmy"/>{{ item[datatype.name] }}</span>
                            </template>
                            <template #icon>
                                <div class="icon-box">
                                    <span class="locaicon add"></span>
                                </div>
                            </template>
                            <template #default>
                                <slot name="choose-right" :item="item" :dtype="datatype">
                                    <div class="cell-right-part">
                                        <div class="num">{{ item[datatype.numberA] }}</div>
                                    </div>
                                </slot>
                            </template>
                        </van-cell>
                    </van-list>
                </van-skeleton>
            </div>
        </template>
   </div>
</template>

<script>
import {Cell, Skeleton, Stepper, List, Loading, Empty } from "vant";

export default {
    components: {
        "van-cell": Cell,
        "van-skeleton": Skeleton,
        "van-stepper": Stepper,
        "van-list": List,
        "van-loading": Loading,
        "van-empty": Empty
    },
    data() {
        return {
            listLoading: false, // list加载状态
            selectedLoading: true, // 已选状态数值
            // finished: false, // list全部加载完状态
            selLoading: true, // 第一次打开已选仓库-加载状态
            locaLoading: true, // 第一次打开可选仓库-加载状态
            emptyState: false, // 空
            error: false, // list错误状态
        }
    },
    props:{
        /**操作类型：1：进仓，0：出仓 */
        waretype: {
            type: Number/String,
            default: 1
        },
        searchmodel: { // css模式
            type: Boolean,
            default: false,
        },
        /**数据名 */
        datatype: {
            type: Object,
            default: function () {
                return {
                    code: "",
                    name: "",
                    numberA: "",
                    numberB: ""
                };
            }
        },
        selectList: { // 已选仓库-列表
            type: Array,
            default: function () {
                return [];
            }
        },
        locaList: { // 可选仓库-列表
            type: Array,
            default: function () {
                return [];
            }
        },
        errorText: {
            type: String,
            default: "请求失败，点击重新加载"
        },
        finishedText: {
            type: String,
            default: "没有更多了"
        },
        selectedText: {
            type: String,
            default: ""
        },
        canchooseText: {
            type: String,
            default: ""
        },
        selectedRightText: {
            type: String,
            default: ""
        },
        canchooseRightText: {
            type: String,
            default: ""
        },
        inputWidth: {
            type: String,
            default: "50px"
        },
        finished: {
            type: Boolean,
            default: false
        },
    },
    computed: {
        /**已选列表-stepper最大值 */
        isStepperMax(data) {
            return function(data) {
                // return Boolean(Number(this.waretype)) ? undefined : data; // 不作限制
                return undefined
            }
        },
        isShowLocaList() {
            return this.locaList.filter((item) => !item.hasSel)
        }
    },
    methods: {
        /**点击添加或删除 */
        handleActionLoca(type, item) {
            this.$emit("actionLoca", {type, item})
        },
        setEmpty(){
            this.emptyState = true;
        },
        selFirstDone(){
            this.selLoading = false;
            this.selectedLoading = false;
        },
        selFirstLoading(){
            this.selLoading = true;
        },
        locaFirstDone(){
            this.locaLoading = false;
        },
        locaFirstLoading(){
            this.emptyState = false;
            this.locaLoading = true;
        },
        loadDone(type) {
            this.listLoading = false;
            // this.finished = Boolean(type);
        },
        loadError() {
            // this.finished = false;
            this.listLoading = false;
            this.error = true;
        },
        onLoad() {
            console.log('触发了onload :>> ', this.finished);
            if (this.finished) return false;
            this.listLoading = true;
            this.$emit("loadMore");
        },
        handleChangeStepper() {
            this.$emit("change");
        },
        handleShowDetail(data) {
            this.$emit("showdetail", data);
        },
        resetState() {
            this.listLoading = false;
            // this.finished = false;
            this.emptyState = false;
            this.error = false;
        }
    }
}
</script>

<style lang="less">
@import "~assets/css/lj-style-variable.less";
.main-list {
    .cell-right-part {
        display: flex;
        flex-direction: column;

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

        .loca_left {
            flex: 1;
        }
    }
    &.searching {
        .loca_title_widget {
            margin: 10px;
            padding: 5px;
            border-radius: 4px;
            background-color: #f2f2f2;
        }
        .cansel-list {
			.van-cell::after {
				content: ''!important;
			}
        }
    }
    .localist-widget {
        margin-top: 10px;
    }
    .loca_list-widget {
        .loca-cell {
            padding: 2px;
            padding-right: 10px;
            background-color: #fff;

            .van-cell__label {
                margin-top: 0;
            }
            .icon-box {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .selected-stepper {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                height: 100%;

                .van-stepper__input {
                    color: @musePrimary;
                }
            }
        }
        &.select-list {
            margin: 0 10px;
            border-radius: 8px;
            overflow: hidden;
        }
        &.cansel-list {
            margin: 0 10px;
            .loca-cell {
                margin-bottom: 4px;
                border-radius: 8px;
                overflow: hidden;

            }
			.van-cell::after {
				content: none;
			}
        }
    }
    .van-skeleton__row, .van-skeleton__title {
        background-color: #dddddd;
    }
	.remind{
		font-size: 16px;
		color: @colorWarn;
	}
}
.locaicon {
    display: block;
    position: relative;
    width: 16px;
    height: 16px;
    margin: auto 10px;
    border-radius: 50%;

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

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