<template>
	<div>

		<quill-editor v-model="content" ref="myQuillEditor"
			@blur="onEditorBlur($event)"
			@focus="onEditorFocus($event)"
			@ready="onEditorReady($event)"
		    @change="onEditorChange($event)">
		</quill-editor>

		<div style="height:65px;border: 1px snow thick;">
			<div class="demo-upload-list" v-for="item in uploadList">
				<template v-if="item.status === 'finished'">
					<img :src="'http://'+item.response.data.picName">
					<div class="demo-upload-list-cover">
						<Icon type="ios-eye-outline" @click.native="handleView(item.response.data.picName)"></Icon>
						<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
					</div>
				</template>
				<template v-else>
					<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
				</template>
			</div>
		</div>
		<Upload :show-upload-list="false"
			style="display: none;"
			ref="up"
			name="upfile"
			:format="accept"
			:max-size="maxsize"
			 multiple type="drag"
			:on-success="handleSuccess"
			:action="imgUrl" >
				<input id="upload" />
		</Upload>
		<Modal title="查看图片" v-model="visible">
			<img :src="src" v-if="visible" style="width: 60%">
		</Modal>

	</div>
</template>

<style>
	.info {
		border-radius: 10px;
		line-height: 20px;
		padding: 10px;
		margin: 10px;
		background-color: #ffffff;
	}
</style>
<script>
	import { quillEditor } from 'vue-quill-editor'
	import $ from 'jquery'
	export default {
		components: {
			quillEditor
		},
		data() {
			return {
				visible: false,
				src: '',
				uploadList: [],
				content: '<h2>I am Example</h2>',
			}
		},
		props:{
			imgUrl:{
				type:String,
				default:'http://localhost:1111/upload/up'
			},
			accept:{
				type:Array
			},
			maxsize:{
				type:Number,
				default:20480
			}
		},
		computed: {
			editor() {
				return this.$refs.myQuillEditor.quill
			},
		},
		mounted() {
			this.uploadList = this.$refs.up.fileList;
			//给img video按键绑定事件
			this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgClick)
			this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.imgClick)
		},

		methods: {
			//点击图片触发事件
			imgClick() {
				$('#upload').click()
			},
			//查看图片
			handleView(name) {
				this.src = 'http://' + name;
				this.visible = true;

			},
			//删除图片
			handleRemove(file) {
				// 从 upload 实例删除数据
				const fileList = this.$refs.up.fileList;
				this.$refs.up.fileList.splice(fileList.indexOf(file), 1);
			},
			//成功回调
			handleSuccess(response, file, fileList) {
				console.log("返回图片")
				if(response.code == 500) {
					this.$Message.error('上传失败!')
				} else {
					this.$Message.success('上传成功!')
				}
				console.log(response)
				console.log(fileList)
				console.log(file)
			},

			//Quill
			onEditorBlur(editor) {
				console.log('editor blur!', editor)
			},
			onEditorFocus(editor) {
				console.log('editor focus!', editor)
			},
			onEditorReady(editor) {
				console.log('editor ready!', editor)
			},
			onEditorChange({editor,html,text}) {
				console.log('editor change!', editor)
				//this.content = html
				console.log("content ",this.content)
				console.log("text ",text)
				this.$emit('toapp',html)
			}
		}
	};
</script>
<style scoped>
.demo-upload-list {
		display: inline-block;
		width: 60px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		border: 1px solid transparent;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
		margin-right: 4px;
	}

	.demo-upload-list img {
		width: 100%;
		height: 100%;
	}

	.demo-upload-list:hover .demo-upload-list-cover {
		display: block;
	}

	.demo-upload-list-cover {
		color: #fff;
		font-size: 16px;
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, .6);
	}


</style>