<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码"
                            clearable
                            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
                    :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) {
                console.log("全选----");
                this.getList();
                event.target.select();
            },
        },
        created() {
            this.getBusType();
        },
    };
</script>

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