<template>
<el-drawer :title="titleMap[mode]" v-model="visible" size="50%" destroy-on-close @closed="$emit('closed')">
	<el-form :model="form" :rules="rules" ref="dialogForm" label-width="160px" style="padding: 10px">
		<el-form-item label="广告名称" prop="title">
			<el-input v-model="form.title" placeholder="广告名称" clearable />
		</el-form-item>
		<el-form-item label="广告标识" prop="name">
			<el-input v-model="form.name" placeholder="广告标识" clearable />
		</el-form-item>
		<el-form-item label="广告位" prop="group">
			<sc-select v-model="form.group" dic="ads_places" placeholder="请选择广告位" style="width: 240px;" clearable />
		</el-form-item>
		<el-form-item label="广告位标识" prop="group">
			<el-input v-model="form.group" disabled clearable />
		</el-form-item>
		<el-form-item label="链接地址" prop="link">
			<el-input v-model="form.link" placeholder="链接地址" clearable />
		</el-form-item>
		<el-form-item label="图片" prop="cover">
			<sc-upload title="单图上传" v-model="form.cover" accept="image/jpg,image/png"></sc-upload>
		</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="sort">
			<el-input v-model="form.sort" placeholder="排序" clearable />
		</el-form-item>
		<el-form-item label="状态" prop="status">
			<el-select v-model="form.status" placeholder="请选择状态">
				<el-option v-for="item in [{label: '启用', value: 1}, {label: '禁用', value: 0}]" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</el-form-item>
	</el-form>
	<template #footer>
		<el-button type="primary" @click="onSubmit()">确认提交</el-button>
	</template>
</el-drawer>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增',
				edit: '编辑',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {type: 1, status: 1},
			//验证规则
			rules: {
				title: [{required: true, message: '请输入广告位标题', trigger: 'blur'}],
				name: [{required: true, message: '请输入广告位标识', trigger: 'blur'}],
			},
			cache: {}
		}
	},
	mounted() {
		let cache = [];
		for(let item of cache) {
			this.cache[item] = this.$TOOL.data.get('cache_'+item)
		}
	},
	methods: {
		//显示
		open(mode='add'){
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		onSubmit(){
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = {}
					if(this.mode == 'add'){
						res = await this.$API.ads.add.post(this.form);
					}else{
						res = await this.$API.ads.edit.post(this.form);
					}
					this.isSaveing = false;
					if(res.code == 1){
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					}else{
						this.$alert(res.message, "提示", {type: 'error'})
					}
				}
			})
		},
		//表单注入数据
		setData(data){
			this.form = data
		}
	}
}
</script>
