<template>
	<a-card :bordered="false">
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-form-item label="标题：" name="helpTitle">
				<a-input v-model:value="formData.helpTitle" placeholder="请输入标题" allow-clear />
			</a-form-item>
			<a-form-item label="内容：" name="helpContext">
				<div id="editor"></div>
			</a-form-item>
		</a-form>
		<div style="height:60px;width:100%;line-height:60px;">
			<div style="margin-right:20px;text-align: right">
				<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
				<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
			</div>
		</div>


	</a-card>
<!--	<Form ref="formRef" @successful="tableRef.refresh()" />-->
</template>

<script setup name="helpcenter">
	import { cloneDeep } from 'lodash-es'
	import Form from './form.vue'
	import helpCenterApi from '@/api/biz/helpCenterApi'
	import E from "wangeditor"
	import { required } from '@/utils/formRules'

	const tableRef = ref()
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const editor = ref(null)
	const submitLoading = ref(false)

	nextTick(() => {
		editor.value = new E('#editor')
		// 设置图片上传接口地址 ru
		editor.value.config.uploadImgServer = 'http://218.2.6.74:8065/minio/batchUploadFile'
		editor.value.config.customUploadImg = function (files, insertImgFn) {
			const formData = new FormData()
			formData.append('imageFile', files[0])
			formData.append('groupName','bbt')
			//其他参数根据需要自行添加 formData形式与JSON形式自行使用
			editor.value.config.uploadImgParams.file = files[0]
			const xhr = new XMLHttpRequest()
			xhr.open('POST', editor.value.config.uploadImgServer, false)
			xhr.onload = function (e) {
				if (xhr.status === 200) {
					const response = JSON.parse(xhr.responseText)
					insertImgFn('https://wx.js-whzl.com:8055/preview/'+response.imageFile) // 插入图片
				}
			}
			xhr.send(formData)
		}
		editor.value.create()
		helpCenterApi.helpCenter().then((res)=>{
			console.log("res:"+JSON.stringify(res))
			if(res){
				formData.value = res
				editor.value.txt.html(formData.value.helpContext)
			}
		})
	})

	const columns = [
		{
			title: '标题',
			dataIndex: 'helpTitle'
		},
		{
			title: '内容',
			dataIndex: 'helpContext'
		},
	]

	// 默认要校验的
	const formRules = {
		helpTitle: [required('请输入标题')],
		helpContext: [required('请输入内容')],
	}
	// 操作栏通过权限判断是否显示
	if (hasPerm(['helpCenterEdit', 'helpCenterDelete'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 150
		})
	}
	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const loadData = (parameter) => {
		return helpCenterApi.helpCenterPage(parameter).then((data) => {
			return data
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
	// 删除
	const deleteHelpCenter = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		helpCenterApi.helpCenterDelete(params).then(() => {
			tableRef.value.refresh(true)
		})
	}
	// 批量删除
	const deleteBatchHelpCenter = (params) => {
		helpCenterApi.helpCenterDelete(params).then(() => {
			tableRef.value.clearRefreshSelected()
		})
	}

	//保存
	const onSubmit = () => {
		/*formRef.value
			.validate()
			.then(() => {

			})
			.catch(() => {})*/
		submitLoading.value = true
		formData.value.helpContext = editor.value.txt.html()
		debugger
		const formDataParam = cloneDeep(formData.value)
		helpCenterApi
			.helpCenterSubmitForm(formDataParam, formDataParam.id)
			.then(() => {
				onClose()
				emit('successful')
			})
			.finally(() => {
				submitLoading.value = false
			})
	}
</script>
