<template>
    <view class="receiving">
        <view class="fix">
            <view class="search-box">
                <view class="search-input row bothSide verCenter">
                    <text class="iconfont icon-a-riqi11"></text>
                    <text class="iconfont icon-jinggao2" v-if="input_status" @click="clearInput()"></text>
                    <input type="text" @input="inputChange()" placeholder="请手动输入入仓号" class="uni-input" v-model="erp_order_sn" placeholder-style="color:#6e767a" />
                    <view class="more row verCenter" :class="{ curr: shade_flag }" @click="filterChange()">
                        <text class="t1">{{ shade_flag ? '更少条件' : '更多条件' }}</text>
                        <text class="iconfont icon-sanjiaoxing1 arrow"></text>
                    </view>
                </view>
                <view class="show-box" v-if="shade_flag">
                    <view class="input-time row verCenter"><uni-datetime-picker @change="changeTimeRange" v-model="datetimerange" type="daterange" rangeSeparator="至" /></view>
                    <view class="row bottom bothSide">
                        <view class="btn row rowCenter verCenter" @click="submit()">查 询</view>
                        <view class="canel row rowCenter verCenter" @click="canel()">重 置</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="tab row verCenter">
            <view class="box row" @click="changeTab(index)" :class="{ curr: index == currentIndex }" :key="index" v-for="(item, index) in textArr">
                <text class="t1">{{ item }}</text>
                <text class="t2">({{ total }})</text>
            </view>
        </view>
        <view class="list" v-if="total > 0">
            <navigator class="box row  verCenter" :url="'/pages/goods/warehouseOperationConfirm?weonlt_id=' + item.weonlt_id" hover-class="none" v-for="(item, index) in warehouseOperation" :key="index">
                <template v-if="item.arrival_status == 1">
                    <text class="status-text-no">{{ item.arrival_status_cn }}</text>
                </template>
                <template v-else>
                    <text class="status-text">{{ item.arrival_status_cn }}</text>
                </template>
                <template v-if="item.is_unpacking == 0">
                    <view class="title column rowCenter verCenter">
                        <text>整箱</text>
                        <text>作业</text>
                    </view>
                </template>
                <template v-else>
                    <view class="title column rowCenter verCenter">
                        <text>拆箱</text>
                        <text>作业</text>
                    </view>
                </template>
                <view class="text column">
                    <text class="p1">客户:{{ item.company_name }}</text>
                    <view class="lh">
                        <text class="p2">时间:</text>
                        <text class="p3 mr98">{{ item.create_time_cn }}</text>
                        <text class="p2">件数:</text>
                        <text class="p3">{{ item.operation_num_sum }}</text>
                    </view>
                    <view class="lh">
                        <text class="p2">备注:</text>
                        <text class="p3">{{ item.operation_remark || '--' }}</text>
                    </view>
                </view>
            </navigator>
        </view>
        <template v-else>
            <view class="no-data column verCenter rowCenter">
                <text class="iconfont icon-jinggao2"></text>
                <text class="text">查找不到相关信息</text>
                <text class="p">1、请输入正确的入仓号</text>
            </view>
        </template>
        <!-- 遮罩 -->
        <view class="shade" v-if="shade_flag" @click="shade_flag = false"></view>
    </view>
</template>

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

export default {
    data() {
        return {
            shade_flag: false,
            input_status: false,
            date: '',
            datetimerange: ['', ''],
            currentIndex: 0,
            textArr: ['待作业'],
            warehouseOperation: [],
            erp_order_sn: '',
            total: 1,
            page: 1,
            limit: 10,
            is_loading: false,
            loading: false
        };
    },
    onReachBottom() {
        if (this.is_loading) return;
        this.page++;
        this.loading=true;
        this.getData();
    },
    onShow() {
        this.getData();
    },
    methods: {
        getData() {
            this.request(API.warehouseOperationList, 'POST', { page: this.page, limit: this.limit, erp_order_sn: this.erp_order_sn, begin_time: this.datetimerange[0], end_time: this.datetimerange[1] }, this.loading).then(res => {
                if (res.err_code === 0) {
                    if (res.data.data.length > 0) {
                        this.is_loading = false;
                        this.warehouseOperation = this.warehouseOperation.concat(res.data.data);
                        this.total = res.data.total;
                    } else {
                        this.is_loading = true;
                    }
                } else {
                    uni.showToast({
                        title: res.err_msg,
                        icon: 'error'
                    });
                }
            });
        },
        changeTab(index) {
            this.currentIndex = index;
        },
        clearInput() {
            this.input_status = false;
        },
        inputChange() {
            this.total = 0;
            this.page = 1;
            this.warehouseOperation = [];
            this.getData();
        },
        filterChange() {
            this.shade_flag = !this.shade_flag;
        },
        changeTimeRange(e) {
            this.datetimerange = e;
            this.total = 0;
            this.page = 1;
            this.warehouseOperation = [];
            this.getData();
        },
        submit() {
            this.shade_flag = !this.shade_flag;
            this.getData();
        },
        canel() {
            this.page = 1;
            this.datetimerange = ['', ''];
            this.shade_flag = !this.shade_flag;
            this.getData();
        }
    }
};
</script>

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