<template>
	<div class="page-centent" style="height: calc(100vh - 200px); position: relative;">
		<!--loading-->
		<div v-loading="pageLoading" element-loading-text="正在加载..." style="width: 100%; height: calc(100vh - 250px)"
			class="loading-page" v-if="pageLoading"></div>
		<!--搜索结果-->
		<lz-page-empty v-else-if="!pageData.length && !pageLoading" :type="pageError ? '3' : '2'">
			<lz-svg-icon icon-class="empty2" style="font-size: 312px;" />
		</lz-page-empty>
		<!-- table列表和分页-->
		<app-table 
			v-else class="mt-16" 
			:data="pageData" 
			:pagination-config="paginationConfig"
			@sizeChange="handleSizeChange" 
			@changePage="getPageData" 
			@selection-change="handleSelectionChange"
			:tableDefaultHeight="250"
		>
			<el-table-column prop="name" label="序号" min-width="60">
				<template #default="{ $index }">
					{{ $index + 1 }}
				</template>
			</el-table-column>
			<el-table-column prop="imgUrl" label="智能体头像" min-width="100">
				<template #default="{ row }">
					<img :src="row.imgRelUrl ? row.imgRelUrl : '/images/def_agent.svg' " class="avatar-img" style="width: 40px; height: 40px" />
				</template>
			</el-table-column>
			<el-table-column prop="name" label="智能体名称" min-width="160">
				<template #default="{ row }">
					<span>
						<AutoTooltip style="color: #3067ef;">
							{{ row.name }}
						</AutoTooltip>
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="updatedTime" label="更新时间" min-width="120">
				<template #default="{ row }">
					<AutoTooltip>
						{{ datetimeFormat(row.updatedTime) }}
					</AutoTooltip>
				</template>
			</el-table-column>
			<el-table-column prop="createdBy" label="创建人" min-width="100">
				<template #default="{ row }">
					<AutoTooltip>
						{{ row.echoMap.createdBy }}
					</AutoTooltip>
				</template>
			</el-table-column>
			<el-table-column prop="state" label="发布" width="100">
				<template #default="{ row }">
					<el-switch v-model="row.state" @change="handelSwitch(row)" />
				</template>
			</el-table-column>
			<el-table-column label="操作" align="left" width="200" fixed="right">
				<template #default="{ row }">
					<div>
						<span class="mr-10 primary-text" @click="handleView(row)" style="cursor: pointer">
							预览
						</span>
						<span class="mr-10 primary-text" @click="handleEdit(row)" style="cursor: pointer">
							编辑
						</span>
						<span class="mr-10 primary-text" @click="handleSettings(row)" style="cursor: pointer">
							设置
						</span>
						<span class="mr-10" @click="handleDel(row)" style="cursor: pointer">
							删除
						</span>
					</div>
				</template>
			</el-table-column>
		</app-table>
	</div>
</template>

<script lang="ts" setup>
import AppTable from '@/components/app-table/index.vue'
import AutoTooltip from '@/components/auto-tooltip/index.vue'
import { MsgSuccess, MsgWarning, MsgError } from '@/utils/message'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { datetimeFormat } from '@/utils/time'
import { page16, delete14, update14, checkModel } from '@/servers/finyx/api/zhinengti'
import { ElMessageBox } from 'element-plus'

const router = useRouter()

const emit = defineEmits(['edit'])

const ids = ref([])
const pageData = ref<any[]>([])
const paginationConfig = reactive({
	current_page: 1,
	page_size: 10,
	total: 0
})
const keyword = ref<any>('')
const pageLoading = ref(false)
const pageError = ref(false)


/* 启用状态 切换*/
function handelSwitch({ id, name, state }: any) {
	pageLoading.value = true
	update14({ id, name, state }).then(() => {
		MsgSuccess('修改成功')
		getPageData()
	}).catch((err) => {
		MsgError(err.response.data.msg)
	}).finally(() => {
		pageLoading.value = false
	})
}

/** 预览 */
function handleView(row: any) {
	checkModel({ id: row.id })
	 .then(()=> {
		router.push({ path: `/chat/${row.id}/index` })
	 })
	 .catch((err: any)=>{
		MsgWarning(err.response?.data?.msg || '智能体未配置模型，请设置后重试')
	 })
}

/** 修改 */
function handleEdit(row: any) {
	emit('edit', row)
}
/** 设置 */
function handleSettings(row: any) {
	router.push({ path: `/smart/answer/${row.id}/setting` })
}
/** 删除-批量删除 */
function deletItems(ids: any) {
	if (!Array.isArray(ids)) return MsgWarning('参数错误')
	delete14(ids)
		.then(() => {
			MsgSuccess('删除成功！')
			handleSizeChange()
		})
		.catch(() => {
			MsgError('删除失败！')
		})
		.finally()
}

/** 删除-弹框二次确认 */
async function handleDel(row: any) {
	const confirm = await ElMessageBox.confirm('智能体删除后不可恢复，请谨慎操作', {
		title: '确定删除当前智能体',
		type: 'warning'
	})
	 if (confirm) { 
		deletItems([row.id])
	 }
}

/** 分页-每页条数改变 */
function handleSizeChange() {
	paginationConfig.current_page = 1
	getPageData()
}

/** 全选反选 */
function handleSelectionChange(val: any) {
	ids.value = val.map((v: any) => v.id)
}
/** 获取列表数据 */
async function getPageData() {
	pageLoading.value = true
	const { current_page, page_size } = paginationConfig
	page16({
		current: current_page,
		size: page_size,
		model: {
			name: keyword.value
		}
	})
		.then((res: any) => {
			const { records, total } = res;
			pageData.value = records
			paginationConfig.total = total * 1
		})
		.catch((err) => {
			console.log(err)
			pageError.value = true
		})
		.finally(() => (pageLoading.value = false))
}

onMounted(() => {
	getPageData()
})

/** 导出方法和属性 */
defineExpose({
	getPageData,
	keyword,
})

</script>

<style scoped lang="scss">
// .card {
// 	background: rgba(229, 237, 255, 0.41);
// 	padding-top: 16px;
// 	padding-bottom: 17px;
// 	padding-left: 20px;
// 	position: relative;
// 	cursor: pointer;
// 	border-radius: 8px 8px 8px 8px;

// 	p {
// 		font-weight: 500;
// 		font-size: 18px;
// 		color: #333333;
// 		line-height: 22px;
// 		text-align: left;
// 		font-style: normal;
// 		text-transform: none;
// 	}

// 	span {
// 		font-weight: 400;
// 		font-size: 12px;
// 		color: #666666;
// 		line-height: 14px;
// 		text-align: left;
// 		font-style: normal;
// 		text-transform: none;
// 		margin-top: 9px;
// 	}

// 	img {
// 		position: absolute;
// 		right: 10px;
// 		top: 10px;
// 	}
// }
</style>