<!-- 新增库存盘点 -->
<template>
    <el-dialog title="库存盘点" :visible.sync="dialogVisible" width="80%" @open="form.note = ''">
        <el-form ref="form" :model="form" :rules="rules" label-position="left" inline>
            <el-form-item label="账存数量">
                <el-input v-model="detail.stockNumber" readonly style="width: 180px;"></el-input>
            </el-form-item>
            <el-form-item label="实际数量">
                <el-input-number v-model="form.stocktakinNum" :min="0" :step="1" step-strictly
                    style="width: 180px;"></el-input-number>
            </el-form-item>
            <el-form-item label="盈亏数量">
                <el-input v-model="profitNumber" readonly :class="{ lose: profitNumber < 0 }"
                    style="width: 180px;"></el-input>
            </el-form-item>
            <el-form-item label="单价">
                <el-input v-model="detail.salePrice" readonly></el-input>
            </el-form-item>
            <el-form-item label="盈亏金额">
                <el-input v-model="profitPrice" readonly :class="{ lose: profitNumber < 0 }"
                    style="width: 180px;"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.note" placeholder="请输入备注" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
            </el-form-item>
        </el-form>
        <div class="head-container">
            <el-table ref="table" :data="tableData.list" v-loading="tableData.loading" border stripe>
                <el-table-column label="商品信息" width="150px">
                    <template v-slot="scope">
                        <div class="shop_info">
                            <el-image :src="scope.row.coverImg" style="width: 30px;height: 30px;">
                                <div class="img_error" slot="error">
                                    <i class="icon el-icon-document-delete"></i>
                                </div>
                            </el-image>
                            <span>{{ scope.row.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="售价" prop="price">
                    <template v-slot="scope">
                        ￥{{ scope.row.price }}
                    </template>
                </el-table-column>
                <el-table-column label="帐存库存" prop="stock"></el-table-column>
                <el-table-column label="盈亏数量" prop="phaseNum"></el-table-column>
                <el-table-column label="盈亏金额" prop="phasePrice">
                    <template v-slot="scope">
                        ￥{{ scope.row.phasePrice }}
                    </template>
                </el-table-column>
                <el-table-column label="实际库存" prop="inventoryStock"></el-table-column>
                <el-table-column label="盘点时间" prop="createTime"></el-table-column>
                <el-table-column label="盘点备注" prop="note"></el-table-column>
            </el-table>
        </div>
        <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-sizes="[5, 10, 30, 50]"
            :page-size="tableData.size" @current-change="paginationChange" @size-change="sizeChange"
            layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </el-dialog>
</template>

<script>
import { formatDecimal } from '@/utils'
import { tbProductStocktakin, tbProductStocktakinGet } from '@/api/invoicing'
export default {
    data() {
        return {
            dialogVisible: false,
            loading: false,
            detail: '',
            form: {
                skuId: '', // sku商品必传
                productId: '', // 必传
                stocktakinNum: '', // 必传
                price: '', // 商品价格 非必传 为空盘点价格为商品价格
                note: "" // 盘点备注 非必传
            },
            rules: {
                stocktakinNum: [
                    {
                        required: true,
                        message: '请输入盘点数量',
                        trigger: 'blur'
                    }
                ]
            },
            resetForm: '',
            searhForm: {
                name: '',
                skuId: '',
                productId: ''
            },
            tableData: {
                page: 0,
                size: 5,
                total: 0,
                loading: false,
                list: []
            }
        }
    },
    mounted() {
        this.resetForm = { ...this.form }
    },
    computed: {
        profitNumber() {
            // 盈亏数量
            return this.form.stocktakinNum - this.detail.stockNumber
        },
        profitPrice() {
            // 盈亏金额
            return formatDecimal((this.form.stocktakinNum - this.detail.stockNumber) * this.detail.salePrice)
        }
    },
    methods: {
        onSubmitHandle() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true
                        let res = await tbProductStocktakin(this.form)
                        this.detail.stockNumber = this.form.stocktakinNum
                        this.$emit('success', res)
                        // this.dialogVisible = false
                        this.loading = false
                        this.$notify({
                            title: '注意',
                            message: `添加成功`,
                            type: 'success'
                        });
                        this.getTableData()
                    } catch (error) {
                        this.loading = false
                        console.log(error)
                    }
                }
            })
        },
        show(obj) {
            console.log(obj);
            this.detail = { ...obj }
            this.dialogVisible = true
            this.form.skuId = obj.skuId
            this.form.productId = obj.proId
            this.form.stocktakinNum = obj.stockNumber

            this.searhForm.skuId = obj.productId
            this.searhForm.productId = obj.proId
            this.getTableData()
        },
        // 分页大小改变
        sizeChange(e) {
            this.tableData.size = e
            this.getTableData()
        },
        // 分页回调
        paginationChange(e) {
            this.tableData.page = e - 1
            this.getTableData()
        },
        // 商品列表
        async getTableData() {
            try {
                this.tableData.loading = true
                const res = await tbProductStocktakinGet({
                    page: this.tableData.page,
                    size: this.tableData.size,
                    name: this.searhForm.name,
                    skuId: this.searhForm.category,
                    productId: this.searhForm.productId,
                    sort: 'id,desc',
                })
                this.tableData.list = res.content
                this.tableData.total = res.totalElements
                setTimeout(() => {
                    this.tableData.loading = false
                }, 500);
            } catch (error) {
                console.log(error)
            }
        },
    }
}
</script>

<style scoped lang="scss">
.lose {
    &::v-deep .el-input__inner {
        color: rgb(238, 29, 29);
    }
}

.shop_info {
    display: flex;
    align-items: center;

    span {
        margin-left: 10px;
    }
}
</style>