<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">
				 
				<el-table-column prop="site_name" 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="created_at" label="创建时间" />
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button type="primary" @click="Add(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="50%">
				<el-form :model="SiteInfo" label-width="100px" v-loading="loading">

					<el-form-item label="站点名称">
						<el-input v-model="SiteInfo.site_name" />
					</el-form-item>
					<el-form-item label="关联的医院">
						<el-input v-model="SiteInfo.hospital" type="textarea" />
					</el-form-item>
					<el-form-item label="AppId">
						<el-input v-model="SiteInfo.appid" type="textarea" />
					</el-form-item>
					<el-form-item label="域名">
						<el-input v-model="SiteInfo.domain" type="textarea" />
					</el-form-item>
					<el-form-item label="状态">
						<el-switch v-model="SiteInfo.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>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		WebSiteSave,
		WebSiteGetList,
		WebSiteGetDetail
	} 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)
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	let SiteInfo = ref({
		status: 1,
		appid:'',
		hospital:'',
		domain:'',
	})
	const Add = (row=null) => {
		dialogVisible.value = true
		SiteInfo.value={
			status: 1,
			appid:'',
			hospital:'',
			domain:'',
		}
		if(row){
			loading.value=true
			WebSiteGetDetail({
				id: row.id
			}).then(res => {
				loading.value=false
				if (res.status) {
					SiteInfo.value=res.data 
				} else {
					ElMessage.error(res.msg)
				}
			})
		}
		
	}
	const GetList = () => {
		WebSiteGetList({
			page: currentPage.value,
			pageSize: pageSize.value
		}).then(res => {
			if (res.status) {
				tableData.value = res.data.list
				total = res.data.count
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const Save = () => {
		let data = {
			hospital: SiteInfo.value.hospital,
			appid: SiteInfo.value.appid,
			domain: SiteInfo.value.domain,
			site_name: SiteInfo.value.site_name,
			status: SiteInfo.value.status,
			id:SiteInfo.value.id
		}
		data.hospital = toArray(data.hospital)
		data.appid = toArray(data.appid)
		data.domain = toArray(data.domain)
		WebSiteSave({
			SiteInfo: data,
		}).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(",")
	}
	onMounted(() => {
		GetList()
	})
</script>

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