<template>
	<view class="index">
		<view class="title_text">
			基本信息
		</view>
		<view class="onecontent">
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					商品主图
				</view>
				<view class="onecontent_itemright flex-start">
					<view v-if="form.host_img" class="onecontent_itemrightimges flex-colum" @click="chooseImagelist()">
						<image :src="form.host_img"></image>
					</view>
					<view v-else class="onecontent_itemrightimges flex-colum" @click="chooseImagelist()">
						+
					</view>

				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					商品标题
				</view>
				<view class="onecontent_itemright flex-start">
					<input class="onecontent_itemright_text" v-model="form.title" type="text" placeholder="请输入商品名称">
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					商品描述
				</view>
				<view class="onecontent_itemright flex-start">
					<input class="onecontent_itemright_text" v-model="form.intro" type="text" placeholder="请输入商品描述">
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					商品分类
				</view>
				<view class="onecontent_itemright flex-start" @click="clicksheetshow">
					<text style="flex: 1; text-align: right;" class="onecontent_itemrighttext"
						v-if="form.name">{{form.name}}</text>
					<text style="flex: 1; text-align: right;" class="onecontent_itemrighttext" v-else>请选择</text>
					<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					上架
				</view>
				<u-switch v-model="form.status" @change="changeswitch" size="20"></u-switch>
			</view>
		</view>
		<view v-for="(item,index) in form.spec" :key="index">
			<view class="title_text flex-between">
				<text>商品规格({{index}})</text>
				<view class="onecontentesbox flex-start">
					<view class="onecontentesboxone" v-if="index == 0" @click="increasespec">添加</view>
					<view class="onecontentesboxonetow" @click="deletespec(index)">删除</view>
				</view>
			</view>
			<view class="onecontent onecontentes">
				<view class="onecontent_item flex-between">
					<view class="onecontent_itemleft">
						规格图片
					</view>
					<view class="onecontent_itemright flex-start">
						<view v-if="item.img" class="onecontent_itemrightimges flex-colum"
							@click="chooseImagelistssss(index)">
							<image :src="item.img"></image>
						</view>
						<view v-else class="onecontent_itemrightimges flex-colum" @click="chooseImagelistssss(index)">
							+
						</view>

					</view>
				</view>
				<view class="onecontent_item flex-between">
					<view class="onecontent_itemleft">
						商品名称
					</view>
					<view class="onecontent_itemright flex-start">
						<input class="onecontent_itemright_text" v-model="item.title" type="text" placeholder="请输入商品名称">
					</view>
				</view>
				<view class="onecontent_item flex-between">
					<view class="onecontent_itemleft">
						价格
					</view>
					<view class="onecontent_itemright flex-start">
						<input class="onecontent_itemright_text" v-model="item.price" type="text"
							placeholder="给商品定个好价格">
					</view>
				</view>
				<view class="onecontent_item flex-between">
					<view class="onecontent_itemleft">
						原价
					</view>
					<view class="onecontent_itemright flex-start">
						<input class="onecontent_itemright_text" v-model="item.y_price" type="text"
							placeholder="给商品定个好原价">
					</view>
				</view>
				<view class="onecontent_item flex-between">
					<view class="onecontent_itemleft">
						库存
					</view>
					<view class="onecontent_itemright flex-start">
						<input class="onecontent_itemright_text" v-model="item.stock" type="text" placeholder="请输入库存">
					</view>
				</view>

				<!--<view class="onecontent_item flex-between">
					<view class="onecontent_itemleft">
						上架
					</view>
					<u-switch v-model="form.status" @change="changeswitch" size="20"></u-switch>
				</view>
				 <view class="onecontent_item flex-between">
					<view class="onecontent_itemleft">
						推荐
					</view>
					<u-switch v-model="form.is_re" @change="changeswitchs" size="20"></u-switch>
				</view> -->
			</view>
		</view>
		<view class="title_text">
			商品描述
		</view>
		<view class="onecontent">
			<!-- <view @click="demos" class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					商品详情
				</view>
				<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
			</view> -->
			<view class="container">
				<view class="page-body">
					<view class='wrapper'>
						<view class='toolbar' @tap="format">
							<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu"
								data-name="bold">
							</view>
							<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti"
								data-name="italic">
							</view>
							<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
								data-name="underline"></view>
							<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
								data-name="strike"></view>
							<!-- #ifndef MP-BAIDU -->
							<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
								data-name="align" data-value="left"></view>
							<!-- #endif -->
							<view :class="formats.align === 'center' ? 'ql-active' : ''"
								class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
							<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
								data-name="align" data-value="right"></view>
							<view :class="formats.align === 'justify' ? 'ql-active' : ''"
								class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>
							<!-- #ifndef MP-BAIDU -->
							<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
								data-name="lineHeight" data-value="2"></view>
							<view :class="formats.letterSpacing ? 'ql-active' : ''"
								class="iconfont icon-Character-Spacing" data-name="letterSpacing" data-value="2em">
							</view>
							<view :class="formats.marginTop ? 'ql-active' : ''"
								class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop" data-value="20px">
							</view>
							<view :class="formats.marginBottom ? 'ql-active' : ''"
								class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px">
							</view>
							<!-- #endif -->

							<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>

							<!-- #ifndef MP-BAIDU -->
							<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
								data-name="fontFamily" data-value="Pacifico"></view>
							<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
								data-name="fontSize" data-value="24px"></view>
							<!-- #endif -->
							<view :class="formats.color === '#0000ff' ? 'ql-active' : ''"
								class="iconfont icon-text_color" data-name="color" data-value="#0000ff"></view>
							<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
								class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00">
							</view>
							<view class="iconfont icon-date" @tap="insertDate"></view>
							<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
							<view :class="formats.list === 'ordered' ? 'ql-active' : ''"
								class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
							<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
								data-name="list" data-value="bullet"></view>

							<view class="iconfont icon-undo" @tap="undo"></view>
							<view class="iconfont icon-redo" @tap="redo"></view>

							<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
							<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
							<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
							<view class="iconfont icon-charutupian" @tap="insertImage"></view>
							<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
								data-name="header" :data-value="1"></view>
							<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
								data-name="script" data-value="sub"></view>
							<view :class="formats.script === 'super' ? 'ql-active' : ''"
								class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>

							<view class="iconfont icon-shanchu" @tap="clear"></view>

							<view :class="formats.direction === 'rtl' ? 'ql-active' : ''"
								class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>

						</view>

						<view class="editor-wrapper">
							<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size
								show-img-toolbar show-img-resize @statuschange="onStatusChange" @input="getText"
								:read-only="readOnly" @ready="onEditorReady">
							</editor>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="baocun" @tap="$u.debounce(servicecreateitem,1000)">
			保存
		</view>
		<view class="baocun" v-if="form.goods_id!=''" @click="servicedelservice" style="background: red;">
			删除
		</view>
		<u-action-sheet :actions="listsheet" :show="sheetshow" @select="selectClick"></u-action-sheet>
	</view>
