<template>
	<el-dialog v-model="visible" :title="name + '-设备列表'" width="1000px" destroy-on-close>
		<div class="device-list">
			<el-table :data="tableData" style="width: 100%" v-loading="loading">
				<el-table-column label="标识" prop="key" min-width="150" show-overflow-tooltip>
					<template #default="{ row }">
						<copy :text="row.key"></copy>
					</template>
				</el-table-column>
				<el-table-column label="设备名称" prop="name" min-width="160" show-overflow-tooltip />
				<el-table-column label="设备类型" prop="product.deviceType" min-width="100" align="center" show-overflow-tooltip />
				<el-table-column label="所属产品" prop="productName" min-width="120" align="center" show-overflow-tooltip />
				<el-table-column prop="status" label="状态" min-width="80" align="center">
					<template #default="scope">
						<el-tag type="danger" size="small" v-if="scope.row.status == 1">离线</el-tag>
						<el-tag type="success" size="small" v-if="scope.row.status == 2">在线</el-tag>
						<el-tag type="info" size="small" v-if="scope.row.status == 0">未启用</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="lastOnlineTime" label="最后上线时间" align="center" width="160"></el-table-column>
				<el-table-column label="操作" width="100" align="center">
					<template #default="scope">
						<router-link
							:to="'/iotmanager/device/instance/' + scope.row.key"
							class="link-type"
							style="font-size: 12px; color: #409eff"
							v-auth="'detail'"
						>
							<span>详情</span>
						</router-link>
					</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-dialog>
</template>

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

const visible = ref(false)
const name = ref('')

const { params, tableData, getList, loading } = useSearch<any[]>(api.cascade.deviceList, 'list', {
	tenantCode: '',
	status: undefined,
})

// 打开弹窗
const open = async (row: any) => {
	tableData.value = []
	name.value = row.name
	params.tenantCode = row.tenantCode
	visible.value = true
	getList(1)
}

defineExpose({ open })
</script>

<style scoped>
.device-list {
	padding: 0 20px;
}
</style>
