<template>
	<el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="visible" class="NCC-dialog NCC-dialog_center" lock-scroll width="600px">
		<el-row :gutter="15" class="" >
				<el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules">
					<el-col :span="24">
						<el-form-item label="产品编号" prop="id">
							<el-input v-model="dataForm.id" placeholder="请输入" clearable readonly :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="产品ID" prop="cpid">
							<el-input v-model="dataForm.cpid" placeholder="请输入" clearable :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="产品名称" prop="cpmc">
							<el-input v-model="dataForm.cpmc" placeholder="请输入" clearable :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="规格型号" prop="cpxh">
							<el-input v-model="dataForm.cpxh" placeholder="请输入" clearable :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<!-- 暂时隐藏产品规格字段 -->
					<!-- <el-col :span="24">
						<el-form-item label="产品规格" prop="cpgg">
							<el-input v-model="dataForm.cpgg" placeholder="请输入" clearable :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col> -->
				</el-form>
		</el-row>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
	import request from '@/utils/request'
	import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
	import { previewDataInterface } from '@/api/systemData/dataInterface'
	export default {
		components: {},
		props: [],
		data() {
			return {
				loading: false,
				visible: false,
				isDetail: false,
				dataForm: {
					id: undefined,
					cpid: undefined,
					cpmc: undefined,
					cpxh: undefined,
					cpgg: undefined,
				},
				rules: {
				},
			}
		},
		computed: {
			// 对话框标题
			dialogTitle() {
				if (this.dataForm.id && this.dataForm.id !== undefined && this.dataForm.id !== null && this.dataForm.id !== '') {
					return this.isDetail ? '详情' : '编辑'
				}
				return '新建'
			}
		},
        watch: {
			// 监听对话框关闭，清空表单数据
			visible(val) {
				if (!val) {
					// 对话框关闭时，重置表单数据
					this.resetForm()
				}
			}
		},
        created() {
		},
		mounted() {
        },
		methods: {
			goBack() {
                this.$emit('refresh')
            },
			// 重置表单数据到初始状态
			resetForm() {
				// 直接重置 dataForm 对象
				Object.assign(this.dataForm, {
					id: undefined,
					cpid: undefined,
					cpmc: undefined,
					cpxh: undefined,
					cpgg: undefined,
				})
				// 重置表单验证状态
				if (this.$refs['elForm']) {
					this.$refs['elForm'].clearValidate()
				}
			},
			init(id, isDetail) {
				// 先重置表单数据，避免上次编辑的数据残留
				this.resetForm()
				
				// 设置 isDetail 状态
				this.isDetail = isDetail || false;
				
				// 如果有 id，说明是编辑，否则是新建
				if (id) {
					// 编辑模式：设置 id 并加载数据
					this.dataForm.id = id;
					this.visible = true;
					this.$nextTick(() => {
						// 加载编辑数据
						request({
							url: '/api/Extend/Cpgl/' + id,
							method: 'get'
						}).then(res =>{
							// 直接赋值，确保所有字段都被更新
							Object.assign(this.dataForm, res.data);
						}).catch(() => {
							// 如果加载失败，重置表单
							this.resetForm()
						})
					})
				} else {
					// 新建模式：确保所有字段都是空的
					this.dataForm.id = undefined;
					this.visible = true;
					this.$nextTick(() => {
						// 再次确保 dataForm 是空的（防止 resetFields 恢复之前的值）
						Object.assign(this.dataForm, {
							id: undefined,
							cpid: undefined,
							cpmc: undefined,
							cpxh: undefined,
							cpgg: undefined,
						})
						// 清除表单验证状态
						if (this.$refs['elForm']) {
							this.$refs['elForm'].clearValidate()
						}
					})
				}
			},
			dataFormSubmit() {
				this.$refs['elForm'].validate((valid) => {
                    if (valid) {
                        if (!this.dataForm.id) {
                            request({
                                url: `/api/Extend/Cpgl`,
                                method: 'post',
                                data: this.dataForm,
                            }).then((res) => {
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () => {
                                        this.visible = false,
                                            this.$emit('refresh', true)
                                    }
                                })
                            })
                        } else {
                            request({
                                url: '/api/Extend/Cpgl/' + this.dataForm.id,
                                method: 'PUT',
                                data: this.dataForm
                            }).then((res) => {
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () => {
                                        this.visible = false
                                        this.$emit('refresh', true)
                                    }
                                })
                            })
                        }
                    }
                })
			},
		}
	}
</script>
