<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-button type="primary" style="margin-left: 10px;" @click="Add()">新建医院</el-button>
				</el-form-item>
			</el-row>
			<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
				<el-table-column prop="name" label="医院名称">
					<template #default="scope">
						<div style="display: flex;align-items: center;">
							<div style="width: 40px;height: 40px;"><img  :src="BaseUrl+scope.row.logo" class="avatar"  style="width: 40px;height: 40px;"/></div>
							<div style="margin-left: 8px;">{{scope.row.name}}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="code" label="Code" />
				<el-table-column prop="tel" label="电话" />
				<el-table-column prop="status" label="状态">
					<template #default="scope">
						<el-tag v-if="scope.row.status==1" class="ml-2" type="success">正常</el-tag>
						<el-tag v-if="scope.row.status==0" class="ml-2" type="danger">关闭</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="next_time" label="下次更新时间" />
				<el-table-column prop="created_at" label="创建时间" />
				<el-table-column label="操作" >
					<template #default="scope">
						<el-button type="primary" @click="Add(scope.row)" :icon="Edit" circle />
						<el-button   size="small" @click="CacheConfig(scope.row)" >缓存配置</el-button>
					</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="30%">
				<el-form :model="Info" label-width="100px" v-loading="loading">
					<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-input v-model="Info.name" />
					</el-form-item>
					<el-form-item label="医院code">
						<el-input v-model="Info.code" />
					</el-form-item>
					<el-form-item label="地址">
						<el-input v-model="Info.address" />
					</el-form-item>
					<el-form-item label="经度">
						<el-input v-model="Info.longitude" />
					</el-form-item>
					<el-form-item label="纬度">
						<el-input v-model="Info.latitude" />
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="Info.tel" />
					</el-form-item>
					<el-form-item label="状态">
						<el-switch v-model="Info.status" size="large" active-text="正常" inactive-text="关闭"
							:active-value="1" :inactive-value="0" />
					</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>
			<el-dialog v-model="CacheDialogVisible" title="缓存配置" width="50%">
				<el-form :model="Info" label-width="100px" v-loading="loading">
					<el-form-item label="频率(分钟)">
						<el-input v-model="Info.frequency" />
					</el-form-item>
					<el-form-item label="接口列表">
						<el-input v-model="Info.api_list" type="textarea" />
					</el-form-item>
					<el-form-item label="下次更新时间">
						{{Info.next_time}}
					</el-form-item>
					<el-form-item>
						<el-button @click="updateCache()">立即更新缓存</el-button>
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="CacheDialogVisible = false">取消</el-button>
						<el-button type="primary" @click="SaveCache()">
							确定
						</el-button>
					</span>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		UpFileUrl,
		HospitalSave,
		HospitalGetList,
		GetBaseInfoDetail,
		UpdateCombo,SaveCacheInfo
	} from '@/api/api.js'
	import {
		Edit
	} from '@element-plus/icons-vue'
	let loading = ref(false)
	let saveType = ref('save')
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	let dialogVisible = ref(false)
	let CacheDialogVisible=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.logo = res.data
	}

	let Info = ref({
		status: 1,
		appid: '',
		hospital: '',
		domain: '',
	})
	const GetDetail=(row)=>{
		loading.value = true
		GetBaseInfoDetail({
			id: row.id
		}).then(res => {
			loading.value = false
			if (res.status) {
				Info.value=res.data
				logo.value =BaseUrl.value  + res.data.logo
			 
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const Add = (row = null) => {
		dialogVisible.value = true
		Info.value = {
			status: 1,
		}
		if (row) {
			GetDetail(row)
		}

	}
	const GetList = () => {
		loading.value = true
		HospitalGetList({
			page: currentPage.value,
			pageSize: pageSize.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 = () => {

		HospitalSave({
			Info: Info.value,
		}).then(res => {
			if (res.status) {
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
				dialogVisible.value = false
				GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const toArray = (str) => { //字符串转数组
		if (!str) return
		str = str.replace(/，/g, ',')
		if (str.endsWith(',')) {
			// 如果以逗号结尾，则使用slice方法去掉最后一个字符
			str = str.slice(0, -1);
		}
		return str.split(",")
	}
	const CacheConfig=(row)=>{
		CacheDialogVisible.value=true,
		GetDetail(row)
	}
	//更新缓存
	const updateCache=()=>{
		loading.value=true
		UpdateCombo({hospital:Info.value.id}).then(res=>{
			loading.value=false
			if(res.status){
				ElMessage({
					message: "套餐包含"+res.data.combos_count+"条项目，成功更新"+res.data.success_count+"条",
					type: 'success',
				})
				CacheDialogVisible.value=false
				GetList()
			}else{
				ElMessage.error(res.msg)
			}
		})
	}
	//保存缓存设置
	const SaveCache=()=>{
		Info.value.api_list = toArray(Info.value.api_list)
		loading.value=true
		SaveCacheInfo({Info: Info.value}).then(res=>{
			loading.value=false
			if(res.status){
				ElMessage({
					message: "保存成功",
					type: 'success',
				})
				CacheDialogVisible.value=false
			}else{
				ElMessage.error(res.msg)
			}
		})
	}
	
	onMounted(() => {
		GetList()
	})
</script>

<style scoped>
	.page {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}
</style>