<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.status" placeholder="所有状态"
						style="margin-left: 10px;">
						<el-option label="正常" :value="1" />
						<el-option label="禁用" :value="0" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchInfo.name" placeholder="请输入科室名称" style="margin-left: 10px;" />
				</el-form-item>
				<el-button @click="GetList()" 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" :row-style="{'height':'60px'}"
			v-loading="loading">
			<el-table-column prop="id" label="Id" width="100" v-if="false" />
			<el-table-column prop="department_name" label="科室名称" />
			<el-table-column prop="department_number" label="科室编号" />
			<el-table-column prop="department_status" label="状态" width="100">
				<template #default="scope">
					<el-tag v-if="scope.row.department_status==0" class="ml-2" type="danger">禁用</el-tag>
					<el-tag v-if="scope.row.department_status==1" class="ml-2" type="success">正常</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="科室账号" width="120">
				<template #default="scope">
					<div style="text-align: center;" >
						<el-button v-if="scope.row.department_status==1"  @click="addUser(scope.row)" size="small">添加账号</el-button>
						<el-tooltip effect="dark"   placement="bottom">
							 <template #content> 
								<div v-for="(item,index) in scope.row.user_list">{{index+1}}. {{item.cn_name}}</div>
							 </template>
							<div style="color: #00aaff; font-size: 12px; cursor: pointer;" @click="gotoUserList(scope.row)">
								已关联{{scope.row.user_list.length}}个</div>
						</el-tooltip>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="科室资源">
				<template #default="scope">
					<div class="zi_button" @click="goto1(scope.row.id)">科室资源 (共 <span
							style="color: #dd377f;">{{scope.row.resource_count}}</span> 个)</div>
					<div v-if="scope.row.department_status==1" class="zi_button2" @click="addResource(scope.row)">添加资源
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="" label="操作" width="180">
				<template #default="scope">
					<el-button type="primary" @click="Edit(scope.row)" size="small">修改</el-button>
					<el-button type="danger" @click="Del(scope.row)" size="small">删除</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="departmentInfo" label-width="100px" v-loading="loading" style="padding-right: 40px;">
				<el-form-item label="科室名称:">
					<el-input v-model="departmentInfo.department_name" />
				</el-form-item>
				<el-form-item label="科室编号:">
					<el-input v-model="departmentInfo.department_number" />
				</el-form-item>
				<el-form-item label="科室状态:">
					<el-switch v-model="departmentInfo.department_status" 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>
		<DepartmentResourcesSave :departmentId="departmentInfo.id" v-if="AddResourcesShow"
			@closeAddResources="closeAddResources"></DepartmentResourcesSave>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,computed 
	} from 'vue'
	import {
		GetDepartmentList,
		SaveDepartment,
		DelDepartmentInfo,
		SaveSystemUserInfo,
		getGroupList
	} from '@/api/api.js'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import DepartmentResourcesSave from '@/components/Yewu/DepartmentResourcesSave.vue'
	 const groupList_new = computed(() => {
	      return groupList.value.filter(item => (item.id !== 1 && item.id !== 5));
	    });

	let loading = ref(false);
	let searchInfo = ref({
		status: null,
		name: '',
	})
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const GetList = () => {
		loading.value = true
		GetDepartmentList({
			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
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	let dialogVisible = ref(false)
	let departmentInfo = ref({
		id: null,
		department_name: '',
		department_number: '',
		department_status: null
	})
	const Edit = (row) => {
		dialogVisible.value = true
		departmentInfo.value = {
			id: row.id,
			department_name: row.department_name,
			department_number: row.department_number,
			department_status: row.department_status
		}
	}
	const Save = () => {
		loading.value = true
		SaveDepartment({
			info: departmentInfo.value,
		}).then(res => {
			loading.value = false
			if (res.status) {
				dialogVisible.value = false
				GetList()
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	const add = () => {
		dialogVisible.value = true
		departmentInfo.value = {
			id: null,
			department_name: '',
			department_number: '',
			department_status: 1
		}
	}
	//添加账号
	let addUserdialogVisible =ref(false);
	let addUserInfo=ref({
		id:0,
		department_id:null,
		cname:'',
		uname:'',
		groupId:'',
		status:1
	})
	const addUser=(row)=>{
		addUserdialogVisible.value=true
		addUserInfo.value.department_id=row.id
	}
	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',
				})
				GetList()
			} else {
				ElMessage.error(res.msg)
			}
		
		})
	}
	//添加资源
	let AddResourcesShow = ref(false);
	const addResource = (row) => {
		AddResourcesShow.value = true
		console.log(AddResourcesShow.value);
		departmentInfo.value.id = row.id
	}
	//关闭
	const closeAddResources = () => {
		AddResourcesShow.value = false
		GetList()
	}
	const goto1 = (id) => {
		window.location.href = "./#/yewu/departmentResources?departmentId=" + id
	}
	const Del = (row) => {
		ElMessageBox.confirm(
				'确定删除吗？',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				loading.value = true
				DelDepartmentInfo({
					id: row.id,
				}).then(res => {
					loading.value = false
					if (res.status) {
						dialogVisible.value = false
						GetList()
					} 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?departmentId=" + row.id
	}
	onMounted(() => {
		getGroup()
		GetList()
	})
</script>

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

	.zi_button {
		color: #409eff;
		cursor: pointer;
	}

	.zi_button2 {
		color: #55aa00;
		cursor: pointer;
	}

	.zi_button:hover {
		color: #06101a;
	}
	.adduser{
		 
	}
</style>