<template>
	<div>
		<el-form ref="form" :rules="rules" size="small" :model="form" label-width="120px">
			<el-form-item label="优惠卡名称" prop="name">
				<el-input v-model="form.name" placeholder="请输入优惠卡名称"></el-input>
			</el-form-item>
			<el-form-item label="售价" prop="price">
				<el-input v-model="form.price" type="number" placeholder="请输入售价"></el-input>
			</el-form-item>
			<el-form-item label="原价" prop="ot_price">
				<el-input v-model="form.ot_price" type="number" placeholder="请输入原价"></el-input>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select v-model="form.status" style="width: 350px" filterable placeholder="请选择状态"
					>
					<el-option label="正常" :value="1"></el-option>
					<el-option label="禁用" :value="0"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="简介" prop="info">
				<el-input v-model="form.info" placeholder="请输入简介"></el-input>
			</el-form-item>
			<el-form-item label="封面图" prop="image">
				<UploadQiniu :limit="1" :file-list="image" @uploadSuccess="uploadSuccessOne"
					@handleRemove="uploadRemoveOne" />
			</el-form-item>
			<el-form-item label="详情" prop="introduce">
				<Tinymce v-model="form.introduce" :height="300" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="confirm">提 交</el-button>
				<el-button @click="close">取 消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		addCard,
		detailsCard,
		updateCard
	} from "@/api/card";
	import UploadQiniu from "@/component/common/UploadQiniu.vue";
	import Tinymce from "@/component/Tinymce";
	export default {
		name: "AddCard",
		components: {
			UploadQiniu,
			Tinymce
		},
		data() {
			return {
				// 存储单图
				image: [],
				form: {
					// 默认优惠卡状态
					status:1,
					//优惠卡名称
					name: '',
					//售价
					price: 0,
					// 原价
					ot_price: 0,
					// 简介
					info: '',
					// 详细介绍
					introduce: '',
					// 封面图
					image: [],
					// 是否详情
					setDetail: false,
					// 需要修改的内容id
					setId: ''
				},
				rules: {
					name: [{
						required: true,
						message: "请输入优惠卡名称",
						trigger: "blur"
					}],
					image: [{
						required: true,
						message: "请选择主图",
					}],
					price: [{
						required: true,
						message: "请输入售价",
						trigger: "blur"
					}],
					ot_price: [{
						required: true,
						message: "请输入原价",
						trigger: "blur"
					}],
				}
			};
		},
		created() {
			const type = this.$route.query.setDetail || 0;
			// 判断是否为修改项目
			if (+type == 1) {
				this.setId = this.$route.query.id;
				this.setDetail = true;
				this.detailsCard();
			}
		},
		methods: {
			// 上传单张图片
			uploadSuccessOne(val, res, file, fileList, num) {
				const imgArr = fileList.map((item) => {
					return item.content;
				});
				this.form.image = imgArr;
				this.image = this.form.image.map((item) => {
					return {
						name: "",
						content: item,
					};
				});
			},
			// 删除单张图片
			uploadRemoveOne(file, fileList) {
				console.log(fileList, 'del');
				this.form.image = fileList.map((item) => {
					return item.content;
				});
			},
			close() {
				this.$closeCurrentGoEdit(`/Marketing/card/addCard`);
			},
			//  详情 detailsCard
			async detailsCard() {
				if (!this.setId) return;
				const {
					data
				} = await detailsCard({
					id: this.setId
				});
				// console.log(data, '数据');
				this.form = {
					...data,
				};
				if (this.form.image) {
					this.image = [{
						name: "",
						content: this.form.image,
					}]
					this.form.image = [this.form.image]
				}
			},
			async confirm() {
				console.log(this.form);
				 
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '提交中',
							spinner: 'el-icon-loading',
						});
						let upData = Object.assign({}, this.form);
						 upData.image = upData.image.join(',');
						// 判断是否为详情
						let data;
						if (!this.setDetail) {
							console.log(this.setDetail);
							data = await addCard(upData);
						} else {
							data = await updateCard(upData);
						}
						loading.close();
						this.$message({
							message: data.data,
							type: "success",
						});
						this.$closeCurrentGoEdit(`/Marketing/card/addCard`);
					}
				});
			},
		},
	};
</script>

<style scoped>
	.btn-up {
		position: relative;
	}

	.btn-department {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.btn-role-up {
		position: relative;
	}

	.add-role {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.creat-shop {
		color: #1890ff;
		font-size: 12px;
	}
</style>
