<template>
	<view class="page">
		<view class="add-list">
			<view class="item">
				<view class="contents" style="background-color:#fff;">
					<view class="feedback-data">
						<view>
							<view class="title">
								<text style="font-weight: bold;">*宣传标题</text>
							</view>
						</view>
						<view class="voucher-img">
							<view class="voucher-list" style="width: 100%;">
								<view class="" style="background-color: #F0F0F0;border-radius: 20rpx;">
									<textarea :auto-height="true" placeholder="请输入"
										style="font-size: 24rpx;background-color: #F0F0F0;border-radius: 20rpx;width: 96%;margin: 0 auto;padding:10px;min-height: 100px;"
										v-model="rulform.schemeTitle"></textarea>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="contents" style="background-color:#fff;">
					<view class="feedback-data">
						<view>
							<view class="title">
								<text style="font-weight: bold;">*宣传海报</text>
							</view>
						</view>
						<view class="voucher-img">
							<view class="voucher-list" style="width: 100%;">
								<u-upload :action="$upload" :auto-upload="false" ref="coverImage" :max-count="1" :file-list="fist"
									@on-choose-complete="(response, file, fileList) => onsuccess1(response, file, fileList, 'coverImage')"></u-upload>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="contents" style="background-color:#fff;">
					<view class="feedback-data">
						<view>
							<view class="title">
								<text style="font-weight: bold;">*宣传内容</text>
							</view>
						</view>
						<view>
							 <spEditor
							:toolbar-config="{
						excludeKeys: ['direction', 'date', 'export','link', 'letterSpacing','video','undo','redo'],
							          iconSize: '18px'
							        }"
							        @input="inputOver"
							        @upinImage="upinImage"
									:placeholde="'请输入内容'"
							      ></spEditor>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- <u-select v-model="popup1" :list="list" @confirm="pops"></u-select> -->


		<!-- 保存按钮 -->
		<view class="page-footer" @click="go">
			<view class="footer-buy">
				<view class="cart-add">
					<text>提交</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import spEditor from '@/pagesA/sp-editor/components/sp-editor/sp-editor.vue'
	export default {
		components:{
		spEditor	
		},
		data() {
			return {
				fist: [],
				rulform: {
					schemeTitle: '',
					createDate: '',
					createUser: '',
					promotionContent: '',
					coverImage: '',
					state:'2'
				},
				Fenshow:true,
				editorIns: null
			}
		},
		mounted() {
			
		},
		onLoad(optiong) {
			console.log(optiong.item)
			// if(optiong.item){
			// 	this.rulform = JSON.parse(optiong.item)
			// 	this.Fenshow = false
			// }
		},
		methods: {
			 inputOver(e) {
			      // 可以在此处获取到编辑器已编辑的内容
			      console.log('==== inputOver :', e)
				  this.rulform.promotionContent = e.html
			    },
				   upinImage(tempFiles, editorCtx) {
					   console.log(tempFiles)
				     tempFiles.forEach(async (item) => {
				         uni.uploadFile({
				         	url: this.$upload, // 仅为示例，请替换为您的服务器上传接口
				         	filePath: tempFiles[0].path,
				         	name: 'file', // 后端接收的文件参数名
				         	formData: {
				         		filePath: 'xcx', // 其他表单数据
				         	},
							
				         	success: (uploadFileRes) => {
				         		uni.showToast({
				         			title: '上传成功',
				         			icon: 'success',
				         		})
								editorCtx.insertImage({
								  src: this.$img + JSON.parse(uploadFileRes.data).data,
								  width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
								  success: function () {
								    uni.hideLoading()
								  }
								})
				         	},
				         	fail: (err) => {
				         		console.error('上传失败', err);
				         		uni.showToast({
				         			title: '上传失败',
				         			icon: 'none',
				         		});
				         	},
				         })
				           
				           })
					  },
			 padZero(num) {
			  return num < 10 ? '0' + num : num;
			},
		getCurrentTimeFormatted() {
			  const now = new Date();
			  return `${now.getFullYear()}-${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(now.getHours())}:${this.padZero(now.getMinutes())}:${this.padZero(now.getSeconds())}`;
			},

			go() {
				console.log(this.rulform,uni.getStorageSync('user').phone)
				if(!this.rulform.schemeTitle){
					uni.showToast({
						icon: 'none',
						title: '请输入宣传标题'
					})
					return
				}
				if(!this.rulform.coverImage){
					uni.showToast({
						icon: 'none',
						title: '请上传宣传封面'
					})
					return
				}
				if(!this.rulform.promotionContent){
					uni.showToast({
						icon: 'none',
						title: '请输入宣传内容'
					})
					return
				}
				this.rulform.createDate = this.getCurrentTimeFormatted()
				  this.rulform.createUser = uni.getStorageSync('user').phone
				  let info = {
				  	...this.rulform,
				  	coverImage:this.rulform.coverImage.replace(this.$img,''),
				  }
				this.$http.sendRequest('/cerePromotion/addPromotionPlanning', 'POST', info,1).then(res => {
					//成功回调
					uni.redirectTo({
						url: '/pagesA/projectManagement/projectManagement'
					})
				})
			
			},
			onsuccess1(e, file, fileList, ziduan) {
				uni.uploadFile({
					url: this.$upload, // 仅为示例，请替换为您的服务器上传接口
					filePath: e[0].url,
					name: 'file', // 后端接收的文件参数名
					formData: {
						filePath: 'xcx', // 其他表单数据
					},
					success: (uploadFileRes) => {
						
							this.rulform.coverImage = this.$img + JSON.parse(uploadFileRes.data).data
							// let obj ={
							// 	url:this.$img + JSON.parse(uploadFileRes.data).data
							// }
							// this.fist.push(obj)
						uni.showToast({
							title: '上传成功',
							icon: 'success',
						});
					},
					fail: (err) => {
						console.error('上传失败', err);
						uni.showToast({
							title: '上传失败',
							icon: 'none',
						});
					},
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'application.scss';

	.juli {
		padding: 10rpx;
		display: flex;
		flex-wrap: wrap;

		.u-transition {
			// width: 31%;
			margin: 1%;
			// width: 212rpx;
			// height: 80rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background-color: rgba(21, 98, 214, 0.1);
			// line-height: 80rpx;
			text-align: center;
			font-style: normal;
			color: #1562D6;
			font-size: 28rpx;
			border-radius: 2px;

		}

		::v-deep .u-tag--primary--plain {
			border: 0px;
			border-radius: 2px;
			background-color: #ebebeb;

			.u-tag__text--primary--plain {
				color: #000;

			}
		}

		::v-deep .u-tag--primary {
			background-color: rgba(245, 178, 160, 0.3);
			border: 0px;
			border-radius: 2px;

			.u-tag__text--primary {
				color: #ff3442;
			}
		}

		.jinbutiao {
			display: flex;
			width: 100%;
			align-items: center;

			.u-slider {
				width: 80%;
				margin-right: 20rpx;
			}
		}
	}

	.choose1 {
		width: 100%;
		display: flex;

		.choose1left {
			width: 26%;
			border-right: 2rpx solid #f6f6f6;

			.leftItem1 {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0;
			}
		}

		.choose1right {
			flex: 1;

			// width: 70%;
			.rightBox {
				width: 90%;
				margin: 0 auto;

				.weizhiName {
					display: flex;
					justify-content: space-between;
					align-items: center;

					// height: 80rpx;
					.weizhiLeft {
						display: flex;
						align-items: center;

						.weizhiInput {
							color: #959595;
						}
					}

					.weizhiSpan {
						color: #D32D25;
					}
				}

				.juli {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;

					.u-transition {
						// width: 31%;
						margin: 1%;
						// width: 212rpx;
						// height: 80rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						background-color: rgba(21, 98, 214, 0.1);
						// line-height: 80rpx;
						text-align: center;
						font-style: normal;
						color: #1562D6;
						font-size: 28rpx;

					}

					.u-tag-wrapper {
						width: 100%;
						height: 100%;
						border: none !important;
					}

					.u-tag {
						padding: 0;
						width: 212rpx !important;
						height: 60rpx !important;
					}

					.u-tag__text {
						width: 100%;
						font-size: 25rpx;
						text-align: center;
						margin: 0 auto;
					}

				}
			}

			.quyu {
				display: flex;
				padding-left: 20rpx;
				height: 300px;
				width: 100%;

				.sl_city {
					width: 48%;
					margin-right: 0px;
					overflow: auto;

				}
			}
		}
	}

	::v-deep .u-input__input {
		text-align: right;
	}
</style>