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

【必填参数】：
    @param {String} [title] - 仓位名称 
    @param {Object} [basicMsg] - 必要参数
        @example: {
            storageid: 0, // 仓库ID
            scid: 0, // 物料scid
            mtrlwareid: 0, // 物料库存id
            mtrlcode: "", // 物料编码
            mtrlname: "", // 物料名称
            location_str: "" // 当前新仓位数据，如新增：”“；格式：仓位A:数据A;仓位B:数据B;
        }

【选填参数】
    @param {Object} [detailDatatype] - 仓位详情数据属性名称
        @默认: {
            propA: "mtrlcode",
            propB: "mtrlname",
            propC: "notoutqty",
            propD: "unit",
            propE: "mtrltype",
        }

【插槽】
    @slot [material] - 当前物料基本信息
        @param {Object} basic - 必要参数，与上述basicMsg相同
        @param {String} title - 进出仓描述，显示：”进仓“或”出仓“
        @param {Number} total - 当前存储量汇总

【回调出惨】
    @function {out} confirm(data) - 确认按钮事件；
        【参数】{String} data - 已选存储仓位，格式：仓位A:数据A;仓位B:数据B;
    @function {out} closed() - 关闭组件回调事件

【父组件调用方法】
    @function {in} open() - 开启组件；
    @function {in} onLoad() - list加载；
    @function {in} loadDone(isFinish) - list加载完成；
        【参数】{Boolean} 是否已经完成加载
    @function {in} loadError() - list加载出错

-->
<template>
    <van-popup
        v-model="visiblePopup"
        :style="{ height: '70%' }"
        position="bottom"
        get-container="body"
        class="lj-uselocation-detail-popup"
    >
        <div class="popup-body">
            <header class="header">
                <div class="header-inner">
                    <div class="keyword">
                        {{ title }}
                    </div>
                </div>
                <i class="close-btn iconfont icon-close" @click="close"></i>
            </header>
            <main class="main">
                <van-skeleton round :row="8" :loading="innerLoading">
                    <van-list
                        class="mtrl_list-widget"
                        v-model="listLoading"
                        :error.sync="error"
                        :error-text="errorText"
                        :finished="finished"
                        :finished-text="finishedText"
                        offset="100"
                        :mmediate-check="false"
                        @load="onLoad"
                    >
                        <van-cell
                            v-for="(item, index) in dataList"
                            :key="index"
                            class="material-cell lj-cell-left"
                            :label="item[datatype.propB]"
                        >
                            <template #title>
                                <van-tag plain type="primary">{{ item[datatype.propE]}}</van-tag>
                                <span>{{ item[datatype.propA] }}</span>
                            </template>
                            <template #icon>
                                <i class="iconfont icon-huowu"></i>
                            </template>
                            <template #default>
                                <div class="material-right-part">
                                    <div class="title">{{ item[datatype.propC] }}</div>
                                    <div class="unit">{{ item[datatype.propD] }}</div>
                                </div>
                            </template>
                        </van-cell>
                    </van-list>
                </van-skeleton>
            </main>
            <footer class="footer_summit">
                <div class="left">
                    <i class="iconfont icon-huowu"></i>
                    <div>
                        {{ total }}
                    </div>
                </div>
                <div class="right">
                    {{ '合计:' + storage }}
                </div>
            </footer>
        </div>
    </van-popup>
</template>

<script>
import {Popup, Cell, List, Tag, Skeleton } from "vant";

export default {
    components: {
        "van-popup": Popup,
        "van-cell": Cell,
        "van-list": List,
        "van-tag": Tag,
        "van-skeleton": Skeleton,
    },
    data() {
        return {
            visiblePopup: false, // 组件状态
            innerLoading: true, // list加载状态
            listLoading: false, // list加载状态
            finished: false, // list全部加载完状态
            error: false, // list错误状态
        }
    },
    props: {
        title: {
            type: String,
            default: ""
        },
        /**数据名 */
        datatype: {
            type: Object,
            default: function () {
                return {
                    propA: "",
                    propB: "",
                    propC: "",
                    propD: "",
                    propE: "",
                };
            }
        },
        dataList: { // 列表
            type: Array,
            default: function () {
                return [];
            }
        },
        finishedText: {
            type: String,
            default: "没有更多了"
        },
        total: {
            type: Number,
            default: 0
        },
        storage: {
            type: Number,
            default: 0
        },
        errorText: {
            type: String,
            default: "请求失败，点击重新加载"
        },
    },
    methods: {
        open () {
            this.visiblePopup = true;
            this.innerLoading = true;
        },
        close() {
            this.visiblePopup = false;
        },
        onLoad() {
            if (this.finished) return false;
            this.listLoading = true;
            this.$emit("loadMore");
        },
        loadDone(type) {
            this.innerLoading = false;
            this.listLoading = false;
            this.finished = Boolean(type);
        },
        loadError() {
            this.finished = false;
            this.innerLoading = false;
            this.listLoading = false;
            this.error = true;
        }
    }
}
</script>

<style lang="less">
.lj-uselocation-detail-popup {
    overflow: hidden;
    padding: 5px;
    background-color: unset!important;

    .mtrl_list-widget {
        padding-top: 5px;
        padding-bottom: 40px;
    }
    .material-cell {
        margin: 5px 10px;
        padding: 5px;
        border-radius: 8px;
        width: auto;

        .iconfont {
            padding-right: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .material-right-part {
        display: flex;
        justify-content: flex-end;

        .title {
            flex: 1;
            font-size: 14px;
            color: #333;
            font-weight: bold;
        }
        .unit {
            font-size: 12px;
            color: #666666;
        }
    }
    .popup-body {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        background-color: #f2f2f2;
        overflow: hidden;

        border-radius: 8px;
    }
    .header {
        position: relative;
        text-align: center;
        font-size: 16px;
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid #f1f1f1;
        background-color: #fff;
        
        .header-inner {
            display: flex;
            .keyword {
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .close-btn {
            position: absolute;
            right: 15px;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    }
    .main {
        flex: 1;
        overflow: auto;
        .van-skeleton {
            padding-top: 10px;
        }
        .van-skeleton__row,.van-skeleton__title {
            background-color: #cccccc;
        }
    }
    .footer_summit {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: flex;
        background-color: #fff;
        padding: 0 5px;
        border-radius: 8px;
        font-size: 14px;
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
        
        .iconfont {
            margin-right: 3px;
        }
        .left {
            flex: 1;
            display: flex;
            
            div {
                display: inline-block;
                margin: auto 0;
            }
        }
        .right {
            display: inline-block;
            margin: auto;
            flex-shrink: 0;
            justify-content: flex-end;
        }
    }
}

// 处理van-cell左侧条码内容超出
.lj-cell-left {
    .van-cell__title {
        flex: 1;
        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .van-cell__value {
        flex: none;
        flex-shrink: 0;
        max-width: 80%;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .van-cell__label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.lj-cell-right {
    .van-cell__title {
        flex: none;
        flex-shrink: 0;
        max-width: 80%;
        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .van-cell__value {
        flex: 1;
        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .van-cell__label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>