<template>
	<DialogBox :title="props.title" :dialogVisible="props.dialogVisible" @close="handleClose">
		<div class="application-list-container application-list-container-chat">
			<!-- 列表start --->
			<InfiniteScroll 
				:size="pageData.length" 
				:total="paginationConfig.total"
				:page_size="paginationConfig.page_size" 
				v-model:current_page="paginationConfig.current_page" 
				@load="getList"
				:loading="pageLoading"
			>
				<div 
					v-loading="paginationConfig.current_page === 1 && pageLoading" 
					element-loading-text="正在加载..."
					style="width: 100%;height: 500px" 
					v-if="pageLoading && !pageData.length"
				></div>
				<PageEmpty v-if="!pageData.length && !pageLoading" :type="pageEmptyType" />
				<el-row :gutter="20">
					<el-col 
						v-for="(item, index) in pageData" 
						:xs="24" 
						:sm="12" 
						:md="8" 
						:lg="8" 
						:xl="8" 
						:key="index"
						class="mb-20"
					>
						<CardBoxAgent 
							:title="item.name" 
							:description="item.applicationDesc" 
							@click="jumpToChat(item)"
							:avatar="item.imgRelUrl || '/images/def_agent.svg'" :tyType="item.tyType" 
							:createdByName="item?.echoMap.createdBy" 
						/>
					</el-col>
				</el-row>
			</InfiniteScroll>
			<!-- 列表end --->
		</div>
	</DialogBox>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { page16 } from '@/servers/finyx/api/zhinengti'

defineOptions({ name: 'DialogAgentList' })
const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: '选择智能体以新建对话'
	}
})

const pageLoading = ref(false)
const pageEmptyType = ref('1')
const pageData = ref<any[]>([])

const paginationConfig = reactive({
	current_page: 1,
	page_size: 100,
	total: 0
})

const searchForm = ref<any>({
	name: '', // 名称
});

const emit = defineEmits<{
	(e: 'tab-click', item: any): void;
	(e: 'tab-close'): void;
}>()


function jumpToChat(item: any) {
	emit('tab-click', {
		...item,
	})
}

function handleClose() {
	emit('tab-close')
}


function getList() {
	const params: any = {
		"model": {
			state: true //获取启用状态的
		},
		"size": paginationConfig.page_size,
		"current": paginationConfig.current_page,
	}
	if (searchForm.value.name) {
		params.model.name = searchForm.value.name
		pageEmptyType.value = '2'
	} else {
		pageEmptyType.value = '1'
	}
	pageLoading.value = true
	page16(params)
	.then((res: any) => {
      const { records, total } = res;
      pageData.value = records
      paginationConfig.total = total * 1
    })
    .catch((err) => {
      console.log(err)
    })
    .finally(() => (pageLoading.value = false))
}

watch(() => props.dialogVisible, (val) => {
	console.log(val)
	if(val) {
		getList()
	} else {
		pageData.value = []
	}
})

</script>

<style lang="scss" scoped>
.application-list-container-chat {
	min-height: 60vh;
	position: relative;
}
</style>
