<template>
	<view class="editor">
		<view class="cons">
			<view v-if="read">
				<u-parse :content="value"></u-parse>
			</view>
			<view v-else>
				<view class="toolbar" @tap="format">
					<view :class="formats.bold ? 'ql-active' : ''" class="icon" data-name="bold" title="加粗">&#xec84;</view>
					<view :class="formats.align === 'left' ? 'ql-active' : ''" class="icon" data-name="align" data-value="left" title="左对齐">&#xec86;</view>
					<view :class="formats.align === 'center' ? 'ql-active' : ''" class="icon" data-name="align" data-value="center" title="居中对齐">&#xec80;</view>
					<view :class="formats.align === 'right' ? 'ql-active' : ''" class="icon" data-name="align" data-value="right" title="右对齐">&#xec82;</view>
					<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="icon" data-name="align" data-value="justify" title="两端对齐">&#xec87;</view>
					<view :class="formats.lineHeight ? 'ql-active' : ''" class="icon" data-name="lineHeight" data-value="2" title="行距">&#xe7f8;</view>
					<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="icon" data-name="list" data-value="ordered" title="编号">&#xe7f5;</view>
					<!-- <view class="icon" title="分割线" @tap="insertDivider">&#xe620;</view> -->
					<!-- <view class="icon" @tap="insertDate">&#xe8b8;</view> -->
					<view class="icon" @tap="insertImage" title="插入图片">&#xe64a;</view>
					<view class="icon" @tap="clear" title="清空内容">&#xe8b6;</view>
				</view>
				<editor id="editor" class="ql-container" :placeholder="placeholder" showImgSize showImgToolbar showImgResize @input="editorChange" @statuschange="onStatusChange" :read-only="false" @ready="onEditorReady"></editor>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'leditor',
	props: {
		value: {
			default: ''
		},
		read: {
			type: Boolean,
			default: false
		},
		placeholder: {
			type: String,
			default: '输入内容'
		}
	},
	data() {
		return {
			ip: this.http.ip,
			ready: false,
			formats: {}
		};
	},
	methods: {
		//初始化
		onEditorReady() {
			uni.createSelectorQuery()
				.in(this)
				.select('#editor')
				.context((res) => {
					this.editorCtx = res.context;
				})
				.exec();
		},
		//设置编辑器内容
		setContents() {
			if (!this.read) {
				setTimeout(() => {
					this.editorCtx.setContents({
						html: this.value
					});
				}, 3000);
			}
		},
		//修改样式
		format(e) {
			let { name, value } = e.target.dataset;
			if (!name) return;
			this.editorCtx.format(name, value);
		},
		//插入分割线
		insertDivider() {
			this.editorCtx.insertDivider();
		},
		//插入日期
		insertDate() {
			const date = new Date();
			const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
			this.editorCtx.insertText({
				text: formatDate
			});
		},
		//改变编辑器内样式
		onStatusChange(e) {
			const formats = e.detail;
			this.formats = formats;
		},
		//清除全部内容
		clear() {
			this.editorCtx.clear();
		},
		//内容改变时
		editorChange: function (e) {
			this.$emit('input', e.detail.html);
		},
		//插入图片
		insertImage() {
			uni.chooseImage({
				count: 9, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (chooseImageRes) => {
					chooseImageRes.tempFilePaths.forEach((item) => {
						uni.showLoading({ title: '正在上传图片...', mask: true });
						uni.uploadFile({
							url: this.ip + '/common/upload',
							filePath: item,
							name: 'file',
							header: { Authorization: this.getUser().token },
							success: (res) => {
								uni.hideLoading();
								let result = JSON.parse(res.data);
								if (result.code === 200) {
									this.editorCtx.insertImage({
										src: this.ip + result.fileName,
										alt: '图像'
									});
								} else {
									uni.showModal({ content: result.msg, showCancel: false });
								}
							}
						});
					});
				}
			});
		}
	}
};
</script>
<style lang="scss">
.editor {
	padding: 0px 0px 0px 0px;
	.cons {
		width: 100%;
		.toolbar {
			border-bottom: 0px;
			background-color: whitesmoke;
			border-radius: 0px 0px 0px 0px;
			.icon {
				display: inline-block;
				cursor: pointer;
				font-size: 20px;
				padding: 6px 6px;
				width: 23px;
				height: 23px;
			}
			.ql-active {
				color: #06c;
			}
		}
		.ql-container {
			padding: 10px;
			height: 320px;
			font-size: 15px;
			background-color: white;
			border-bottom: 1px solid #eeeeee;
			image {
				width: 100%;
			}
		}
	}
}
</style>