<!-- 商品库存记录 -->
<template>
    <el-dialog width="80%" :title="`${keysList[key]}统计`" :visible.sync="dialogVisible" @close="reset">
        <div class="head-container">
            <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" height="400px"
                v-if="dialogVisible">
                <!-- 销量统计 -->
                <template v-if="key == 'saleNumber'">
                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
                    <el-table-column label="原库存" prop="leftNumber">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber}${scope.row.unitName}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="变动后库存">
                        <template v-slot="scope">
                            {{ scope.row.leftNumber + scope.row.stockNumber }}
                        </template>
                    </el-table-column>
                    <el-table-column label="销量" prop="stockNumber"></el-table-column>
                    <el-table-column label="订单编号" prop="orderNo">
                        <template v-slot="scope">
                            <router-link
                                :to="{ path: '/order_manage/order_list', query: { orderNo: scope.row.orderNo } }">
                                <el-link type="primary">{{ scope.row.orderNo }}</el-link>
                            </router-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作时间" prop="updatedAt">
                        <template v-slot="scope">
                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                </template>
                <!-- 减少数量统计 -->
                <template v-if="key == 'subCountNumber'">
                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
                    <el-table-column label="变动后库存">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="原有库存" prop="leftNumber">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="变动数量" prop="stockNumber"></el-table-column>
                    <el-table-column label="类型" prop="type"></el-table-column>
                    <el-table-column label="操作人" prop="operator"></el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                    <el-table-column label="操作时间" prop="updatedAt">
                        <template v-slot="scope">
                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                </template>
                <!-- 手动减少统计 -->
                <template v-if="key == 'subNumber'">
                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
                    <el-table-column label="变动后库存">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="原有库存" prop="leftNumber">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="变动数量" prop="stockNumber"></el-table-column>
                    <el-table-column label="类型" prop="type"></el-table-column>
                    <el-table-column label="操作人" prop="operator"></el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                    <el-table-column label="操作时间" prop="updatedAt">
                        <template v-slot="scope">
                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                </template>
                <!-- 报损统计 -->
                <template v-if="key == 'lossNumber'">
                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
                    <el-table-column label="原库存" prop="leftNumber">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber}${scope.row.unitName}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="变动后库存">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber + scope.row.stockNumber}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="报损数量" prop="stockNumber"></el-table-column>
                    <el-table-column label="报损人" prop="operator"></el-table-column>
                    <el-table-column label="图片" prop="coverImg">
                        <template v-slot="scope">
                            <el-image :src="scope.row.coverImg" style="width: 40px;height: 40px;">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                    <el-table-column label="操作时间" prop="updatedAt">
                        <template v-slot="scope">
                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                </template>
                <!-- 增加数量统计 -->
                <template v-if="key == 'addCountNumber'">
                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
                    <el-table-column label="变动后库存">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="原库存" prop="leftNumber">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="变动数量" prop="stockNumber"></el-table-column>
                    <el-table-column label="类型" prop="type"></el-table-column>
                    <el-table-column label="操作人" prop="operator"></el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                    <el-table-column label="操作时间" prop="updatedAt">
                        <template v-slot="scope">
                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                </template>
                <!-- 手动增加统计 -->
                <template v-if="key == 'addNumber'">
                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
                    <el-table-column label="变动后库存">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="原库存" prop="leftNumber">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="变动数量" prop="stockNumber"></el-table-column>
                    <el-table-column label="类型" prop="type"></el-table-column>
                    <el-table-column label="操作人" prop="operator"></el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                    <el-table-column label="操作时间" prop="updatedAt">
                        <template v-slot="scope">
                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                </template>
                <!-- 退货统计 -->
                <template v-if="key == 'refundNumber'">
                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
                    <el-table-column label="变动后库存">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="原库存" prop="leftNumber">
                        <template v-slot="scope">
                            {{ `${scope.row.leftNumber}` }}
                        </template>
                    </el-table-column>
                    <el-table-column label="退货数量" prop="stockNumber"></el-table-column>
                    <el-table-column label="订单编号" prop="orderNo">
                        <template v-slot="scope">
                            <router-link
                                :to="{ path: '/order_manage/order_list', query: { orderNo: scope.row.orderNo } }">
                                <el-link type="primary">{{ scope.row.orderNo }}</el-link>
                            </router-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作人" prop="operator"></el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                    <el-table-column label="操作时间" prop="updatedAt">
                        <template v-slot="scope">
                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </div>
        <div class="head-container">
            <el-pagination :total="tableData.total" @size-change="handleSizeChange" :current-page="tableData.page + 1"
                :page-size="tableData.size" @current-change="paginationChange"
                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
    </el-dialog>
</template>

<script>
import dayjs from 'dayjs'
import { tbProductStockDetailStock } from '@/api/shop.js'
export default {
    props: {
        query: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            dayjs,
            dialogVisible: false,
            key: 'saleNumber',
            keysList: {
                stockNumber: '现有数量',
                addCountNumber: '增加数量',
                addNumber: '手动增加',
                refundNumber: '退货',
                subCountNumber: '减少数量',
                subNumber: '手动减少',
                saleNumber: '销量',
                lossNumber: '报损',
            },
            productId: '',
            tableData: {
                sort: 1,
                data: [],
                page: 0,
                size: 30,
                loading: false,
                total: 0
            },
        }
    },
    methods: {
        // 库存记录列表
        async tbProductStockDetailStock() {
            try {
                this.tableData.loading = true
                const res = await tbProductStockDetailStock({
                    page: this.tableData.page,
                    size: this.tableData.size,
                    shopId: localStorage.getItem('shopId'),
                    column: this.key,
                    productName: this.query.name,
                    categoryId: this.query.categoryId,
                    type: this.query.typeEnum,
                    startTime: this.query.createdAt[0] || '',
                    endTime: this.query.createdAt[1] || '',
                })
                this.tableData.loading = false
                this.tableData.data = res.content
                this.tableData.total = res.totalElements
            } catch (error) {
                console.log(error);
            }
        },
        // 分页回调
        paginationChange(e) {
            this.tableData.page = e - 1
            this.tbProductStockDetailStock()
        },
        handleSizeChange(val) {
            this.tableData.size = val
            this.tbProductStockDetailStock()
        },
        // 显示
        show(key) {
            this.dialogVisible = true
            this.key = key
            this.tbProductStockDetailStock()
        },
        // 初始化dialog
        reset() {
            this.tableData.page = 0
            this.tableData.data = []
        }
    }
}
</script>

<style scoped lang="scss"></style>