<template>
	<div class="padding-sm">
		<el-row :gutter="10">
			<el-col :span="7" :xs="24">
				<el-card shadow="never" :body-style="{ padding: '10px' }">
					<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
						<el-form-item label="仓库名称" prop="repositoryId">
							<el-select v-model="queryParams.repositoryId" placeholder="请选择" @change="handleQuery">
								<el-option v-for="dict in wareHouseOptions" :key="dict.repositoryId" :label="dict.repositoryName"
									:value="dict.repositoryId"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<el-scrollbar wrap-class="scrollbar-wrapper" style="height: calc(100vh - 135px);">
						<el-tree class="impa-tree"
						 :data="wareHouseTree"
						 node-key="id"
						 :default-expanded-keys="rowItem.keys"
						 :highlight-current="true"
						 :expand-on-click-node="false"
						 @nodeClick="nodeClick">
							<template #default="{ node, data }">
								<span class="impa-tree-node">
									<div class="left">
										<div>
											<svg-icon :icon-class="fileTypeIcon(data.label)"/>
											<span class="margin-left-xs">{{ data.label.replace("/","") }}</span>
										</div>
									</div>
								</span>
							</template>
						</el-tree>
					</el-scrollbar>
				</el-card>
			</el-col>
			<el-col :span="17" :xs="24">
				<el-card shadow="never" :body-style="{ padding: '10px' }">
					<el-table :data="tableData"
					    style="width: 100%;margin-bottom: 20px;"
					    row-key="permissionId"
					    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
						<el-table-column label="序号" align="center" type="index" width="50" />
						<el-table-column prop="deptName" label="组名/用户名">
							<template #default="scope">
								<span v-if="scope.row.userId"><svg-icon icon-class="user" class="text-green margin-right-xs"/>{{scope.row.userName}}</span>
								<span v-else><svg-icon icon-class="tree" class="text-blue margin-right-xs"/>{{scope.row.deptName}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" v-hasRole="['admin']" width="500px">
							<template #default="scope">
								<!-- <el-checkbox-group> -->
								    <el-checkbox v-model="scope.row.readPermission" :true-label="1" label="查看"></el-checkbox>
								    <el-checkbox v-model="scope.row.writePermission" :true-label="1" label="编辑"></el-checkbox>
								    <el-checkbox v-model="scope.row.deletePermission" :true-label="1" label="删除"></el-checkbox>
								    <el-checkbox v-model="scope.row.downloadPermission" :true-label="1" label="下载"></el-checkbox>
									<el-checkbox v-model="scope.row.inheritPermission" :true-label="1" label="可继承"></el-checkbox>
								<!-- </el-checkbox-group> -->
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup name="repository">
	import { getToken } from "@/utils/auth";
	import {
		listWareHouse,
		treeWareHouse,
		treePermissions
	} from "@/api/wareHouse";
	import { listDept, treeselect	} from "@/api/system/dept";
	const { proxy } = getCurrentInstance();
	const { sys_file_type} = proxy.useDict("sys_file_type");
	const router = useRouter();
	const wareHouseTree = ref([]);
	const wareHouseOptions = ref([]);
	const loading = ref(true);
	const rowItem = ref({});
	const tableData = ref([]);
	const data = reactive({
		queryParams: {
			repositoryId: undefined
		}
	});
	const { queryParams, form, rules } = toRefs(data);
	/** 搜索按钮操作 */
	function handleQuery() {
		getHouseTree();
	}
	/** 重置按钮操作 */
	function resetQuery() {
		proxy.resetForm("queryRef");
		handleQuery();
	}
	/** 修改按钮操作 */
	function handleUpdate(row) {
		reset();
		const wareHouseId = row.repositoryId;
		// getWareHouse(wareHouseId).then((response) => {
		// 	form.value = response.data;
		// 	open.value = true;
		// 	title.value = "修改仓库";
		// });
	}
	/** 提交按钮 */
	function submitForm() {
		proxy.$refs["repositoryRef"].validate((valid) => {
			if (valid) {
				// if (form.value.repositoryId != undefined) {
				// 	updateWareHouse(form.value).then((response) => {
				// 		proxy.$modal.msgSuccess("修改成功");
				// 		open.value = false;
				// 		getList();
				// 	});
				// } else {
				// 	addWareHouse(form.value).then((response) => {
				// 		proxy.$modal.msgSuccess("新增成功");
				// 		open.value = false;
				// 		getList();
				// 	});
				// }
			}
		});
	}
	function nodeClick(data, nosde, esl){
		getTreePermiss(data.id)
	}
	/** 查询用户列表 */
	function getList() {
		loading.value = true;
		listWareHouse().then((res) => {
			loading.value = false;
			wareHouseOptions.value = res.rows;
			if(res.rows.length){
				queryParams.value.repositoryId = res.rows[0].repositoryId;
				getHouseTree();
			}
		});
	}
	/** 查询用户列表 */
	function getHouseTree() {
		loading.value = true;
		treeWareHouse({
			repositoryId: queryParams.value.repositoryId,
			pageSize: 999,
			pageNum: 1
		}).then((res) => {
			loading.value = false;
			wareHouseTree.value = res;
			getTreePermiss(res[0].id)
		});
	}
	// 
	function getTreePermiss(_id){
		treePermissions({
			fileId: _id
		}).then((response) => {
			tableData.value = response.data;
		});
	}
	// 根据文件名获取图标
	function fileTypeIcon(name, dleg){
		let _name = (name.indexOf("/") != -1);
		if(_name || dleg == 1){
			return "filefolder"
		}else{
			if(name.indexOf(".") != -1){
				let _names = name.split(".");
				let _obj = sys_file_type.value.filter(item => item.value == _names[_names.length - 1])
				return (_obj.length?_obj[0].label:"filewj")
			}else{
				return "filewj"
			}
		}
	}
	getList();
	// getHouseTree();
</script>