</template>
<script>
	import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
	export default {
		data() {
			return {
				listsheet: [],
				sheetshow: false,
				readOnly: false,
				formats: {},
				context: {},
				form: {
					type: 1, //1 创建 2 修改
					title: '',
					intro: '', //描述
					host_img: '', //主图
					goods_type_id: '', //分类ID
					status: true,
					details: '',
					goods_id: '',
					spec: [{
						title: '',
						price: '',
						y_price:"",
						img: '',
						stock: ''
					}]
				}
			}
		},
		async onLoad(e) {
			try {
				if (e.id) {
					this.form.goods_id = e.id
					uni.setNavigationBarTitle({
						title: '修改商品'
					})
					let res = await this.api.shoppinggoodsdetail({
						goods_id: e.id
					})
					if (res.code = 1) {
						this.form = res.data
						if(res.data.spec.length == 0){
							this.increasespec()
						}
						this.form.type = 2 //1 创建 2 修改
						var thisdatadescribe = res.data.details
						uni.createSelectorQuery().select('#editor').context((res) => {
							if (!res) return
							res.context.setContents({
								html: thisdatadescribe
							})
						}).exec()
						console.log(this.form)
					}
					this.form.goods_id = e.id
				}else{
					uni.setNavigationBarTitle({
						title: '添加商品'
					})
				}
			} catch (e) {
				//TODO handle the exception
			}
			this.serviceitemclass()
		},
		onShow() {},
		mounted() {
			this.$bus.$on('editors', this.demo)
		},
		methods: {
			clicksheetshow() {
				if (this.listsheet.length == 0) {
					uni.showToast({
						title: '请先去添加分类',
						icon: 'none'
					});
				} else {
					this.sheetshow = true
				}
			
			},
			increasespec() {
				this.form.spec.push({
					title: '',
					price: '',
					y_price:'',
					img: '',
					stock: ''
				})
			},
			deletespec(index) {
				if (this.form.spec.length != 1) {
					this.form.spec.splice(index, 1)
				} else {
					uni.showToast({
						title: '最少需要一个规格',
						icon: 'none'
					});
				}
			},
			demo(data) {
				this.form.details = data
			},
			demos() {
				uni.pro.navigateTo('project/editor/editor', {
					id: this.form.goods_id
				})
			},
			selectClick(index) {
				this.sheetshow = false
				this.form.name = index.name
				this.form.goods_type_id = index.id
				console.log(index)
			},
			changeswitch(e) {
				this.form.status = e
			},
			changeswitchs(e) {
				this.form.is_re = e
			},
			async serviceitemclass(e) { //项目分类
				let data = await this.api.shoppinggooodstype({
					page:1
				});
				this.listsheet = data.data
			},
			async servicecreateitem() {
				if (this.form.title == null || this.form.title == '') {
					uni.showToast({
						title: '请填写商品名称',
						icon: 'none'
					});
					return false;
				}
				if (this.form.intro == null || this.form.intro == '') {
					uni.showToast({
						title: '请输入商品描述',
						icon: 'none'
					});
					return false;
				}
				if (this.form.details == null || this.form.details == '') {
					uni.showToast({
						title: '商品详情不能为空',
						icon: 'none'
					});
					return false;
				}

				if (this.form.goods_type_id == null || this.form.goods_type_id == '') {
					uni.showToast({
						title: '请选择商品分类',
						icon: 'none'
					});
					return false;
				}
				if (this.form.host_img == null || this.form.host_img == '') {
					uni.showToast({
						title: '主图不能为空',
						icon: 'none'
					});
					return false;
				}
				let res = await this.api.shoppingcreategoods({
					title: this.form.title,
					intro: this.form.intro,
					host_img: this.form.host_img,
					goods_type_id: this.form.goods_type_id,
					spec: this.form.spec,
					status: this.form.status,
					details: this.form.details,
					goods_id: this.form.goods_id,
					type: this.form.type
				});
				if (res.code == 1) {
					uni.showToast({
						title: this.form.goods_id ? '修改成功' : '创建成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				}
			},
			async servicedelservice() {
				var this_ = this
				console.log(this.form.goods_id)
				uni.showModal({
					title: '提示',
					content: '确认删除该商品吗？',
					success: async (res) => {
						if (res.confirm) {
							let data = await this.api.shoppingdeletegoods({
								goods_id: this_.form.goods_id
							});
							if (data.code == 1) {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 1000);
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 上传
			chooseImagelist() {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						let file = res.tempFilePaths[0];
						uploadImage(file, 'mailproject/',
							result => {
								this.form.host_img = ''
								this.form.host_img = result
								uni.hideLoading()
							}, result => {
								console.log(result, '2222')
								uni.hideLoading()
							})
					},
					fail: (res) => {
						uni.hideLoading()
					}
				});
			},
			// 上传
			chooseImagelistssss(index) {
				var thisindex = index
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						let file = res.tempFilePaths[0];
						uploadImage(file, 'mailproject/',
							result => {
								this.form.spec[thisindex].img = ''
								this.form.spec[thisindex].img = result
								uni.hideLoading()
							}, result => {
								console.log(result, '2222')
								uni.hideLoading()
							})
					},
					fail: (res) => {
						uni.hideLoading()
					}
				});
			},

			getText(e) {
				this.context = e.detail.html
				this.form.details = this.context
				console.log(e.detail.html, this.context); //输出相应内容的html代码
			},
			readOnlyChange() {
				this.readOnly = !this.readOnly
			},
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif

				// #ifdef APP-PLUS || MP-WEIXIN || H5
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
				// #endif
			},

			undo() {
				this.editorCtx.undo()
			},
			redo() {
				this.editorCtx.redo()
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorCtx.format(name, value)
			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
						console.log('insert divider success')
					}
				})
			},
			clear() {
				uni.showModal({
					title: '清空编辑器',
					content: '确定清空编辑器全部内容？',
					success: res => {
						if (res.confirm) {
							this.editorCtx.clear({
								success: function(res) {
									console.log("clear success")
								}
							})
						}
					}
				})
			},
			removeFormat() {
				this.editorCtx.removeFormat()
			},
			insertDate() {
				const date = new Date()
				const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
				this.editorCtx.insertText({
					text: formatDate
				})
			},
			insertImage() {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						let file = res.tempFilePaths[0];
						uploadImage(file, 'wechat/',
							result => {
								this.editorCtx.insertImage({
									src: result,
									alt: '图像',
								})
								uni.hideLoading()
							}, result => {
								console.log(result)
								uni.hideLoading()
							})
					},
					fail: (res) => {
						uni.hideLoading()
					}
				});
			}


		}
	}
