<template>
	<div class="page page-full border bg padding">
		<el-form inline ref="queryRef" @keyup.enter="getList(1)">
			<el-form-item label="名称" prop="keyWord">
				<el-input v-model="params.keyWord" placeholder="请输入名称" clearable style="width: 240px" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" class="ml10" @click="getList(1)">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="addOrEdit()" v-if="params.roleId" v-auth="'add'">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增资产关系
				</el-button>
				<el-button type="info" @click="batchUnbind()" v-auth="'batchUnbind'" :disabled="!ids.length">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					解绑
				</el-button>
			</el-form-item>
		</el-form>
		<div class="page page-full-part flex-row gap-4">
			<el-card style="width: 250px;" shadow="never">
				<el-tree :data="treeData" :props="defaultProps" accordion default-expand-all @node-click="handleNodeClick" :node-key="'id'" highlight-current>
					<template #default="{ node, data }">
						<div class="custom-tree-node">
							<span class="tree-label">{{ data.name }}</span>
						</div>
					</template>
				</el-tree>
			</el-card>
			<el-card class="flex1" shadow="never">
				<div class="page page-full">
					<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" row-key="id" v-loading="loading">
						<el-table-column type="selection" width="55" align="center" />
						<el-table-column prop="assetInfo.deviceName" v-col="'deviceName'" label="设备名称" min-width="100" show-overflow-tooltip></el-table-column>
						<el-table-column prop="assetInfo.deviceKey" v-col="'deviceKey'" label="设备KEY" min-width="90" show-overflow-tooltip></el-table-column>
						<el-table-column prop="assetInfo.deviceNumber" v-col="'deviceNumber'" label="设备编码" show-overflow-tooltip></el-table-column>
						<el-table-column prop="assetInfo.deviceCategory" v-col="'deviceCategory'" label="设备类型" show-overflow-tooltip></el-table-column>
						<el-table-column prop="assetInfo.installTime" v-col="'installTime'" label="安装时间" width="160" align="center"></el-table-column>
						<el-table-column prop="status" label="状态" width="70" v-col="'status'" align="center">
							<template #default="scope">
								<el-switch v-model="scope.row.status" v-auth="'change-status'" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
								</el-switch>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="170" v-col="'handle'" align="center">
							<template #default="scope">
								<el-button size="small" text type="warning" v-auth="'unbind'" @click="unbind(scope.row)">解绑</el-button>
								<!-- <el-button size="small" text type="primary" v-auth="'set'" @click="set(scope.row)">设置筛选条件</el-button> -->
							</template>
						</el-table-column>
					</el-table>
					<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
				</div>
			</el-card>
		</div>
		<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
		<FilterVue ref="filterRef" @getList="getList(1)"></FilterVue>
	</div>
</template>

<script lang="ts" setup>
import api from '/@/api/system'
import device from '/@/api/device'
import { useSearch } from '/@/hooks/useCommon'

import { ElMessageBox, ElMessage } from 'element-plus'
import EditForm from './edit.vue'
import FilterVue from './filter.vue'

import { ref, onMounted } from 'vue'
const defaultProps = {
	children: 'children',
	label: 'name',
}

const queryRef = ref()
const filterRef = ref()
const treeData = ref()
const editFormRef = ref()
const ids = ref<number[]>([])

api.role.getList({ status: 1 }).then((res: any) => {
	treeData.value = res
})

const { params, tableData, getList, loading } = useSearch<any[]>(device.assetRelationship.getList, 'Data', { keyWord: '', roleId: -1 })
getList()
const handleSelectionChange = (selection: any[]) => {
	ids.value = selection.map((item) => item.id);
};

const addOrEdit = () => {
	editFormRef.value.open(params.roleId)
}

const set = (row: any) => {
	filterRef.value.open(row)
}

const handleNodeClick = (data: any) => {
	params.roleId = data.id
	getList()
}

// const batchdel = () => {
// 	ElMessageBox.confirm('是否确认要批量删除这些数据吗?', '提示', {
// 		confirmButtonText: '确认',
// 		cancelButtonText: '取消',
// 		type: 'warning',
// 	}).then(async () => {
// 		await device.assetRelationship.delete(ids.value)
// 		ElMessage.success('删除成功')
// 		getList()
// 	})
// }

// const del = (row: any) => {
// 	ElMessageBox.confirm('是否确认删除该设备档案', '提示', {
// 		confirmButtonText: '确认',
// 		cancelButtonText: '取消',
// 		type: 'warning',
// 	}).then(async () => {
// 		await device.assetRelationship.delete([row.id])
// 		ElMessage.success('删除成功')
// 		getList()
// 	})
// }

// 状态修改
const handleStatusChange = (row: any) => {
	let text = row.status === 1 ? '启用' : '停用';
	ElMessageBox.confirm('确认要【' + text + '】吗?', '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(function () {
			return device.assetRelationship.editStatus(row.id, row.status);
		})
		.then(() => {
			ElMessage.success(text + '成功');
		})
		.catch(function () {
			row.status = row.status === 0 ? 1 : 0;
		});
};

const unbind = (row: any) => {
	ElMessageBox.confirm('是否确认解绑', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		await device.assetRelationship.unBind([row.id])
		ElMessage.success('解绑成功')
		getList()
	})
}

const batchUnbind = () => {
	ElMessageBox.confirm('是否确认要批量解绑这些数据吗?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		await device.assetRelationship.unBind(ids.value)
		ElMessage.success('解绑成功')
		getList()
	})
}

// getCateList()
</script>
<style scoped lang="scss">
.custom-tree-node {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
	overflow: hidden;

	.tree-label {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 10px;
	}

	&:hover {
		.tree-options {
			display: block;
		}
	}
}
</style>