<template>
    <div>
        <el-card class="el-card">
            <div>
                <el-form
                    :inline="true"
                    :model="query"
                    style="display: flex"
                    label-width="480px"
                    size="mini"
                >
                    <el-form-item class="query-form-item" label-width="100px">
                        <el-input
                            v-model="query.code"
                            placeholder="UDI码"
                            style="width: 500px"
                            @keyup.enter.native="keyup_submit($event)"
                        ></el-input>
                    </el-form-item>

                    <el-form-item style="display: flex">
                        <el-button type="primary" icon="search" @click="getList"
                        >查询
                        </el-button
                        >
                    </el-form-item>
                </el-form>

                <el-table
                    :data="list"
                    style="width: 100%"
                    highlight-current-row="true"
                    v-loading="erpLloading"
                >
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column
                        label="单据日期"
                        prop="actDate"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="订单号"
                        prop="orderId"
                        show-overflow-tooltip
                    ></el-table-column>

                    <el-table-column label="业务类型" prop="action">
                        <template slot-scope="scope">
                            <span>{{ geActionName(scope.row.action) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="往来单位"
                        prop="fromCorp"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="生产企业"
                        show-overflow-tooltip
                        prop="ylqxzcrbarmc"
                    ></el-table-column>
                    <el-table-column
                        label="产品名称"
                        prop="cpmctymc"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="规格型号"
                        prop="ggxh"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="批次号"
                        prop="batchNo"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="生产日期"
                        prop="produceDate"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="失效日期"
                        prop="expireDate"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="数量"
                        prop="count"
                        show-overflow-tooltip
                    ></el-table-column>
                </el-table>
                <el-pagination
                    :current-page="query.page"
                    :page-size="query.limit"
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="pageTotal"
                ></el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import {getTrace} from "../../api/warehouse/udiTrace";
import {getBussinessType} from "../../api/basic/bussinessType";

export default {
    data() {
        return {
            query: {
                code: null,

                page: 1,
                limit: 10,
            },

            list: [],
            busTypes: [],
            pageTotal: 1,
            total: 1,
            currentRow: null,
            loading: false,
            erpLloading: false,
            multipleUdiSelection: [],

        };
    },
    methods: {
        getList() {
            if (this.query.code == null || this.query.code == "") {
                this.$message.warning("请输入条码查询！");
                return;
            }
            this.loading = true;
            getTrace(this.query)
                .then((response) => {
                    this.loading = false;
                    this.list = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        geActionName(action) {
            for (let i = 0; i < this.busTypes.length; i++) {
                if (this.busTypes[i].action === action) {
                    return this.busTypes[i].name;
                }
            }
        },
        getBusType() {
            let query = {
                enabled: true,
            };
            getBussinessType(query)
                .then((response) => {
                    this.busTypes = response.data.list || [];
                })
                .catch(() => {
                });
        },
        checkSelectable(row, index) {
            return !row.check;
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getList();
        },

        intentDetail(row) {
            this.$emit("productInfo", row);
            this.closeDialog();
        },

        keyup_submit(event) {
            this.getList();
            event.target.select();
        },
    },
    created() {
        this.getBusType();
    },
};
</script>

<style scoped>
.checkitemTag {
    float: left;
    text-align: left;
    margin-top: 5px;
    width: 100%;
}
</style>
