<template>
<el-drawer :title="titleMap[mode]" v-model="visible" :size="700" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
	<el-main>
		<el-form ref="dialogForm" :model="form" :rules="rules" label-width="160px">
			<el-form-item label="分类标题" prop="title">
				<el-input v-model="form.title" placeholder="请输入分类标题" clearable />
			</el-form-item>
			<el-form-item label="上级栏目" prop="parent_id">
				<sc-select-tree v-model="form.parent_id" :apiObj="$API.goods.category.list" :props="{label: 'title', value: 'id'}" hasTop />
			</el-form-item>
			<el-form-item label="图标" prop="icon">
				<el-input v-model="form.icon" placeholder="请输入图标" clearable />
			</el-form-item>
			<el-form-item label="分类封面" prop="cover">
				<sc-upload v-model="form.cover" title="分类封面" />
			</el-form-item>
			<el-form-item label="滚动图标识" prop="ads_place">
				<el-input v-model="form.ads_place" placeholder="请输入滚动图标识" clearable />
			</el-form-item>
			<el-form-item label="排序" prop="sort">
				<el-input-number v-model="form.sort" placeholder="请输入排序" clearable controls-position="right" />
			</el-form-item>
			<el-form-item label="是否推荐" prop="is_recom">
				<el-switch v-model="form.is_recom" :active-value="1" :inactive-value="0" />
			</el-form-item>
			<el-form-item label="描述" prop="description">
				<el-input type="textarea" v-model="form.description" placeholder="请输入描述" clearable />
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select v-model="form.status" placeholder="请选择状态" clearable style="width: 120px;">
					<el-option :label="item.label" :value="item.value" v-for="(item, index) in [{label: '启用', value: 1}, {label: '禁用', value: 0}]" :key="index" />
				</el-select>
			</el-form-item>
		</el-form>
	</el-main>
	<template #footer>
		<el-button type="primary" @click="onSubmit">确认提交</el-button>
	</template>
</el-drawer>
</template>

<script>
import scEditor from '@/components/scEditor'

export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {add: '新增', edit: '编辑'},
			form: {parent_id: 0, sort: 0},
			rules: {
				title: [{required: true, message: '请输入分类标题'}],
				parent_id: [{required: true, message: '请选择上级栏目'}],
			},
			visible: false,
			isSaveing: false,
			cache: {}
		}
	},
	components: {
		scEditor
	},
	watch: {
		"form.operate"(value){
			this.priceTab = value[0]
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(mode='add'){
			this.mode = mode;
			this.visible = true;
			return this;
		},
		//表单提交方法
		onSubmit(){
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					let res
					if(this.form.id){
						res = await this.$API.goods.category.edit.post(this.form);
					}else{
						res = await this.$API.goods.category.add.post(this.form);
					}

					this.isSaveing = false;
					if(res.code == 1){
						this.$emit('success', res.data)
						this.visible = false;
						this.$message.success("操作成功")
					}else{
						this.$message.error(res.message)
					}
				}
			})
		},
		//表单注入数据
		setData(data){
			this.loading = true
			Object.assign(this.form, data)
		}
	}
}
</script>
