<!--
@name 业务组件：条码列表
@desc 基于 vant-ui

【必填入参】：
    @param {Array} [dataList] - 已扫描数据
        @example: [{locacode:"",locaname:"",stoargecode:"",stoargename:""}...]
    @param {Object} [locationState] - 储存当前定位信息，默认：
        @example: {
                    index: -1, // 当前定位在定位列表中的索引
                    value: "" // 当前定位的值
                }

【选填入参】：
    @param {Boolean} [offleft] - 关闭左侧插槽内容，默认：false
    @param {Boolean} [openright] - 关闭右侧插槽内容，默认：false
    @param {Boolean} [coreright] - 默认为左侧弹性宽度，是否设置右侧为弹性宽度，默认：false

【回调出参】：
    @function {out} confirm(selectedModel) - 确认事件
    @function {out} delBarcode(selectedModel) - 单选删除
    @function {out} control(Array[id,id...]) - 多选回调列表
    @function {out} popupItem(selectedModel) - 弹窗显示详情信息
    @function {out} clickcell(selectedModel) - 弹窗显示详情信息

【父组件控制方法】：
    @function {in} fnClearAllList() - 清除当前已选

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

@time 2020年7月28日 -- design by Yj_cHen
-->
<template>
    <div class="barcode-wrapper">
        <!-- <transition-group tag="div" class="barcode-content" v-if="dataList.length" name="barcode_add"> -->
        <div class="barcode-content" v-if="dataList.length">
            <!-- <lazy-component
                v-for="(item, idx) in dataList"
                :key="idx"
                @show="handler(idx)"
                :listenEvents="['scroll']"
            > -->

            <vxe-list ref="vxeList" :height="height" :data="dataList" :scroll-y="{'oSize': 20}">
                <template #default="{ items }">
                <!-- <div class="my-list-item" v-for="(item, index) in items" :key="index">{{ item.label }}</div> -->
                    <van-swipe-cell
                        :id="item.barcode"
                        :name="item.barcode"
                        ref="swipecell"
                        v-for="(item, idx) in items"
                        :key="idx"
                        :before-close="handleBeforeCloseSwipe"
                        class="barcode-swipe-cell"
                        :class="{'loca_action': locationState.value == item.barcode}"
                        @open="handleOpenSWipe"
                        @close="handleCloseSwipe"
                    >
                        <!-- <template slot="left" v-if="!offleft">
                            <div class="select-status">
                                <div class="inner">
                                    <svg class="icon svg-icon" aria-hidden="true">
                                        <use xlink:href="#icon-zhengque1"></use>
                                    </svg>
                                    已选
                                </div>
                            </div>
                        </template> -->

                        <van-cell
                            class="barcode-item"
                            :class="vanCellClass(item.ifcheckbox)"
                            title-class="barcode-item-title"
                            label-class="barcode-item-subtitle"
                            value-class="barcode-item-value"
                            @click="handleClickItem(item)"
                            :border="false"
                        >
                            <template #icon>
                                <van-checkbox v-if="showCheckbox" v-model="item.ifcheckbox" @click.stop="handleCheckboxChange(item)"></van-checkbox>
                            </template>
                            <template slot="title">
                                <div class="title-box">
                                    <slot name="title" :item="item" :handleShowDetail="handleShowBarcodeDetail">
                                        <span class="title" @click.stop="handleShowBarcodeDetail(item)">
                                            {{ item.barcode }}
                                        </span>
                                    </slot>
                                    <div class="save-state" v-if="saveList.indexOf(item.barcode) > -1">
                                        <i class="iconfont icon-save"></i>
                                    </div>
                                </div>
                            </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>
                        
                        <slot name="extra" :item="item"></slot>
                        

                        <template slot="right" v-if="openright">
                            <van-button class="del-btn" type="danger" text="删除" />
                        </template>
                    </van-swipe-cell>
                </template>
            </vxe-list>
            <!-- </lazy-component> -->
        </div>
        <!-- </transition-group> -->
        <van-empty class="lj-empty" v-else :description="emptyText"></van-empty>
    </div>
