<template>
    <div>

        <el-form :inline="true" :model="query" class="query-form" size="mini">
            <el-form-item class="query-form-item">
                <el-input v-model="query.code" placeholder="条码查询" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button-group>
                    <el-button type="primary" icon="search" @click="searchCode"
                    >查询
                    </el-button
                    >
                </el-button-group>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="codeArray" style="width: 100%">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column
                label="条码"
                prop="code"
                width="500"
                show-overflow-tooltip
            ></el-table-column>
        </el-table>

        <el-pagination
            :page-size="query.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next,total"
            :total="total"
            :current-page="query.page"
        >
        </el-pagination>
    </div>
</template>

<script>

import {getCountCodesList} from "@/api/inventory/invCountCodes";

export default {
    name: "codeQuery",
    props: {
        codeQuery: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            query: {
                productId: null,
                orderIdFk: null,
                page: 1,
                limit: 20
            },
            loading: true,
            codeArray: [],
            total: 0,
        };
    },
    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.query = {
                productId: this.codeArray.productId,
                orderIdFk: this.codeQuery.orderIdFk,
                page: 1,
                limit: 20
            };
            this.getCodeList();
        },
        onSubmit() {
            this.$router.push({
                path: "",
                query: this.query,
            });
            this.getCodeList();
        },
        handleSizeChange(val) {
            this.query.limit = val;
            this.getCodeList();
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getCodeList();
        },
        searchCode() {
            this.query.page = 1;
            this.getCodeList();
        },
        getCodeList() {
            this.loading = true;
            this.query.productId = this.codeQuery.productId;
            this.query.orderIdfK = this.codeQuery.orderIdfK;
            getCountCodesList(this.query).then((res) => {
                this.loading = false;
                if (res.code === 20000) {
                    this.codeArray = res.data.list || [];
                    this.total = res.data.total || 0;
                } else {
                    this.codeArray = [];
                    this.total = 0;
                }
            }).catch((error) => {
                this.loading = false;
                this.codeArray = [];
                this.total = 0;
            })
        },

        intentBack() {
            this.$router.go(-1);
        },
    },
    created() {
        this.getCodeList();
    },
};
</script>



