
<template>
    <div style="margin-bottom: 15px">
        <el-config-provider :locale="zhCn">
            <el-row>
                <el-input v-model="goodsIdQuery" style="width: 256px; margin-right: 10px;" placeholder="零件号" />
                    <el-input v-model="vehicleNoQuery" style="width: 256px; margin-right: 10px;" placeholder="箱号" />
                <el-button type="primary" @click="search()">搜索</el-button>
                <el-button type="warning" @click="reset()">重置</el-button>
                <el-button type="success" @click="refresh()">刷新</el-button>
            </el-row>
            <br />
            <el-table :data="tasks" stripe border v-loading="loading" style="width: 100%" max-height="684px"
                class="table-class" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                <el-table-column prop="goodsId" label="零件号" fixed="left" min-width="120px" />
                <el-table-column prop="vehicleNo" label="箱号" fixed="left" min-width="120px" />
                <el-table-column prop="goodsName" label="零件名称" min-width="120px" />
                <el-table-column prop="taskType" label="任务类型" :formatter="taskTypeFormat" sortable min-width="120px" />
                <el-table-column prop="taskGroup" label="任务组" min-width="120px" />
                <el-table-column prop="origin" label="起点" min-width="120px" />
                <el-table-column prop="destination" label="终点" min-width="120px" />
                <el-table-column prop="pickStand" label="拣选站台" min-width="120px" />
                <el-table-column prop="weight" label="重量" min-width="120px" />   
                <el-table-column prop="productionDate" label="生产日期" :formatter="dateFormat" min-width="120px" />
                <el-table-column prop="expirationDate" label="有效日期" :formatter="dateFormat" min-width="120px" />
                <el-table-column prop="operateNum" label="操作数量" min-width="120px" />
                <el-table-column prop="totalNum" label="库存数量" min-width="120px" />
                <el-table-column prop="taskPriority" label="任务优先级" sortable min-width="120px" />
                <el-table-column prop="kateTaskId" label="配件任务号" sortable min-width="140px" />
                <el-table-column prop="userName" label="操作人员姓名" min-width="120px" />
                <el-table-column prop="createTime" label="创建时间" :formatter="timeFormat" min-width="120px" />
                <el-table-column prop="finishTime" label="任务完成时间" :formatter="timeFormat" min-width="120px" />
                <el-table-column prop="taskStatus" label="任务状态" fixed="right" :formatter="taskStatusFormat" min-width="120px" />
                <!-- <el-table-column fixed="right" label="操作" width="180px">
                    <template v-slot="scope">
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否" title="请确认是否取消任务?" :hide-after="10" @confirm="">
                            <template #reference>
                                <el-button plain type="warning">取消</el-button>
                            </template>
                        </el-popconfirm>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否" title="请确认是否完成任务?" :hide-after="10" @confirm="">
                            <template #reference>
                                <el-button plain type="primary">完成</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column> -->
            </el-table>
            <br />
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
                :small="false" :disabled="false" :background="false" :default-page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search"
                @current-change="search" />
        </el-config-provider>
    </div>
</template>

<script setup>
import { getTaskRecords } from '@/api/record.js'
import { dateFormatter, taskStatusFormatter, timeFormatter } from '@/utils/formatter.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ElMessage } from 'element-plus'
import store from '@/store'
</script>
<script>
export default {
    name: 'inventoryRecord',
    data() {
        return {
            pageInfo: {},
            tasks: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            goodsIdQuery: '',
            vehicleNoQuery: '',
            loading: true
        }
    },
    mounted() {
        this.search()
    },
    methods: {
        dateFormat: (row, column, cellValue, index) => {
            return dateFormatter(cellValue)
        },
        timeFormat: (row, column, cellValue, index) => {
            return timeFormatter(cellValue)
        },
        taskStatusFormat: (row, column, cellValue, index) => {
            return taskStatusFormatter(cellValue)
        },
        taskTypeFormat: (row, column, cellValue, index) => {
            switch (cellValue) {
                case 1: return '入库'
                case 2: return '出库'
                case 3: return '盘点'
                default: return '未知'
            }
        },
        search() {
            this.loading = true
            this.pageInfo.pageNum = this.currentPage
            this.pageInfo.pageSize = this.pageSize
            const tableRequest = {
                page: this.pageInfo,
                param: {
                    taskType: 3,
                    goodsId: this.goodsIdQuery.trim(),
                    vehicleNo: this.vehicleNoQuery.trim(),
                    userName: store.getters.getUserName
                }
            }
            getTaskRecords(tableRequest).then(res => {
                const tableResponse = res.data
                if (tableResponse.code != 0) {
                    ElMessage.error(tableResponse.message)
                }
                this.tasks = tableResponse.rows
                this.total = tableResponse.total
            }).catch(err => {
                console.log(err)
                ElMessage.error('查询盘点记录错误')
            })
            this.loading = false
        },
        reset() {
            this.goodsIdQuery = ''
            this.vehicleNoQuery = ''
            this.search()
        },
    },
}
</script>

<style scoped>
.el-pagination {
    padding-left: 5px;
}

.el-row .el-button {
    width: 72px;
    margin-left: 0px;
    margin-right: 5px;
}

.table-class {
    width: 100%;
}
</style>