<template>
	<view class="page">
		
		<navbar title="1531字"
		leftClick @leftClick="$utils.navigateBack"/>
		
		<view class="title">
			<input type="text" 
			placeholder="请输入章节标题"
			v-model="form.title"/>
		</view>
		
		<editor id="editor" 
		class="ql-container" 
		placeholder="请输入正文..." 
		@statuschange="onStatusChange" 
		@input="onInput"
		@ready="onEditorReady">
		</editor>
		
		<view class="plus">
			发布
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formats: {},
				form : {
					title : '',
				},
			}
		},
		onLoad() {
		},
		methods: {
			onInput(e){
				console.log(e.detail);
			},
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			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.chooseImage({
					count: 1,
					success: (res) => {
						this.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							alt: '图像',
							success: function() {
								console.log('insert image success')
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.page{
	font-size: 32rpx;
	.title{
		padding: 30rpx;
		background-color: #fff;
		margin: 10rpx 0;
		input{
			
		}
	}
	.ql-container{
		background-color: #fff;
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
		min-height: calc(100vh - 300rpx);
		line-height: 50rpx;
	}
	.plus{
		background-color: $uni-color;
		color: #fff;
		position: fixed;
		right: 20rpx;
		top: 40%;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 25rpx;
	}
}
</style>
