<template>
    <el-dialog :title="isEdit ? '编辑库存' : '添加库存'" :visible.sync="visible" width="600px" @close="closeDialog">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="产品名称" prop="productName">
                        <el-input v-model="form.productName" placeholder="请输入产品名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="产品分类" prop="productCategory">
                        <el-input v-model="form.productCategory" placeholder="请输入产品分类" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="单价" prop="price">
                        <el-input-number v-model="form.price" :min="0" :precision="2" style="width: 100%"
                            placeholder="请输入单价" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="库存数量" prop="quantity">
                        <el-input-number v-model="form.quantity" :min="0" style="width: 100%" placeholder="请输入库存数量" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="标准单位" prop="standardUnit">
                        <el-input v-model="form.standardUnit" placeholder="请输入标准单位" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="负责部门" prop="departmentId">
                        <el-select v-model="form.departmentId" placeholder="请选择负责部门" style="width: 100%" clearable>
                            <el-option v-for="dept in departmentList" :key="dept.id" :label="dept.name"
                                :value="dept.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="备注">
                <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="submitForm" :loading="submitLoading">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { createInventory, updateInventory, getInventoryInfo } from '@/api/extend/lqInventory'
import { getUserList } from '@/api/permission/user'

export default {
    name: 'InventoryForm',
    data() {
        return {
            visible: false,
            submitLoading: false,
            isEdit: false,
            departmentList: [], // 部门列表
            form: {
                id: '',
                productName: '',
                productCategory: '',
                price: 0,
                quantity: 0,
                standardUnit: '',
                departmentId: '',
                departmentName: '',
                remark: ''
            },
            rules: {
                productName: [
                    { required: true, message: '请输入产品名称', trigger: 'blur' }
                ],
                productCategory: [
                    { required: true, message: '请输入产品分类', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '请输入单价', trigger: 'blur' }
                ],
                quantity: [
                    { required: true, message: '请输入库存数量', trigger: 'blur' }
                ],
                standardUnit: [
                    { required: true, message: '请输入标准单位', trigger: 'blur' }
                ],
                departmentId: [
                    { required: true, message: '请选择负责部门', trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        init(id = '') {
            this.visible = true
            this.isEdit = !!id
            this.getDepartmentList()
            if (this.isEdit) {
                this.getInventoryInfo(id)
            } else {
                this.resetForm()
            }
        },

        // 获取部门列表
        getDepartmentList() {
            const params = {
                currentPage: 1,
                pageSize: 1000, // 获取所有部门
                enabledMark: 1 // 只获取启用的部门
            }

            getUserList(params).then(response => {
                if (response.code === 200) {
                    // 将用户列表转换为部门列表格式
                    this.departmentList = response.data.list.map(user => ({
                        id: user.id,
                        name: user.realName
                    }))
                } else {
                    this.$message.error(response.msg || '获取部门列表失败')
                }
            }).catch(() => {
                this.$message.error('获取部门列表失败')
            })
        },

        // 获取库存详情
        getInventoryInfo(id) {
            getInventoryInfo(id).then(response => {
                if (response.code === 200) {
                    this.form = {
                        id: response.data.id,
                        productName: response.data.productName,
                        productCategory: response.data.productCategory,
                        price: response.data.price,
                        quantity: response.data.quantity,
                        standardUnit: response.data.standardUnit,
                        departmentId: response.data.departmentId,
                        departmentName: response.data.departmentName,
                        remark: response.data.remark || ''
                    }
                } else {
                    this.$message.error(response.msg || '获取库存详情失败')
                }
            })
        },


        resetForm() {
            this.form = {
                id: '',
                productName: '',
                productCategory: '',
                price: 0,
                quantity: 0,
                standardUnit: '',
                departmentId: '',
                departmentName: '',
                remark: ''
            }
            this.$nextTick(() => {
                if (this.$refs.form) {
                    this.$refs.form.clearValidate()
                }
            })
        },

        // 提交表单
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.submitLoading = true
                    const apiMethod = this.isEdit ? updateInventory : createInventory
                    apiMethod(this.form).then(response => {
                        if (response.code === 200) {
                            this.$message.success(this.isEdit ? '更新成功' : '创建成功')
                            this.closeDialog()
                            this.$emit('refreshDataList')
                        } else {
                            this.$message.error(response.msg || (this.isEdit ? '更新失败' : '创建失败'))
                        }
                        this.submitLoading = false
                    }).catch(() => {
                        this.submitLoading = false
                    })
                }
            })
        },

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

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