<template>
	<el-dialog v-model="show" title="选择设备" width="1000px" @close="close">
		<el-table ref="tableRef" v-if="options.length > 0" style="margin-bottom: 20px;height: calc(80vh - 300px);" :data="options" :row-key="rowKey" @selection-change="changeEquipment" @row-click="rowClick">
			<el-table-column width="55" #default="{ row }" align="center">
				<el-radio v-model="ridioIndex" :label="row[rowKey]">
					<span></span>
				</el-radio>
			</el-table-column>
			<el-table-column prop="sbmc" label="设备名称" />

		</el-table>
		<el-empty v-if="options.length === 0" description="暂无数据" />
		<div class="fenye">
			<MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
		</div>
		<div class="dialog-footer">
			<el-button type="primary" @click="confirm">确定</el-button>
			<el-button @click="close">取消</el-button>
		</div>
	</el-dialog>
</template>
<script setup>
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ref, onMounted, defineProps, defineEmits,reactive } from "vue";
import * as MOSTY from "@/components/MyComponents/index";

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	placeholder: {
		type: String,
		default: '请选择'
	},
	params: {
		type: Object,
		default: {}
	},
	selectId: {
		type: String,
		default: ''
	}
})
const emits = defineEmits(['ok', 'close'])
const show = ref(true) // 外面用v-if 控制
const rowKey = ref('sbid')
const options = ref([]);
const tableRef = ref(null)
const ridioIndex = ref()
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
//   orgcode: ""
});
const setEquipmentList = () => {
	getApi({ ...props.params, ...listQuery }, '/mosty-jcgl/hazardousSite/getSbList').then(res => {
		
		let arr = Array.isArray(res?.records) ? res?.records : []
		options.value = arr.map(item => ({
			id: item.id,
			sbid: item.id,
			sblx: item.sblx,
			sbmc: item.sbmc
		}))
		listQuery.total = res.total
	})
}
const rowClick = (row) => {
	
	if(row.id) {
		ridioIndex.value = row.id
	}
}
const handleCurrentChange = (val) => {
	listQuery.pageCurrent = val
}
const handleSizeChange = (val) => {
	listQuery.pageCurrent = 1
	listQuery.pageSize = val
}
const changeEquipment = (val) => {
	
	emits('ok', val)
}
const confirm = () => {
	let obj = options.value.find(item => item[rowKey.value] === ridioIndex.value)
	if(!obj) return ElMessage.warning('请选择设备')
	emits('ok', obj)
}
const close = () => {
	emits('close')
}
onMounted(() => {
	setEquipmentList()
	if(props.selectId)ridioIndex.value = props.selectId
})

</script>

<style lang="scss" scoped></style>