<template>
	<view class="content">
		<view class="container">
			<view class="bai-box">
				<view style="margin-bottom: 10px;">课程图片</view>
				<view class="">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
				</view>

			</view>
			<view class="bai-box">
				<view class="k-bs">
					<view class="">课程名称</view>
					<view class="right_box">
						<input type="text" placeholder="请输入" />
					</view>

				</view>
				<view class="k-bs">
					<view class="">课程标签</view>
					<view class="right_box">
						<input type="text" placeholder="请输入" />
					</view>

				</view>
				<view class="k-bs">
					<view class="">课程价格</view>
					<view class="right_box">
						<input type="text" placeholder="请输入" />
					</view>

				</view>
				<view class="k-bs">
					<view class="">报名订金 </view>
					<view class="right_box">
						<input type="text" placeholder="请输入" />
					</view>

				</view>
			</view>
			<view class="bai-box">
				<view class="k-bs" @click="show=true">
					<view class="">选择教练</view>
					<view class="right_box">
						<view class="">当前绑定3位教练</view>
						<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
					</view>

				</view>
				<view class="k-bs">
					<view class="">训练车型</view>
					<view class="right_box">
						<view class="">请选择</view>
						<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
					</view>

				</view>


			</view>
			<view class="bai-box">
				<view class="">课程详情</view>

				<view class="editor-box">
					<sp-editor :toolbar-config="{
				          excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
				          iconSize: '18px'
				        }" @init="initEditor" @input="inputOver" @upinImage="upinImage" @overMax="overMax" @addLink="addLink"
						@exportHtml="exportHtml"></sp-editor>
				</view>
			</view>



			<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>

			<view style="width: 100%; height: 70px;"></view>
			<view class="bottom-box">
				<view class="anniu">添加/保存课程</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				columns: [
					['中国', '美国', '日本']
				],
				fileList1: [],
				editorIns: null
			}
		},
		onShow() {

		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},

		methods: {
			confirm() {
				this.show = false
			},
			cancel() {
				this.show = false
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			inputOver(e) {
				// 可以在此处获取到编辑器已编辑的内容
				console.log('==== inputOver :', e)
			},
			/**
			 * 超出最大内容限制
			 * @param {Object} e {html,text} 内容的html文本，和text文本
			 */
			overMax(e) {
				// 若设置了最大字数限制，可在此处触发超出限制的回调
				console.log('==== overMax :', e)
			},
			/**
			 * 编辑器就绪
			 * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
			 * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
			 * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
			 */
			initEditor(editor) {
				this.editorIns = editor // 保存编辑器实例
				// 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
				this.preRender()
			},
			preRender() {
				setTimeout(() => {
					// 异步获取后端数据后，初始化编辑器内容
					this.editorIns.setContents({
						html: `<div>    猫猫<img src="https://img.yzcdn.cn/vant/cat.jpeg"/>
			                <img src="https://img.yzcdn.cn/vant/cat.jpeg"/>
			                <img src="https://img.yzcdn.cn/vant/cat.jpeg"/>yaho giao</div>`
					})
				}, 1000)
			},
			/**
			 * 直接运行示例工程插入图片无法正常显示的看这里
			 * 因为插件默认采用云端存储图片的方式
			 * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
			 * @param {Object} tempFiles
			 * @param {Object} editorCtx
			 */
			upinImage(tempFiles, editorCtx) {
				/**
				 * 本地临时插入图片预览
				 * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
				 * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
				 * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
				 */
				// #ifdef MP-WEIXIN
				// 注意微信小程序的图片路径是在tempFilePath字段中
				editorCtx.insertImage({
					src: tempFiles[0].tempFilePath,
					width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
					success: function() {}
				})
				// #endif

				// #ifndef MP-WEIXIN
				editorCtx.insertImage({
					src: tempFiles[0].path,
					width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
					success: function() {}
				})
				// #endif

				/**
				 * 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
				 * 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法
				 */
				// tempFiles.forEach(async (item) => {
				//   uni.showLoading({
				//     title: '上传中请稍后',
				//     mask: true
				//   })
				//   let upfile = await uniCloud.uploadFile({
				//     filePath: item.path,
				//     // 同名会导致报错 policy_does_not_allow_file_overwrite
				//     // cloudPath可由 想要存储的文件夹/文件名 拼接，若不拼文件夹名则默认存储在cloudstorage文件夹中
				//     cloudPath: `cloudstorage/${item.name}`,
				//     cloudPathAsRealPath: true
				//   })
				//   editorCtx.insertImage({
				//     src: upfile.fileID,
				//     width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
				//     success: function () {
				//       uni.hideLoading()
				//     }
				//   })
				// })
			},
			/**
			 * 导出 - toolbar需要开启export工具
			 * @param {string} e 导出的html内容
			 */
			exportHtml(e) {
				uni.navigateTo({
					url: '/pages/out/out',
					success(res) {
						// 传至导出页面解析即可
						res.eventChannel.emit('e-transmit-html', {
							data: e
						})
					}
				})
			},
			/**
			 * 添加超链接
			 * @param {Object} e { text: '链接描述', href: '链接地址' }
			 */
			addLink(e) {
				console.log('==== addLink :', e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		background: #f4f5f6;
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 8px;
	}

	.bai-box {
		width: 95%;
		box-sizing: border-box;
		padding: 15px;
		background-color: #fff;
		margin: 10px auto;
		border-radius: 8px;
	}

	.bottom-box {
		width: 100%;
		box-sizing: border-box;
		padding: 5px;
		background: #fff;
		position: fixed;
		bottom: 0px;
		left: 0px;
		height: 70px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.anniu {
		width: 311px;
		height: 40px;
		background: #4AA76F;
		border-radius: 20px 20px 20px 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.k-bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 10px 0px;
		border-bottom: 1px solid #dadada;
	}

	.right_box {
		text-align: right;
		display: flex;
		align-items: center;

	}
</style>