</script>

<style lang="scss">
	@import "./editor-icon.css";

	page {
		background: #F6F6F6;
	}

	.index {
		.title_text {
			padding: 12rpx 40rpx;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #666666;

			.onecontentesbox {
				font-size: 28rpx;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 400;
				color: #666666;

				.onecontentesboxone {
					padding: 10rpx 16rpx;
					font-size: 28rpx;
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 400;
					background: #2979ff;
					border-radius: 20rpx;
					color: #fff;
				}

				.onecontentesboxonetow {
					margin-left: 10rpx;
					border-radius: 20rpx;
					padding: 10rpx 16rpx;
					font-size: 28rpx;
					color: #fff;
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 400;
					background: #fc5f69;
				}
			}
		}

		#editor {
			width: 100%;
			height: 456rpx;
			padding: 12rpx 40rpx;
			background: #FFFFFF;
		}

		.baocun {
			margin: 40rpx auto;
			width: 90%;
			padding: 18rpx 0;
			background: #6699FF;
			text-align: center;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
		}

		.onecontent {
			background: #ffffff;

			.wrapper {
				height: 100%;

				.editor-wrapper {
					background: #fff;
				}

				.iconfont {
					display: inline-block;
					padding: 8px 8px;
					width: 24px;
					height: 24px;
					cursor: pointer;
					font-size: 20px;
				}

				.toolbar {
					box-sizing: border-box;
					border-bottom: 0;
				}

				.ql-container {
					box-sizing: border-box;
					padding: 12px 15px;
					width: 100%;
					min-height: 30vh;
					height: 100%;
					font-size: 16px;
					line-height: 1.5;
				}

				.ql-active {
					color: #06c;
				}
			}

			.onecontent_item {
				width: 100%;
				padding: 16rpx 46rpx;
				border-bottom: 2rpx solid #E5E5E5;

				.onecontent_itemleft {
					flex: 1;
					font-size: 28rpx;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: #666666;
				}

				.onecontent_itemright {
					flex: 3;

					.onecontent_itemrighttext {
						font-size: 24rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #999999;
					}

					.onecontent_itemrightimges {
						width: 112rpx;
						height: 112rpx;
						background: #F5F5F5;
						border-radius: 10rpx;
						font-size: 40rpx;
						color: #878787;

						image {
							width: 112rpx;
							height: 112rpx;
						}
					}

					.onecontent_itemright_text {
						width: 100%;
						font-size: 24rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #999999;
					}
				}

				.flex-start {
					.fourcontent {
						.fourcontent_item {
							position: relative;
							margin-top: 16rpx;
							margin-left: 20rpx;
							width: 112rpx;
							height: 112rpx;
							border-radius: 16rpx;

							image {
								width: 112rpx;
								height: 112rpx;
								border-radius: 16rpx;
							}

							.fourcontent_itemtext {
								position: absolute;
								top: 0rpx;
								right: 0rpx;
							}
						}
					}
				}

			}
		}

	}
</style>