<template>
	<div>
		<!-- 		<div  >
			<quill-editor theme="snow"></quill-editor>
		</div> -->
		<el-card :body-style="cardBodyStyle">
			<el-form :inline="true">
				<el-form-item style="margin-bottom: 0px;">
					<el-input v-model="query.title" placeholder="请输入查询条件" clearable></el-input>
				</el-form-item>
				<el-button type="primary" @click="search">查询</el-button>
				<el-button type="primary" plain @click="handleAdd">新增</el-button>
			</el-form>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border highlight-current-row>
				<el-table-column type="index" label="序号" align="center" width="60">
					<template #default="scope">
						<span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
					</template>
				</el-table-column>
				<!--      <el-table-column v-for="item in cols" :key="item.id" :prop="item.prop" :label="item.label" :width="item.width"
		  show-overflow-tooltip :header-align="item.headerAlign" :align="item.align" :sortable="item.sortable=='true'"
		  class-name="canDrag" :formatter="formatter">
		</el-table-column> -->
				<el-table-column prop="title" label="标题" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="subTitle" label="副标题" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="type" label="类型" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="author" label="作者" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="memo" label="备注" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="content" label="内容" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="addTime" label="添加日期" width="200" show-overflow-tooltip header-align="center"
					align="center">
				</el-table-column>
				<el-table-column label="操作" header-align="center" align="center" width="200px">
					<template #default="scope">
						<el-button plain @click="handleEdit(scope.row)">编辑</el-button>
						<el-button plain type="danger" @click="handleDelete(scope.row )">删除</el-button>
					</template>
				</el-table-column>
			</el-table> </el-card>
		<el-card :body-style="cardBodyStyle">

			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes"
				:total="totalRows" background="background" layout="total, sizes, prev, pager, next, jumper"
				@size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</el-card>

		<el-dialog :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisible" width="1200px" top="5vh">
			<el-form :model="form" label-width="80px" label-position="right" inline>
				<el-form-item label="主键" v-if="false">
					<el-input v-model="form.id"></el-input>
				</el-form-item><el-row><el-col :span="12">
						<el-form-item label="标题">
							<el-input v-model="form.title" style="width: 400px"></el-input>
						</el-form-item>
						<el-form-item label="类型">
							<el-select v-model="form.type" placeholder="请选择" style="width: 240px">
								<el-option label="工作" value="工作" />
								<el-option label="党政" value="党政" />
							</el-select>
						</el-form-item>
						<el-form-item label="备注">
							<el-input v-model="form.memo" :rows="2" type="textarea" style="width: 400px"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="副标题">
							<el-input v-model="form.subTitle" style="width: 400px"></el-input>
						</el-form-item>
						<el-form-item label="作者">
							<el-input v-model="form.author" style="width: 240px"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 富文本编辑 @wangeditor -->
				<div style="border: 1px solid #ccc">
					<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
						:mode="mode" />
					<Editor style="height: 500px; overflow-y: hidden;" v-model="form.html" :defaultConfig="editorConfig"
						:mode="mode" @onCreated="handleCreated" />
				</div>
				<!-- 富文本编辑 @wangeditor -->
			</el-form> 
			<template #footer>
				<div class="dialog-footer">
					<!-- 富文本编辑 @wangeditor -->
					<el-button type="primary" @click="handleThumb">缩略图</el-button>
					<!-- 富文本编辑 @wangeditor -->
					<el-button type="success" @click="handleSave">保存</el-button>
					<el-button type="danger" @click="handleCancelSave">取消</el-button>
				</div>
			</template>
		</el-dialog>

		<!-- 富文本编辑 @wangeditor -->
		<el-dialog :close-on-click-modal="false" draggable title="请选择缩略图" v-model="dialogVisibleThumb" width="1200px"
			top="5vh">
			<el-popconfirm v-for="item in images" :key="item.id" title="确定将设置为缩略图?" @confirm="comfirmThumb(item)">
				<template #reference>
					<el-image style="width: 100px; height: 100px;padding: 5px;" :src="item.src" fit="cover"
						:crossorigin="null" />
				</template>
			</el-popconfirm>
		</el-dialog>
		<!-- 富文本编辑 @wangeditor -->

	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onBeforeMount,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)
	const inputStyle = ref(style.input)

	onBeforeMount(() => {
		search()
	})


	/**
	 *   查询 
	 */
	const query = ref({
		title: ''
	})
	const tableData = ref([])
	const search = () => {
		currentPage.value = 1
		getTableData()
	}
	const getTableData = () => {
		var url = 'portal/Article/query'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
			params: JSON.stringify(query.value)
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
				// tableData.value = response.data.data.records
				// totalRows.value = response.data.data.total
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	/**
	 *   查询 
	 */

	/**
	 * 分页 
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([10, 20, 30, 40])
	const pageSize = ref(10)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页 
	 */



	/**
	 * 新增
	 */
	const dialogVisible = ref(false)
	const form = ref({
		id: '',
		title: '',
		subTitle: '',
		author: '',
		type: '',
		content: '',
		thumb: '',
		html: ''
	})
	const handleAdd = () => {

		var url = 'framework/Common/queryPrimaryKey'
		var param = {}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == 0) {
				form.value = {
					id: response.data.data,
					title: '',
					subTitle: '',
					author: '',
					type: '',
					content: '',
					thumb: '',
					html: ''
				}
				dialogVisible.value = true
			} else {
				// ElMessage.error('操作失败！' + response.data.msg)  
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		});

	}
	/**
	 * 新增 
	 */



	/**
	 * 保存、修改、删除
	 */

	const handleSave = () => {
		/**
		 * 富文本编辑 @wangeditor 
		 */
		const editor = editorRef.value
		if (editor == null) return
		const text = editor.getText()
		/**
		 * 富文本编辑 @wangeditor 
		 */

		form.value.content = text
		var url = 'portal/Article/save'
		var param = {
			json: JSON.stringify(form.value),
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == 0) {
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
				getTableData()
				dialogVisible.value = false
			} else {
				// ElMessage.error('操作失败！' + response.data.msg)  
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		});
	}
	const handleCancelSave = () => {
		dialogVisible.value = false
	}


	const handleEdit = (row) => {
		dialogVisible.value = true
		form.value = row
	}
	const handleDelete = (row) => {
		ElMessageBox.confirm(
				'确定删除本条记录?',
				'提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
					draggable: true,
				}
			)
			.then(() => {
				var url = 'portal/Article/remove'
				var param = {
					id: row.id
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
						getTableData()
					} else {
						ElMessage({
							type: 'error',
							message: '删除失败' + response.data.msg
						});
					}
				});
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '已取消',
				})
			})
	}

	/**
	 * 保存、修改、删除
	 */



	/**
	 * 富文本编辑 @wangeditor 
	 */
	import '@wangeditor/editor/dist/css/style.css'
	import {
		onBeforeUnmount,
		shallowRef
	} from 'vue'
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'

	const editorRef = shallowRef()
	const valueHtml = ref('<p>hello</p>')

	const toolbarConfig = {}
 
	const editorConfig = {
		placeholder: '请输入内容...',
		MENU_CONF: {},
	}
	editorConfig.MENU_CONF['uploadImage'] = {
		async customUpload(file, insertFn) {
			return new Promise((resolve, reject) => {
				const formData = new FormData()
				formData.append('fId', form.value.id)
				formData.append('file', file)
				proxy.$axios.post('framework/Common/uploadFile', formData).then(
					response => {
						if (response.data.code == '0') {
							var imageurl = import.meta.env.VITE_IMAGE_API + '/' +
								form.value.id + '/' + response.data.data[0].id +
								'.' + response.data.data[0].fileType
							console.log('imageUploader：：：' + imageurl)
							if (form.value.thumb == null || form.value.thumb == '') {
								console.log('设置缩略图')
								form.value.thumb = imageurl
							}
							insertFn(imageurl, response.data.data[0].fileName, imageurl)
							resolve(imageurl)
						} else {

						}
					}
				)
			})
		}
	}
	onBeforeUnmount(() => {
		const editor = editorRef.value
		if (editor == null) return
		editor.destroy()
	})


	const handleCreated = (editor) => {
		editorRef.value = editor
	}


	import {
		DomEditor
	} from '@wangeditor/editor'
	const dialogVisibleThumb = ref(false)
	const images = ref([])
	const handleThumb = () => {
		const editor = editorRef.value
		const toolbar = DomEditor.getToolbar(editor)
		images.value = editor.getElemsByType('image')
		console.log(images.value)
		dialogVisibleThumb.value = true
	}
	const comfirmThumb = (item) => {
		console.log(item.src)
		form.value.thumb = item.src
		dialogVisibleThumb.value = false
	}

	/**
	 * 富文本编辑 @wangeditor 
	 */
</script>

<style>
</style>