<template>
	<div class="head">
		<el-row>
			<el-form-item>
				<el-input v-model="searchInfo.name" placeholder="请输入病区名称" style="margin-left: 10px;"/>
			</el-form-item>
			<el-button   @click="InpatientWardGetListAction()" style="margin-left: 10px;">搜索</el-button>
			<el-button type="primary" @click="Add()" style="margin-left: 10px;">添加</el-button>
		</el-row>
	</div>
	<el-table  :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
		<el-table-column prop="id" label="Id" width="100"  />
		<el-table-column prop="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="" label="关联账号" >
		 <template #default="scope">
		 	  <el-button v-if="scope.row.status==1"  @click="addUser(scope.row)" size="small">添加账号</el-button>
		<div style="color: #00aaff; font-size: 12px; cursor: pointer;" @click="gotoUserList(scope.row)">
			已关联{{scope.row.user_list.length}}个</div>
		 </template>
	 </el-table-column>
		<el-table-column prop="" label="操作">
			<template #default="scope">
				 <el-button type="primary" @click="Edit(scope.row)" size="small" style="margin-left: 10px;">修改</el-button>
				 <el-button type="danger" @click="Del(scope.row.id)" size="small" style="margin-left: 10px;">删除</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" style="padding-right: 40px;">
			<el-form-item label="病区名称:">
				<el-input v-model="Info.name" />
			</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="addUserdialogVisible" title="添加用户" width="30%">
		<el-form :model="addUserInfo" label-width="100px" v-loading="loading" style="padding-right: 40px;">
			<el-form-item label="姓名:">
				<el-input v-model="addUserInfo.cname" />
			</el-form-item>
			<el-form-item label="账号:">
				<el-input v-model="addUserInfo.uname" />
			</el-form-item>
			<el-form-item label="角色:">
				 <el-select :filterable="true" clearable v-model="addUserInfo.groupId" placeholder="选择角色"
				 	style="margin-left: 10px;">
				 	<el-option v-for="(item ,index) in groupList_new"   :label="item.group_name" :value="item.id" />
				 </el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="addUserdialogVisible = false">取消</el-button>
				<el-button type="primary" @click="addUserSave()">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
	import {
		ref,
		onMounted,computed 
	} from 'vue'
	import {
		 InpatientWardGetList,InpatientWardSave,InpatientWardDel,
		 SaveSystemUserInfo,
		 getGroupList
	} from '@/api/api.js'
	import { ElMessage, ElMessageBox } from 'element-plus'
	const groupList_new = computed(() => {
	     return groupList.value.filter(item => (item.id ==2));
	   });
	let loading=ref(false);
	let searchInfo=ref({
		name:''
	})
	let Info=ref({
		id:null,
		name:'',
		status:1
	})
	
	let dialogVisible=ref(false);
	
	//获取设备list
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const InpatientWardGetListAction=()=>{
		loading.value = true
		InpatientWardGetList({searchInfo:searchInfo.value,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 PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		InpatientWardGetListAction()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		InpatientWardGetListAction()
	}
	//添加账号
	let addUserdialogVisible =ref(false);
	let addUserInfo=ref({
		id:0,
		department_id:null,
		ward:null,
		cname:'',
		uname:'',
		groupId:'',
		status:1
	})
	const addUser=(row)=>{
		addUserdialogVisible.value=true
		addUserInfo.value.ward=row.name
	}
	const addUserSave=()=>{
		if(addUserInfo.value.cname=='' || addUserInfo.value.uname=='' ||addUserInfo.value.groupId==''){
			ElMessage.error("请填写全部信息")
			return false
		}
		SaveSystemUserInfo({
			userInfo: addUserInfo.value,
		}).then(res => {
			loading.value = false
			if (res.status=='ok') {
				addUserdialogVisible.value=false
				ElMessage({
					message: '添加成功',
					type: 'success',
				})
				InpatientWardGetListAction()
			} else {
				ElMessage.error(res.msg)
			}
		
		})
	}
	const Add=()=>{
		dialogVisible.value=true
		Info.id=null
		searchInfo.name=''
	}
	const Edit=(row)=>{
		Info.value={
			id:row.id,
			name:row.name,
			status:row.status
		}
		dialogVisible.value=true
	
	}
	const Del=(id)=>{
		 ElMessageBox.confirm(
		    '确定删除吗？',
		    '提示',
		    {
		      confirmButtonText: '确定',
		      cancelButtonText: '取消',
		      type: 'warning',
		    }
		  )
		    .then(() => {
		     InpatientWardDel({id:id}).then(res => {
		     	loading.value = false
		     	if (res.status) {
		     		 InpatientWardGetListAction()
		     		 
		     	} else {
		     		ElMessage.error(res.msg)
		     	}
		     
		     })
		    }) 
		
	}
	//保存操作
	const Save=()=>{
		loading.value = true
		InpatientWardSave({Info:Info.value}).then(res => {
			loading.value = false
			if (res.status) {
				 dialogVisible.value=false
				 InpatientWardGetListAction()
				 
			} else {
				ElMessage.error(res.msg)
			}
		
		})
	}
	let groupList=ref('');
	const getGroup=()=>{
		getGroupList().then(res => {
			loading.value = false
			if (res.status=='ok') {
				 groupList.value=res.list
			} else {
				ElMessage.error(res.msg)
			}
		
		})
	}
	const gotoUserList=(row)=>{
		window.location.href = "./#/adminUserList?ward=" + row.name
	}
	onMounted(()=>{
		getGroup()
		InpatientWardGetListAction()
	})
</script>

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