</template>

<script>
export default {
    name: "barcodeWidget",
    data() {
        return {
            // swipeAction: "right", // 记录上一步动作
            hasMultiple: false,
            selectList: [], // 多选条码列表
            barcodeInfo: {}, // 条码详情
            showBarcodeDetail: false, // 弹窗控制状态
        }
    },
    props: {
        dataList: {
            type: Array,
            default: function () {
                return []
            }
        },
        saveList: {
            type: Array,
            default: function () {
                return []
            }
        },
        locationState: {
            type: Object,
            default: function () {
                return {
                    index: 0,
                    value: ""
                }
            }
        },
        emptyText: {
            type: String,
            default: "当前扫描条码为空"
        },
        offleft: {
            type: Boolean,
            default: false
        },
        openright: {
            type: Boolean,
            default: false
        },
        coreright: {
            type: Boolean,
            default: false
        },
        height: {
            type: Number,
            default: 500
        },
        showCheckbox: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        vanCellClass(boot) {
            return function(boot) {
                let clsName = this.coreright ? "lj-cell-right" : "lj-cell-left"
                if (boot) {
                    clsName += " checkbox_state"
                }
                return clsName;
            }
        }
    },
    inject: ['updateScrollTop'],
    methods: {
        fnRecalculate() {
            console.log('重新会中虚拟列表 :>> ——————————————————————————————————————————————————————',);
            this.$refs.vxeList.recalculate();
        },
        // autorReloadData(data) {
        //     console.log('autorReloadData event  idx:>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(data));
        // },
        handleCheckboxChange(item) {
            console.log(' item.ifcheckbox :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item.ifcheckbox));
            // 添加多选记录
            // let checkVal = _fnHasVal(this.selectList, item.name);
            // !checkVal && this.selectList.push(item.name);
            if (item.ifcheckbox) {
                var index = this.selectList.indexOf(item.barcode);
                if (index == -1) {
                    this.selectList.push(item.barcode);
                }
            } else {
                var index = this.selectList.indexOf(item.barcode);
                if (index > -1) {
                    this.selectList.splice(index, 1);
                }
            }
            console.log(' this.selectList :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.selectList));
            this.$emit("control", this.selectList);
        },
        scrollOffset(name, height){
            //目标元素 偏移量
            let index = 0;
            let iHeight = 58;
            for (let i = 0; i < this.$refs.swipecell.length; i++) {
                if (this.$refs.swipecell[i].name == name) {
                    index = i;
                    break;
                }
            }
            this.$refs.vxeList.scrollTo(0, index*iHeight)
            // this.updateScrollTop(this.$refs.swipecell[index].$el.offsetTop - height);
        },
        /**点击cell */
        handleClickItem(item) {
            if (this.showCheckbox) {
                this.$set(item, 'ifcheckbox', !item.ifcheckbox);
                this.handleCheckboxChange(item)
            } else {
                this.$emit("clickcell", item)
            }
        },
        /**点击按钮，单选 */
        handleDelBarcodeItem(barcode) {
            let arr = [];
            arr.push(barcode);
            this.$emit("delBarcode", arr);
        },
        /**关闭滑动时触发 */
        handleCloseSwipe(item) {
            console.log("handleCloseSwipe position==》", item);
            if (!this.selectList.length) return false;
            for (let i = 0; i < this.selectList.length; i++) {
                if (item.name == this.selectList[i]) {
                    this.selectList.splice(i, 1);
                    this.$emit("control", this.selectList);
                    break;                                                                                                                                                                    
                }
            }
        },
        /**swipe滑动打开——监听事件 */
        handleOpenSWipe(item) {
            console.log("打开swiperCell", item);
            console.log("this.$refs.swipecell", this.$refs.swipecell[1]);
            if (this.openright) {
                if (item.position == 'right') {
                    // 有多选后，左拉显示删除时，提示清空
                    let length = this.$refs.swipecell.length;
                    for (let i = 0; i < length; i++) {
                        if (item.name == this.$refs.swipecell[i].name) {
                            this.$refs.swipecell[i].close();
                            break;
                        }
                    }
                    this.handleDelBarcodeItem(item.name);
                } 
            } else {
                // 屏蔽右滑
                if (item.position == 'right') {
                    // 有多选后，左拉显示删除时，提示清空
                    let length = this.$refs.swipecell.length;
                    for (let i = 0; i < length; i++) {
                        if (item.name == this.$refs.swipecell[i].name) {
                            this.$refs.swipecell[i].close();
                            break;
                        }
                    }
                }
            }
            // else if (item.position == "left") {
            //     // 添加多选记录
            //     let checkVal = _fnHasVal(this.selectList, item.name);
            //     // !checkVal && this.selectList.push(item.name);
            //     if (!checkVal) {
            //         this.selectList.push(item.name)
            //     } else {
            //         console.log("已添加==》", item.name);
            //     }
            //     this.$emit("control", this.selectList);
            // }
            console.log("多选结果：==》", this.selectList);

            // 内部方法-查重
            function _fnHasVal(aList, val) {
                let hasVal = false;
                for (let i = 0; i < aList.length; i++) {
                    if (aList.indexOf(val) > -1) {
                        hasVal = true;
                        break;
                    }
                }
                return hasVal;
            }
        },
        handleBeforeCloseSwipe({name, position, instance}) {
            // 虽然是空，但是不能删除，作用类似与重置该事件差不多
        },
        handleShowBarcodeDetail(item) {
            this.$emit("popupItem", item)
        },
        /**清空按钮-清除多选列表 */
        fnClearAllList() {
            // for (let i = 0; i < this.$refs.swipecell.length; i++) {
            //     this.$refs.swipecell[i].close();
            // }
            this.selectList = [];
            this.$emit("control", this.selectList);
        }
    }
}
</script>

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

.barcode-wrapper {
    position: relative;
    // padding-top: 10px;
    // padding-bottom: 30px;

    .barcode-swipe-cell {
        transition: all 0.2s ease-in-out;
    }
    .barcode-content {
        .van-cell {
            padding: 3px 5px;
        }
        .checkbox_state {
            background-color: rgba(33, 150, 243, 0.08);
        }
        .van-checkbox {
            margin-left: 10px;
            margin-right: 5px;
        }
        .barcode-item-title {
            text-align: left;
            padding-right: 24px;
            .title {
                font-weight: bold;
            }
            .title-box {
                .state-box();
            }
        }
        .barcode-item-value {
            .item-name {
                .word_one_line();
            }
            .item-default_right_min {
                font-size: 12px
            }
        }
        .del-btn {
            height: 100%;
        }
        .loca_action {
            .van-cell {
                background-color: @colorPassThr;
            }
        }
        
        .select-status {
            .middle_center();
            height: 100%;
            padding: 0 10px;
            background-color: @colorNormalThr;
            .inner {
                vertical-align: middle;
                display: flex;
                align-items: center;
                color: @museSuccess;
            }
            svg {
                margin-right: 5px;
                width: 30px;
                height: 30px;
            }
        }

        .barcode-dscrp {
            background-color: #fff;
            padding: 0px 5px;
            // padding-top: 0px;
            color: @summaryLightTextColor;
            font-size: 12px;
        }
    }
    .lj-empty {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}

.barcode_add-enter {
    opacity: 0;
    transform: translateY(-30%);
}
.barcode_add-leave-to {
    opacity: 0;
    transform: translateX(30%);
}
.barcode_add-enter-active {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;        
    -o-transition: all 0.2s ease-in-out;  
    transition: all 0.2s ease-in-out;
}
.barcode_add-leave-active {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;        
    -o-transition: all 0.2s ease-in-out;  
    transition: all 0.2s ease-in-out;
}
</style>
