<!--
@name 业务组件：PDA底部数据详情弹窗
@desc 基于 vant-ui

【必填入参】：
    @param {String} [title]  - 弹窗标题，默认：""
    @param {Array} [dataList]  - 展示的数据，默认：[]

【父组件控制方法】：
    @function {in} open() - 显示组件
    @function {in} close() - 关闭组件
    
【回调出参】：
    @function {out} popupItem(selectedModel) - 弹窗显示详情信息、

【插槽】
    @slot [title] - 条码标题插槽（左上）
        @param {Object} item - 当前条码
    @slot [label] - 条码标签插槽（左下）
        @param {Object} item - 当前条码
    @slot [default] - 条码默认内容插槽（右）
        @param {Object} item - 当前条码

@time 2020年8月19日 -- design by Yj_cHen
-->

<template>
    <van-popup v-model="show" class="lj-pda-popup-warpper" get-container="body" position="bottom">
        <section class="popup-inner">
            <header class="popup_header">
                <slot name="header" :title="title">
                    <span class="title">
                        {{ title }}
                    </span>
                </slot>
            </header>
            <main class="popup_body">
                <van-cell
                    v-for="(item, idx) in dataList"
                    :key="idx"
                    class="barcode-item lj-cell-left"
                    title-class="barcode-item-title"
                    label-class="barcode-item-subtitle"
                    value-class="barcode-item-value"
                    :class="{'done': item.qtySum == item.planqtySum}"
                >
                    <template slot="title">
                        <slot name="title" :item="item" :handleShowDetail="handleShowBarcodeDetail">
                            <span class="title" @click="handleShowBarcodeDetail(item)">
                                {{ item.barcode }}
                            </span>
                        </slot>
                    </template>
                    <template slot="label">
                        <slot name="label" :item="item">
                            <span style="padding-right: 10px">
                                {{ item.mtrlmode }}
                            </span>
                            <span>
                                基数:{{ item.packqty }}
                            </span>
                        </slot>
                    </template>
                    <template slot="default">
                        <slot name="default" :item="item">
                            <div class="item-default">
                                <div class="item-code">
                                    {{ item.mtrlcode }}
                                </div>
                                <div class="item-name">
                                    {{ item.mtrlname }}
                                </div>
                            </div>
                        </slot>
                    </template>
                </van-cell>
            </main>
            <footer class="popup_footer"></footer>
        </section>
    </van-popup>
</template>

<script>
export default {
    data() {
        return {
            show: false,
        }
    },
    props: {
        dataList: {
            type: Array,
            default: function() {
                return []
            }
        },
        title: {
            type: String,
            defaule: ""
        }
    },
    methods: {
        handleShowBarcodeDetail(item) {
            this.$emit("popupItem", item)
        },
        open() {
            this.show = true;
        },
        close() {
            this.show = false;
        }
    }
}
</script>

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

.lj-pda-popup-warpper {
    // position: relative;
    // width: 96%;
    // max-height: 80%!important;
    background-color: transparent!important;
    // border-radius: 10px;

    .popup-inner {
        display: flex;
        flex-direction: column;
        margin: 0 2% 2% 2%;
        border-radius: 10px;
        background-color: #fff;
        overflow: hidden;
        // height: 100%;

        .popup_header {
            .shadow_border();
            display: flex;
            flex-shrink: 0;
            border-radius: unset;
            position: relative;
            min-width: 0;
            padding: 0 5px;
            z-index: 1;
            .title {
                color: #333;
                font-size: 16px;
                line-height: 42px;  
                font-weight: bold;
                flex: 1;
            }
        }
        .popup_body {
            flex: 1;
            max-height: 400px;
            overflow: auto;

            .van-cell {
                padding: 3px 5px;
            }
            .barcode-item {
                &.done{
                    background-color: @colorNormalThr;
                }
            }       
            .barcode-item-title {
                text-align: left;
                .title {
                    font-weight: bold;
                }
            }
            .barcode-item-value {
                .item-name {
                    .word_one_line();
                }
            }
            
            .item-default {
                display: flex;
                height: 100%!important;
            }
        }
        .popup_footer {
            flex-shrink: 0;
        }
    }

    
    .item-code {
        margin: auto 0 auto 10px;
        border: 1px solid @colorPass;
        color: @colorPass;
        border-radius: 10px;
        padding: 0 5px;
        line-height: 26px;
        height: 26px;
        font-weight: bold;

        &.done {
            border-color: @museSuccess;
            color: @museSuccess;
        }
    }
}

.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;
    }
}

</style>