<template>
	<el-dialog title="设置新店保护时间" :visible.sync="visible" width="600px" :close-on-click-modal="false" @close="handleClose">
		<el-form ref="form" :model="form" :rules="rules" label-width="120px">
			<el-form-item label="门店" prop="mdid">
				<el-select v-model="form.mdid" placeholder="请选择门店" style="width: 100%" clearable :disabled="!!preSelectedStore">
					<el-option 
						v-for="item in storeOptions" 
						:key="item.id" 
						:label="item.dm" 
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="保护开始时间" prop="bhkssj">
				<el-date-picker
					v-model="form.bhkssj"
					type="datetime"
					placeholder="选择保护开始时间"
					value-format="yyyy-MM-dd HH:mm:ss"
					format="yyyy-MM-dd HH:mm:ss"
					style="width: 100%">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="保护结束时间" prop="bhjssj">
				<el-date-picker
					v-model="form.bhjssj"
					type="datetime"
					placeholder="选择保护结束时间"
					value-format="yyyy-MM-dd HH:mm:ss"
					format="yyyy-MM-dd HH:mm:ss"
					style="width: 100%">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="阶段" prop="stage">
				<el-select v-model="form.stage" placeholder="请选择阶段" style="width: 100%" clearable>
					<el-option label="第一阶段" :value="1"></el-option>
					<el-option label="第二阶段" :value="2"></el-option>
					<el-option label="第三阶段" :value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="说明" prop="sm">
				<el-input
					v-model="form.sm"
					type="textarea"
					:rows="3"
					placeholder="请输入说明信息"
					maxlength="500"
					show-word-limit>
				</el-input>
			</el-form-item>
			<el-form-item label="是否启用" prop="sfqy">
				<el-radio-group v-model="form.sfqy">
					<el-radio :label="1">启用</el-radio>
					<el-radio :label="0">禁用</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
	name: 'SetNewStoreDialog',
	data() {
		return {
			visible: false,
			submitLoading: false,
			form: {
				mdid: '',
				bhkssj: '',
				bhjssj: '',
				sm: '',
				sfqy: 1,
				stage: null
			},
			rules: {
				mdid: [
					{ required: true, message: '请选择门店', trigger: 'change' }
				],
				bhkssj: [
					{ required: true, message: '请选择保护开始时间', trigger: 'change' }
				],
				bhjssj: [
					{ required: true, message: '请选择保护结束时间', trigger: 'change' }
				],
				stage: [
					{ required: true, message: '请选择阶段', trigger: 'change' }
				],
				sfqy: [
					{ required: true, message: '请选择是否启用', trigger: 'change' }
				]
			},
			storeOptions: [],
			preSelectedStore: null
		}
	},
	methods: {
		init(storeData) {
			this.visible = true
			this.resetForm()
			this.loadStoreOptions()
			
			// 如果传入了门店数据，预填充表单
			if (storeData) {
				this.preSelectedStore = storeData
				this.form.mdid = storeData.id
			} else {
				this.preSelectedStore = null
			}
		},
		resetForm() {
			this.form = {
				mdid: '',
				bhkssj: '',
				bhjssj: '',
				sm: '',
				sfqy: 1
			}
			this.preSelectedStore = null
			this.$nextTick(() => {
				if (this.$refs.form) {
					this.$refs.form.clearValidate()
				}
			})
		},
		loadStoreOptions() {
			request({
				url: '/api/Extend/LqMdxx',
				method: 'GET',
				data: {
					currentPage: 1,
					pageSize: 1000
				}
			}).then(res => {
				this.storeOptions = res.data.list || []
			}).catch(err => {
				this.$message.error('加载门店列表失败')
				console.error(err)
			})
		},
		handleSubmit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					// 验证时间逻辑
					if (new Date(this.form.bhkssj) >= new Date(this.form.bhjssj)) {
						this.$message.error('保护开始时间必须早于保护结束时间')
						return
					}
					
					this.submitLoading = true
					const submitData = {
						...this.form,
						cjsj: new Date().toISOString().slice(0, 19).replace('T', ' ')
					}
					
					request({
						url: '/api/Extend/LqMdXdbhsj',
						method: 'POST',
						data: submitData
					}).then(res => {
						if(res.code == 200) {
							this.$message.success('设置成功')
							this.handleClose()
							this.$emit('refresh')
						} else {
							this.$message.error(res.msg)
						}
					}).finally(() => {
						this.submitLoading = false
					})
				}
			})
		},
		handleClose() {
			this.visible = false
			this.resetForm()
		}
	}
}
</script>

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