<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.department_id" placeholder="选择科室"
						@clear="clear()">
						<el-option v-for="(item,index) in EnableDepartmentList" :key="index"
							:label="item.department_name" :value="item.id" />
					</el-select>
				</el-form-item>
				<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 style="margin-left: 10px;" @click="GetList">查询</el-button>
				<el-button type="primary" style="margin-left: 10px;" @click="addResource()">添加资源</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="department_name" label="所属科室" />
			<el-table-column prop="department_id" label="科室id" v-if="false" />
			<el-table-column prop="department_resources_name" label="资源名称" />
			<el-table-column prop="department_resources_addr" label="资源位置" />
			<el-table-column prop="department_resources_status" label="状态" width="100">
				<template #default="scope">
					<el-tag v-if="scope.row.department_resources_status==0" class="ml-2" type="danger">禁用</el-tag>
					<el-tag v-if="scope.row.department_resources_status==1" class="ml-2" type="success">正常</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="" label="关联服务组" width="150">
				<template #default="scope">
					<div style="text-align: center;" >
						<el-button size="small" @click="LinkDeviceClick(scope.row)">关联服务组</el-button>
						<el-tooltip effect="dark"   placement="bottom">
							 <template #content> 
								<div v-for="(item,index) in scope.row.devicesInfo">{{index+1}}. {{item.device_name}}</div>
							 </template>
							<div style="color: #00aaff; font-size: 12px; cursor: pointer;  ">
								已关联{{scope.row.devicesInfo.length}}个</div>
						</el-tooltip>
					</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>
		<DepartmentResourcesSave :departmentId="searchInfo.department_id" :resourceInfo="ResourcesInfo"
			v-if="AddResourcesShow" @closeAddResources="closeAddResources"></DepartmentResourcesSave>
		<el-dialog v-model="DevicedialogVisible" title="关联服务组" width="40%">
			<div class="chuansuokuang">
				<el-transfer v-model="selectedDevice" :titles="['可选服务组', '已关联服务组']"
					:props="{ key: 'id',label: 'device_name'}" :data="deviceList" />
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="DevicedialogVisible = false">取消</el-button>
					<el-button type="primary" @click="SaveLinkDevice()">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		GetEnableDepartmentList,
		DepartmentResourceGetList,
		DepartmentResourceDel,
		GetEnableDeviceList,
		DepartmentResourceBindDevice
	} from '@/api/api.js'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import DepartmentResourcesSave from '@/components/Yewu/DepartmentResourcesSave.vue'
	import {
		useRoute,
		useRouter
	} from "vue-router"
	const route = useRoute()
	const router = useRouter()

	let loading = ref(false);
	let searchInfo = ref({
		department_id: null,
		status: null,
		name: '',
	})
	let ResourcesInfo = ref({
		id: null,
		department_id: null,
		department_resources_name: '',
		department_resources_addr: ''

	})
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const GetList = () => {
		loading.value = true
		DepartmentResourceGetList({
			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 EnableDepartmentList = ref([]);
	const GetDepartmentEnableList = () => {
		loading.value = true
		GetEnableDepartmentList({}).then(res => {
			loading.value = false
			if (res.status) {
				EnableDepartmentList.value = res.data.list
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	//添加资源
	let AddResourcesShow = ref(false);
	const addResource = () => {
		AddResourcesShow.value = true
		ResourcesInfo.value = {}

	}
	const Edit = (row) => {
		AddResourcesShow.value = true
		ResourcesInfo.value = row
	}
	//关闭
	const closeAddResources = () => {
		AddResourcesShow.value = false
		GetList()
	}
	const clear = () => {
		window.location.href = "./#/yewu/departmentResources"
	}
	const Del = (row) => {
		ElMessageBox.confirm(
				'确定删除吗？',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				loading.value = true
				DepartmentResourceDel({
					id: row.id,
				}).then(res => {
					loading.value = false
					if (res.status) {
						dialogVisible.value = false
						GetList()
					} else {
						ElMessage.error(res.msg)
					}

				})
			})

	}
	let selectedDevice = ref([]) //选中的设备
	let DevicedialogVisible = ref(false); //关联设备弹窗
	//点击打开设备穿梭框
	const LinkDeviceClick = (row) => {
		selectedDevice.value = []
		DevicedialogVisible.value = true
		ResourcesInfo.value.department_id = row.department_id
		ResourcesInfo.value.id = row.id
		row.devicesInfo.forEach(function(v, i) {
			deviceList.value.forEach(function(v2, i2) {
				if (v.id == v2.id) {
					selectedDevice.value.push(v.id)
				}
		
			})
		})
	}
	//获取可用设备列表
	let deviceList = ref([])
	const GetDeviceList = () => {
		GetEnableDeviceList({}).then(res => {
			if (res.status) {
				deviceList.value = res.data
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	//绑定设备
	const SaveLinkDevice = () => {
		DepartmentResourceBindDevice({
			department_id: ResourcesInfo.value.department_id,
			resource_id: ResourcesInfo.value.id,
			device_ids: selectedDevice.value,
		}).then(res => {
			if (res.status) {
				DevicedialogVisible.value = false
				selectedDevice.value = []
				GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}

	onMounted(() => {
		if (route.query.departmentId) {
			searchInfo.value.department_id = Number(route.query.departmentId)
		}
		GetDeviceList()
		GetDepartmentEnableList()
		GetList()


	})
</script>

<style >
 
</style>