<template>
    <view class="page-box">
        <view class="title row bothSide verCenter">
            <text class="t1">当前入仓号</text>
            <text class="t2">{{ erp_order_sn }}</text>
        </view>
        <view class="select-split">
            <view class="box">
                <view class="label row verCenter">
                    <text class="t1">*</text>
                    <text class="t2">请选择需要合箱的子箱号</text>
                </view>
                <view class="pick-list row bothSide verCenter">
                    <view class="uni-text" @click="open()">请选择</view>
                    <text class="iconfont icon-sanjiaoxing1"></text>
                </view>
                <view class="boxed_result row" v-if="filter_list.length > 0">
                    <text class="t1">合箱结果：</text>
                    <view class="row verCenter" style="flex-wrap: wrap;">
                        <block v-for="(item, index) in filter_list" :key="index">
                            <text class="t2">{{ item }}</text>
                            <text v-if="index < filter_list.length - 1" class="t3">+</text>
                        </block>
                    </view>
                </view>
            </view>
        </view>
        <view class="btn row rowCenter verCenter" @click="submit()">确 认</view>
        <view class="btn-reset row rowCenter verCenter" @click="reset()">重 置</view>
        <!-- 选择箱号 -->
        <uni-popup ref="popup" background-color="#F1F4F6">
            <view class="popup-content">
                <view class="selected-items row">
                    <view class="box row verCenter" v-for="(item, index) in filter_list" :key="index">
                        <text class="text">{{ item }}</text>
                        <text class="close" @click="deleteChange(item)">×</text>
                    </view>
                </view>
                <view class="search-baar row verCenter">
                    <text class="iconfont icon-a-riqi11"></text>
                    <input type="text" class="uni-input" placeholder="请输入箱号" placeholder-style="font-size:26rpx;color:#6E767A;" @input="onInput" v-model="searchParams.erp_order_sn" />
                </view>
                <view class="data-list">
                    <view class="box row bothSide verCenter" v-for="(item, index) in list" :key="index" :class="{ curr: filter_status[index] }" @click="filterChange(index)">
                        <text class="text">{{ item.name }}</text>
                        <view class="check-ico"></view>
                    </view>
                </view>
                <view class="pop-btn row rowCenter verCenter" @click="confirmChange">确 认</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { API } from '@/util/api.js';
import { createArray } from '@/util/util.js';

export default {
    data() {
        return {
            erp_order_sn: '',
            list: [],
            fix_erp_order_sn: '', //已选择的合箱数据
            filter_list: [], //过滤处理的数据
            filter_status: [], //控制状态
            searchParams: {
                erp_order_sn: ''
            }
        };
    },
    onLoad(options) {
        this.erp_order_sn = options.erp_order_sn || '';
        //携带的子箱号数据
        this.fix_erp_order_sn = options.fix_erp_order_sn || '';
        if (this.fix_erp_order_sn) {
            this.filter_list = this.fix_erp_order_sn.split(',');
        }
    },
    onShow() {
        this.getData();
    },
    methods: {
        open() {
            this.$refs.popup.open('bottom');
        },
        onInput() {
            // 清除之前的定时器
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.list = []; //数组清空
                this.getData();
            }, 800);
        },
        /**
         * 找出false对应的下标
         * @param {Object} arr
         * @param {Object} target
         */
        findIndex(arr, target) {
            const result = [];
            arr.map((item, index) => {
                if (item === target) {
                    result.push(index);
                }
            });
            return result;
        },
        /**
         *筛选过滤出选中的元素
         */
        filterChange(index) {
            this.$set(this.filter_status, index, (this.filter_status[index] = !this.filter_status[index]));
            let filter_arr = this.findIndex(this.filter_status, true);
            this.filter_list = filter_arr.map(i => this.list[i].name);
        },
        getData() {
            this.request(API.getFixErpOrderSn, 'POST', { erp_order_sn: this.searchParams.erp_order_sn }, true).then(res => {
                if (res.err_code === 0) {
                    this.list = res.data;
                    this.filter_status = createArray(this.list.length, false);

                    //携带的数据转化
                    if (this.fix_erp_order_sn) {
                        const fixSnArray = this.fix_erp_order_sn.split(',');
                        this.filter_status = this.list.map(item => fixSnArray.includes(item.name));
                    }
                } else {
                    uni.showToast({
                        title: res.err_msg,
                        icon: 'error'
                    });
                }
            });
        },
        confirmChange() {
            this.$refs.popup.close();
        },
        submit() {
            uni.$emit('updateData', this.filter_list);
            uni.navigateBack({
                delta: 1
            });
        },
        reset() {
            this.filter_list = [];
            this.filter_status.fill(false);
        },
        deleteChange(val) {
            const matchingIndex = this.list.findIndex(item => item.name === val);
            if (matchingIndex !== -1) {
                this.filter_status[matchingIndex] = false;
                this.filter_list = this.filter_list.filter(item => item !== val);
                this.$forceUpdate();
            }
        }
    }
};
</script>

<style scoped lang="scss">
@import '../../assets/css/tallyGoods/manualMerge.scss';
</style>