<template>
	<el-dialog :title="!dataForm.id ? '新增门店消耗品库存' : '编辑门店消耗品库存'" :close-on-click-modal="false"
		:visible.sync="visible" class="NCC-dialog NCC-dialog_center" lock-scroll width="600px">
		<el-form ref="elForm" :model="dataForm" size="small" label-width="120px" label-position="right" :rules="rules">
			<el-row :gutter="15">
				<el-col :span="24">
					<el-form-item label="门店" prop="storeId">
						<el-select v-model="dataForm.storeId" placeholder="请选择门店" clearable filterable
							:style='{"width":"100%"}' :disabled="!!dataForm.id">
							<el-option v-for="store in storeOptions" :key="store.id" :label="store.dm" :value="store.id" />
						</el-select>
					</el-form-item>
				</el-col>
			<el-col :span="24">
				<el-form-item label="产品类型" prop="productType">
					<el-select v-model="dataForm.productType" placeholder="请选择产品类型" clearable filterable
						:style='{"width":"100%"}'>
						<el-option v-for="item in productTypeOptions" :key="item.Value" :label="item.Name" :value="item.Name" />
					</el-select>
				</el-form-item>
			</el-col>
				<el-col :span="24">
					<el-form-item label="库存数量" prop="quantity">
						<el-input-number v-model="dataForm.quantity" placeholder="请输入库存数量" :min="0" :precision="0"
							:style='{"width":"100%"}' />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">确 定</el-button>
		</span>
	</el-dialog>
</template>

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

export default {
	data() {
		return {
			visible: false,
			btnLoading: false,
			storeOptions: [],
			productTypeOptions: [],
			dataForm: {
				id: undefined,
				storeId: '',
				productType: '',
				quantity: 0
			},
			rules: {
				storeId: [
					{ required: true, message: '请选择门店', trigger: 'change' }
				],
				productType: [
					{ required: true, message: '请选择产品类型', trigger: 'change' }
				],
				quantity: [
					{ required: true, message: '请输入库存数量', trigger: 'blur' },
					{ type: 'number', min: 0, message: '库存数量不能小于0', trigger: 'blur' }
				]
			}
		}
	},
	methods: {
		init(id) {
			this.visible = true
			this.dataForm = {
				id: undefined,
				storeId: '',
				productType: '',
				quantity: 0
			}
			this.loadStoreOptions()
			this.loadProductTypeOptions()
			if (id) {
				// 编辑模式，获取详情
				this.getDetail(id)
			}
		},
		// 加载门店选项
		loadStoreOptions() {
			request({
				url: '/api/Extend/LqMdxx',
				method: 'GET',
				data: {
					currentPage: 1,
					pageSize: 1000
				}
			}).then(res => {
				if (res.code == 200 && res.data && res.data.list) {
					this.storeOptions = res.data.list
				} else {
					this.storeOptions = []
				}
			}).catch(() => {
				this.storeOptions = []
			})
		},
		// 加载产品类型选项
		loadProductTypeOptions() {
			request({
				url: '/api/Extend/LqStoreConsumableInventory/consumable-product-type',
				method: 'GET'
			}).then(res => {
				if (res.code == 200 && res.data && Array.isArray(res.data)) {
					this.productTypeOptions = res.data
				} else {
					this.productTypeOptions = []
				}
			}).catch(() => {
				this.productTypeOptions = []
			})
		},
		// 获取详情
		getDetail(id) {
			request({
				url: `/api/Extend/LqStoreConsumableInventory/${id}`,
				method: 'GET'
			}).then(res => {
				if (res.code == 200 && res.data) {
					const data = res.data
					this.dataForm = {
						id: data.id,
						storeId: data.storeId || '',
						productType: data.productType || '',
						quantity: data.quantity || 0
					}
				}
			}).catch(() => {
				this.$message({
					type: 'error',
					message: '获取详情失败'
				})
			})
		},
		// 提交表单
		dataFormSubmit() {
			this.$refs.elForm.validate((valid) => {
				if (!valid) {
					return false
				}
				this.btnLoading = true
				const url = this.dataForm.id ? '/api/Extend/LqStoreConsumableInventory/Update' : '/api/Extend/LqStoreConsumableInventory/Create'
				const method = this.dataForm.id ? 'PUT' : 'POST'
				const data = this.dataForm.id
					? {
						id: this.dataForm.id,
						storeId: this.dataForm.storeId,
						productType: this.dataForm.productType,
						quantity: this.dataForm.quantity
					}
					: {
						storeId: this.dataForm.storeId,
						productType: this.dataForm.productType,
						quantity: this.dataForm.quantity
					}
				request({
					url: url,
					method: method,
					data: data
				}).then(res => {
					this.btnLoading = false
					this.$message({
						type: 'success',
						message: res.msg || (this.dataForm.id ? '编辑成功' : '创建成功'),
						onClose: () => {
							this.visible = false
							this.$emit('refresh')
						}
					})
				}).catch(() => {
					this.btnLoading = false
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
</style>

