<template>
    <el-dialog title="库存详情" :visible.sync="visible" width="800px" @close="closeDialog">
        <div class="inventory-info-container">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="info-item">
                        <label>产品名称：</label>
                        <span>{{ inventoryInfo.productName || '无' }}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="info-item">
                        <label>产品分类：</label>
                        <span>{{ inventoryInfo.productCategory || '无' }}</span>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="info-item">
                        <label>单价：</label>
                        <span class="price">{{ formatMoney(inventoryInfo.price) }}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="info-item">
                        <label>库存数量：</label>
                        <span :class="inventoryInfo.quantity <= 10 ? 'text-danger' : ''">{{ inventoryInfo.quantity || 0
                            }}</span>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="info-item">
                        <label>标准单位：</label>
                        <span>{{ inventoryInfo.standardUnit || '无' }}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="info-item">
                        <label>总价值：</label>
                        <span class="price">{{ formatMoney(inventoryInfo.totalValue) }}</span>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="info-item">
                        <label>负责部门：</label>
                        <span>{{ inventoryInfo.departmentName || '无' }}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="info-item">
                        <label>状态：</label>
                        <el-tag :type="inventoryInfo.isEffective === 1 ? 'success' : 'danger'">
                            {{ inventoryInfo.isEffective === 1 ? '有效' : '无效' }}
                        </el-tag>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="info-item">
                        <label>创建人：</label>
                        <span>{{ inventoryInfo.createUserName || '无' }}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="info-item">
                        <label>创建时间：</label>
                        <span>{{ inventoryInfo.createTime | dateTimeFormat }}</span>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20" v-if="inventoryInfo.updateTime">
                <el-col :span="12">
                    <div class="info-item">
                        <label>更新人：</label>
                        <span>{{ inventoryInfo.updateUserName || '无' }}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="info-item">
                        <label>更新时间：</label>
                        <span>{{ inventoryInfo.updateTime | dateTimeFormat }}</span>
                    </div>
                </el-col>
            </el-row>

            <el-row v-if="inventoryInfo.remark">
                <el-col :span="24">
                    <div class="info-item">
                        <label>备注：</label>
                        <span>{{ inventoryInfo.remark }}</span>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getInventoryInfo } from '@/api/extend/lqInventory'

export default {
    name: 'InventoryInfoDialog',
    data() {
        return {
            visible: false,
            inventoryInfo: {}
        }
    },
    methods: {
        init(id) {
            this.visible = true
            this.getInventoryInfo(id)
        },

        // 获取库存详情
        getInventoryInfo(id) {
            getInventoryInfo(id).then(response => {
                if (response.code === 200) {
                    this.inventoryInfo = response.data
                } else {
                    this.$message.error(response.msg || '获取库存详情失败')
                }
            })
        },

        // 格式化金额
        formatMoney(value) {
            if (value === null || value === undefined || value === '') {
                return '0.00'
            }
            return Number(value).toFixed(2)
        },

        // 关闭弹窗
        closeDialog() {
            this.visible = false
            this.inventoryInfo = {}
        }
    }
}
</script>

<style scoped>
.inventory-info-container {
    padding: 20px;
}

.info-item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.info-item label {
    font-weight: bold;
    color: #606266;
    min-width: 100px;
    margin-right: 10px;
}

.info-item span {
    color: #303133;
}

.price {
    color: #e6a23c;
    font-weight: bold;
}

.text-danger {
    color: #f56c6c;
    font-weight: bold;
}

.dialog-footer {
    text-align: right;
}
</style>
