<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="cost_price">
				<el-input v-model="form.cost_price" type="number" placeholder="请输入成本价"></el-input>
			</el-form-item>
			<el-form-item label="服务时间(分钟)" prop="service_time">
				<el-input v-model="form.service_time" type="number" placeholder="请输入简介"></el-input>
			</el-form-item>
			<el-form-item label="员工服务费(元)" prop="commission">
				<el-input v-model="form.commission" type="number" placeholder="请输入简介"></el-input>
			</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="slider_image">
				<UploadQiniu :limit="10" :file-list="imgList" @uploadSuccess="uploadSuccess"
					@imgSortChange="imgSortChange" @handleRemove="uploadRemove" />
			</el-form-item>
			<el-form-item label="详情" prop="result">
				<Tinymce v-model="form.result" :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 {
		addShopProject,
		detailsShopProject,
		updateShopProject
	} from "@/api/OrderSubscribe";
	import UploadQiniu from "@/component/common/UploadQiniu.vue";
	import Tinymce from "@/component/Tinymce";
	export default {
		name: "AddItem",
		components: {
			UploadQiniu,
			Tinymce
		},
		data() {
			return {
				// 存储批量图
				imgList: [],
				// 存储单图
				image: [],
				form: {
					//服务名称
					name: '',
					//售价
					price: 0,
					// 原价
					ot_price: 0,
					//成本价 
					cost_price: 0,
					// 服务时长
					service_time: 0,
					// 简介
					info: '',
					// 详细介绍
					result: '',
					// 封面图
					image: [],
					// 轮播图
					slider_image: [],
					commission: 0,
					// 是否详情
					setDetail: false,
					// 需要修改的内容id
					setId: ''
				},
				rules: {
					name: [{
						required: true,
						message: "请输入服务名称",
						trigger: "blur"
					}],
					image: [{
						required: true,
						message: "请选择主图",
					}],
					slider_image: [{
						required: true,
						message: "请选择轮播图",
					}],
					price: [{
						required: true,
						message: "请输入售价",
						trigger: "blur"
					}],
					ot_price: [{
						required: true,
						message: "请输入原价",
						trigger: "blur"
					}],
					cost_price: [{
						required: true,
						message: "请输入成本价",
						trigger: "blur"
					}],
					service_time: [{
						required: true,
						message: "请输入服务时长",
						trigger: "blur"
					}],
					commission: [{
						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.detailsShopProject();
			}
		},
		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;
				});
			},
			// 选择图片
			uploadSuccess(val, res, file, fileList, num) {
				const imgArr = fileList.map((item) => {
					return item.content;
				});
				console.log(this.form.slider_image, '11');
				if (this.form.slider_image.length) {
					this.form.slider_image = this.form.slider_image.concat(imgArr);
				} else {
					this.form.slider_image = imgArr;
				}
				this.imgList = this.form.slider_image.map((item) => {
					return {
						name: "",
						content: item,
					};
				});
				if (this.imgList.length > num) {
					this.$message.warning("图片最多只能选择十张");
					this.imgList = this.imgList.slice(0, 10);
				}
			},
			// 图片拖拽排序
			imgSortChange(list) {
				this.form.slider_image = list.map((item) => {
					return item.content;
				});
			},
			uploadRemove(file, fileList) {
				console.log(fileList, 'del');
				this.form.slider_image = fileList.map((item) => {
					return item.content;
				});
			},

			close() {
				this.$emit("close");
			},
			//  班次详情 detailsShopProject
			async detailsShopProject() {
				if (!this.setId) return;
				const {
					data
				} = await detailsShopProject({
					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]
				}
				if (this.form.slider_image) {
					this.imgList = this.form.slider_image.map((item) => {
						return {
							name: "",
							content: item,
						};
					});
				} else {
					this.form.slider_image = [];
				}
			},
			async confirm() {
				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) {
							data = await addShopProject(upData);
						} else {
							data = await updateShopProject(upData);
						}
						loading.close();
						this.$message({
							message: data.data,
							type: "success",
						});
						this.$closeCurrentGoEdit(`/goods/item/OrderItem`);
					}
				});
			},
		},
	};
</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>
