<template>
	<el-dialog
		:title="isEdit ? '编辑合作成本' : '添加合作成本'"
		:visible.sync="visible"
		:close-on-click-modal="false"
		class="NCC-dialog NCC-dialog_center"
		width="800px"
		@close="handleClose"
	>
		<div class="form-content" v-loading="loading">
			<el-form ref="form" :model="dataForm" :rules="rules" label-width="120px" label-position="right">
				<el-form-item label="门店" prop="storeId">
					<el-select v-model="dataForm.storeId" placeholder="请选择门店" clearable filterable style="width: 100%" @change="handleStoreChange">
						<el-option v-for="store in storeOptions" :key="store.id" :label="store.dm" :value="store.id" />
					</el-select>
				</el-form-item>
				<el-form-item v-show="false" label="门店名称" prop="storeName">
					<el-input v-model="dataForm.storeName" placeholder="自动填充" readonly />
				</el-form-item>
				<el-form-item label="年份" prop="year">
					<el-date-picker
						v-model="dataForm.year"
						type="year"
						placeholder="请选择年份"
						format="yyyy"
						value-format="yyyy"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="月份" prop="month">
					<el-date-picker
						v-model="dataForm.month"
						type="month"
						placeholder="请选择月份"
						format="yyyyMM"
						value-format="yyyyMM"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="合计金额" prop="totalAmount">
					<el-input-number v-model="dataForm.totalAmount" placeholder="请输入合计金额" :precision="2" :min="0" :step="1" style="width: 100%" />
				</el-form-item>
				<el-form-item label="备注" prop="remarks">
					<el-input v-model="dataForm.remarks" type="textarea" :rows="3" placeholder="请输入备注说明" maxlength="500" show-word-limit />
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="dataFormSubmit" :loading="submitLoading">确定</el-button>
		</div>
	</el-dialog>
</template>

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

export default {
	data() {
		return {
			visible: false,
			loading: false,
			submitLoading: false,
			isEdit: false,
			dataForm: {
				id: '',
				storeId: '',
				storeName: '',
				year: '',
				month: '',
				totalAmount: 0,
				remarks: ''
			},
			rules: {
				storeId: [
					{ required: true, message: '请选择门店', trigger: 'change' }
				],
				year: [
					{ required: true, message: '请选择年份', trigger: 'change' }
				],
				month: [
					{ required: true, message: '请选择月份', trigger: 'change' }
				],
				totalAmount: [
					{ required: true, message: '请输入合计金额', trigger: 'blur' },
					{ type: 'number', min: 0, message: '合计金额必须大于等于0', trigger: 'blur' }
				]
			},
			storeOptions: []
		}
	},
	created() {
		this.initStoreOptions()
	},
	methods: {
		init(id) {
			this.visible = true
			this.isEdit = !!id
			this.loading = false
			this.submitLoading = false
			this.resetForm()
			if (id) {
				this.loadData(id)
			}
		},
		resetForm() {
			this.dataForm = {
				id: '',
				storeId: '',
				storeName: '',
				year: '',
				month: '',
				totalAmount: 0,
				remarks: ''
			}
			if (this.$refs.form) {
				this.$refs.form.clearValidate()
			}
		},
		loadData(id) {
			this.loading = true
			request({
				url: `/api/Extend/LqCooperationCost/${id}`,
				method: 'GET'
			}).then(res => {
				if (res.code == 200 && res.data) {
					this.dataForm = {
						id: res.data.id,
						storeId: res.data.storeId,
						storeName: res.data.storeName,
						year: res.data.year ? String(res.data.year) : '',
						month: res.data.month,
						totalAmount: res.data.totalAmount || 0,
						remarks: res.data.remarks || ''
					}
				}
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		initStoreOptions() {
			request({
				url: '/api/Extend/LqMdxx',
				method: 'GET',
				data: {
					currentPage: 1,
					pageSize: 1000
				}
			}).then(res => {
				if (res.data && res.data.list) {
					this.storeOptions = res.data.list
				}
			}).catch(() => {
				this.storeOptions = []
			})
		},
		handleStoreChange(value) {
			const store = this.storeOptions.find(s => s.id === value)
			if (store) {
				this.dataForm.storeName = store.dm
			} else {
				this.dataForm.storeName = ''
			}
		},
		dataFormSubmit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.submitLoading = true
					const submitData = {
						storeId: this.dataForm.storeId,
						storeName: this.dataForm.storeName,
						year: parseInt(this.dataForm.year),
						month: this.dataForm.month,
						totalAmount: parseFloat(this.dataForm.totalAmount) || 0,
						remarks: this.dataForm.remarks || ''
					}
					const url = this.isEdit
						? `/api/Extend/LqCooperationCost/${this.dataForm.id}`
						: '/api/Extend/LqCooperationCost'
					const method = this.isEdit ? 'PUT' : 'POST'
					request({
						url,
						method,
						data: submitData
					}).then(res => {
						this.$message({
							type: 'success',
							message: res.msg || (this.isEdit ? '更新成功' : '创建成功'),
							onClose: () => {
								this.handleClose()
								this.$emit('refresh')
							}
						})
					}).catch(() => {
						this.submitLoading = false
					})
				}
			})
		},
		handleClose() {
			this.visible = false
			this.resetForm()
		}
	}
}
</script>

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

