<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-input v-model="searchInfo.name" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="margin-left: 10px;" @click="GetList()">搜索</el-button>
				</el-form-item>
			</el-row>
			<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
				<el-table-column prop="hospital_name" label="医院" />
				<el-table-column prop="name" label="套餐名称" />
				<el-table-column prop="combo_type_name" label="套餐类型" />
				<el-table-column prop="combo_crowd_name" label="适用人群" />
				<el-table-column prop="price" label="价格" />
				<el-table-column prop="sex" label="性别">
					<template #default="scope">
						<el-tag v-if="scope.row.sex==0" class="ml-2">全部</el-tag>
						<el-tag v-if="scope.row.sex==1" class="ml-2" type="danger">男</el-tag>
						<el-tag v-if="scope.row.sex==2" class="ml-2" type="success">女</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="updated_at" label="更新时间" />
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button type="primary" @click="EditFunc(scope.row)" :icon="Edit" circle />
					</template>
				</el-table-column>
			</el-table>

			<div class="page">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
					:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
					@size-change="PageSizeChange" @current-change="PageCurrentChange" />
			</div>
			<el-dialog v-model="dialogVisible" title="套餐信息" width="60%">
				<el-form :model="Info" label-width="100px" v-loading="loading">
					<el-form-item label="名称">
						{{Info.name}}
					</el-form-item>
					<el-form-item label="Logo">
						<el-upload class="avatar-uploader" :action="upfileurl" :headers="headerObj"
							:show-file-list="false" :on-success="upLoadSuccess">
							<img v-if="logo" :src="logo" class="avatar" style="width: 60px;" />
							<el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
					</el-form-item>
					<el-form-item label="体检类型">
						<el-checkbox-group v-model="Info.checkup_type_id">
							<el-select :filterable="true" clearable v-model="Info.checkup_type_id" placeholder="选择体检类型">
								<el-option v-for="(item,index) in CheckUpTypeEnableList" :key="index" :label="item.name"
									:value="item.id" />
							</el-select>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="套餐类型">
						<el-select :filterable="true" clearable v-model="Info.type_id" placeholder="选择套餐类型">
							<el-option v-for="(item,index) in ComboTypeList" :key="index" :label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="适应人群">
						<el-select :filterable="true" clearable v-model="Info.crowd_id" placeholder="选择适应人群">
							<el-option v-for="(item,index) in ComboCrowdList" :key="index" :label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="标签">
						<el-input v-model="Info.tags" type="textarea" />
					</el-form-item>
					<el-form-item label="标签2">
						<el-input v-model="Info.tags2" type="textarea" />
					</el-form-item>
					<el-form-item label="简介">
						<el-input v-model="Info.intro" type="textarea" />
					</el-form-item>
					<el-form-item label="服务承诺">
						<el-input v-model="Info.sub_intro" type="textarea" />
					</el-form-item>
					<el-form-item label="详情">
						<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="valueHtml"
								:defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
						</div>
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="Save">
							确定
						</el-button>
					</span>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
	import '@wangeditor/editor/dist/css/style.css' // 引入 css
	import {
		onBeforeUnmount,
		ref,
		shallowRef,
		onMounted
	} from 'vue'
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		UpFileUrl,
		ComboGetList,
		ComboGetDetail,
		ComboSave,
		ComboTypeGetList,
		ComboCrowdGetList,
		CheckUpTypeGetEnableList
	} from '@/api/api.js'
	import {
		Edit
	} from '@element-plus/icons-vue'
	let loading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	let dialogVisible = ref(false)
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	let upfileurl = UpFileUrl()
	let headerObj = {
		Authorization: 'Bearer ' + sessionStorage.getItem("token")
	}
	let logo = ref('');
	//上传成功钩子
	let BaseUrl = ref(import.meta.env.VITE_APP_FILE)
	const upLoadSuccess = (res) => {
		logo.value = BaseUrl.value + res.data
		Info.value.cover = res.data
	}
	let searchInfo = ref({});
	let Info = ref({});
	const GetList = () => {
		loading.value = true
		ComboGetList({
			page: currentPage.value,
			pageSize: pageSize.value,
			searchInfo: searchInfo.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data.list
				total = res.data.count
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const Save = () => {
		Info.value.desc = editorRef.value.getHtml()
		if (!Array.isArray(Info.value.tags)) {
			Info.value.tags = toArray(Info.value.tags)
		}
		if (!Array.isArray(Info.value.tags2)) {
			Info.value.tags2 = toArray(Info.value.tags2)
		}

		loading.value = true
		ComboSave({
			Info: Info.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				dialogVisible.value = false
				GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const EditFunc = (row) => {
		dialogVisible.value = true
		loading.value = true
		GetComboType()
		GetComboCrowd()
		ComboGetDetail({
			id: row.id
		}).then(res => {
			loading.value = false
			if (res.status) {
				Info.value = res.data
				logo.value = BaseUrl.value + res.data.cover
				editorRef.value.setHtml(Info.value.desc)
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const toArray = (str) => { //字符串转数组
		console.log(str);
		if (!str) return
		str = str.replace(/，/g, ',')
		if (str.endsWith(',')) {
			// 如果以逗号结尾，则使用slice方法去掉最后一个字符
			str = str.slice(0, -1);
		}
		return str.split(",")
	}

	//富文本编辑器
	// 编辑器实例，必须用 shallowRef
	const editorRef = shallowRef()

	// 内容 HTML
	const valueHtml = ref(null)
	const toolbarConfig = {}
	const editorConfig = {
		placeholder: '请输入内容...',
		MENU_CONF: {},
	}
	let mode = 'default' // 'simple\default'


	// 修改 uploadImage 菜单配置
	editorConfig.MENU_CONF['uploadImage'] = {
		server: upfileurl,
		fieldName: 'WangEditorImageFile',
		headers: headerObj,
		// 继续写其他配置...

		//【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
	}

	// 组件销毁时，也及时销毁编辑器
	onBeforeUnmount(() => {
		const editor = editorRef.value
		if (editor == null) return
		editor.destroy()
	})

	const handleCreated = (editor) => {
		editorRef.value = editor // 记录 editor 实例，重要！
	}
	//获取全部套餐类型
	let ComboTypeList = ref([]);
	const GetComboType = () => {
		loading.value = true
		ComboTypeGetList({}).then(res => {
			loading.value = false
			if (res.status) {
				ComboTypeList.value = res.data.list
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	//获取全部套餐适应人群
	let ComboCrowdList = ref([]);
	const GetComboCrowd = () => {
		loading.value = true
		ComboCrowdGetList({}).then(res => {
			loading.value = false
			if (res.status) {
				ComboCrowdList.value = res.data.list
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	//可用体检类型列表
	let CheckUpTypeEnableList = ref([]);
	const GetCheckUpTypeEnableList_Func = () => {
		loading.value = true
		CheckUpTypeGetEnableList().then(res => {
			loading.value = false
			if (res.status) {
				CheckUpTypeEnableList.value = res.data.list
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	onMounted(() => {
		GetList()
		GetCheckUpTypeEnableList_Func()
	})
</script>

<style>
</style>