<template>
	<div>
		<el-dialog :title="title" :close-on-click-modal="false" draggable width="900px" @close="close"
			@keyup.enter.native="doSubmit" v-model="visible">
			<el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method === 'view' ? 'readonly' : ''"
				:disabled="method === 'view'" label-width="110px" @submit.native.prevent>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="菜品编码" prop="dishCode">
							<el-input v-model="inputForm.dishCode" placeholder="不填写则自动生成"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="菜品名称" prop="dishName"
							:rules="[{ required: true, message: '菜品名称不能为空', trigger: 'blur' }]">
							<el-input v-model="inputForm.dishName" placeholder="请填写菜品名称"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="菜品分类" prop="typeId"
							:rules="[{ required: true, message: '请选择菜品分类', trigger: 'change' }]">
							<SelectTree ref="dishTypeTree" v-if="visible" :props="{
								value: 'id',
								label: 'name',
								children: 'children'
							}" url="/psi-management-server/psi/dishType/treeData" :value="inputForm.typeId" :clearable="true"
								:accordion="true" :is-only-select-leaf="true" size="default"
								@getValue="(value) => { inputForm.typeId = value }" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="单位" prop="unit">
							<el-input v-model="inputForm.unit" placeholder="如：份、盘、碗"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="规格" prop="spec">
							<el-input v-model="inputForm.spec" placeholder="如：300g/份"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="口味" prop="taste">
							<el-input v-model="inputForm.taste" placeholder="如：微辣、清淡"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="销售价（元）" prop="salePrice">
							<el-input-number v-model="inputForm.salePrice" :min="0" :precision="2"
								style="width: 100%"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="参考成本价（元）" prop="costPrice">
							<el-input-number v-model="inputForm.costPrice" :min="0" :precision="2"
								style="width: 100%"></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="排序" prop="sort">
							<el-input-number v-model="inputForm.sort" :min="0" style="width: 100%"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="状态" prop="status">
							<el-radio-group v-model="inputForm.status">
								<el-radio label="0">启用</el-radio>
								<el-radio label="1">停用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">

					<el-col :span="24">
						<el-form-item label="备注" prop="remarks">
							<el-input v-model="inputForm.remarks" type="textarea" :rows="6" maxlength="500"
								placeholder="请输入备注" show-word-limit></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="菜品图片" prop="imageUrl">
							<DishImageUpload ref="dishImageUpload" v-model="inputForm.imageUrl" :auth="method"
								directory="dish" :max-size="10" :limit="9">
							</DishImageUpload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
					<el-button type="primary" v-if="method !== 'view'" @click="doSubmit()" icon="el-icon-circle-check"
						v-noMoreClick>确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import DishLibraryService from '@/api/psi/DishLibraryService'
import SelectTree from './DishTypeSelectTree.vue'
import DishImageUpload from './DishImageUpload'
export default {
	data() {
		return {
			title: '',
			method: '',
			visible: false,
			loading: false,
			inputForm: {
				dishCode: '',
				dishName: '',
				typeId: '',
				imageUrl: '',
				unit: '',
				spec: '',
				salePrice: 0,
				costPrice: 0,
				taste: '',
				status: '0',
				sort: 0,
				remarks: ''
			}
		}
	},
	dishLibraryService: null,
	created() {
		this.dishLibraryService = new DishLibraryService()
	},
	components: {
		SelectTree,
		DishImageUpload
	},
	methods: {
		init(method, id) {
			this.method = method
			this.inputForm = {
				dishCode: '',
				dishName: '',
				typeId: '',
				imageUrl: '',
				unit: '',
				spec: '',
				salePrice: 0,
				costPrice: 0,
				taste: '',
				status: '0',
				sort: 0,
				remarks: ''
			}
			if (method === 'add') {
				this.title = '新建菜品'
			} else if (method === 'edit') {
				this.title = '修改菜品'
				this.inputForm.id = id
			} else if (method === 'view') {
				this.title = '查看菜品'
				this.inputForm.id = id
			}
			this.visible = true
			this.loading = false
			this.$nextTick(() => {
				if (method === 'edit' || method === 'view') {
					this.loading = true
					this.$refs.inputForm.resetFields()
					this.dishLibraryService.findById(this.inputForm.id).then((data) => {
						this.inputForm = this.recover(this.inputForm, data)
						this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
						this.loading = false
					}).catch(() => {
						this.loading = false
					})
				}
			})
		},
		doSubmit() {
			this.$refs.inputForm.validate((valid) => {
				if (valid) {
					if (!this.validateDishTypeLeaf()) {
						return
					}
					this.loading = true
					if (this.$refs.dishImageUpload && this.$refs.dishImageUpload.checkProgress()) {
						this.loading = false
						return
					}
					this.dishLibraryService.save(this.inputForm).then((data) => {
						if (data && (data.indexOf('重复') > -1 || data.indexOf('请选择') > -1)) {
							this.$message.error(data)
						} else {
							this.$message.success(data)
							this.close()
							this.$emit('refreshList')
						}
						this.loading = false
					}).catch(() => {
						this.loading = false
					})
				}
			})
		},
		validateDishTypeLeaf() {
			const dishTypeTree = this.$refs.dishTypeTree
			if (!dishTypeTree || !this.inputForm.typeId) {
				return true
			}
			const node = dishTypeTree.getNode(this.inputForm.typeId)
			if (node && node.childNodes && node.childNodes.length > 0) {
				this.$message.warning('菜品分类只能选择最子级分类')
				return false
			}
			return true
		},
		close() {
			this.$refs.inputForm && this.$refs.inputForm.resetFields()
			this.$refs.dishImageUpload && this.$refs.dishImageUpload.clearUpload()
			this.visible = false
		}
	}
}
</script>
