<template>
  <!--loading-->
  <div v-loading="pageLoading" element-loading-text="正在加载..." class="loading-page" v-if="pageLoading"></div>
  <div class="page-centent" style="height: calc(100vh - 240px); position: relative; overflow-y: scroll; padding-top: 20px;">
    <!--搜索结果-->
    <lz-page-empty v-if="!pageData.length && !pageLoading" :type="pageError ? '3' : '2'">
      <lz-svg-icon icon-class="empty2" style="font-size: 312px;" />
    </lz-page-empty>
    <!-- 智能体列表 -->
    <el-row :gutter="20" v-else-if="!pageLoading" style="margin-left: -7px; margin-right: -7px;">
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-for="(item, index) in pageData" :key="index" class="mb-20">
        <!-- 单个智能体 -->
        <lz-card-agent 
          :title="item.name" 
          :description="item.applicationDesc"
          :seniorSvg="senior"
          :userSvg="user"
          @click="jumpToChat(item)"
          :avatar="item.imgRelUrl || '/images/def_agent.svg'" 
          :tyType="item.tyType" 
          :createdByName="item.echoMap.createdBy" 
        />
      </el-col>
    </el-row>
  </div>
  <!-- 分页器 -->
  <div style="display: flex;justify-content: flex-end;" v-if="showPagination">
    <el-pagination 
      v-model:current-page="paginationConfig.current_page" 
      v-model:page-size="paginationConfig.page_size"
      :page-sizes="pageSizes" :total="paginationConfig.total" 
      layout="total, prev, pager, next, sizes"
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
    />
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import senior  from '@/assets/agent/senior.svg'
import user  from '@/assets/agent/user.svg'
import { page16 } from '@/servers/finyx/api/zhinengti'

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

const showPagination = computed(() => {
  return pageData.value?.length && !pageLoading.value
})

function handleCurrentChange(val: number) {
  paginationConfig.current_page = val
  getPageData()
}

function handleSizeChange(val: number) {
  paginationConfig.page_size = val
  getPageData()
}

function jumpToChat(row: any) {
  router.push({ path: `/chat/${row.id}/index` })
}


async function getPageData() {
  pageLoading.value = true
  const { current_page, page_size } = paginationConfig
  page16({ 
    current: current_page,
    size: page_size,
    model: {
        name: keyword.value,
        state: true,
    }
  })
    .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;
  }
}
.loading-page{
  width: 100%; 
  height: calc(100vh - 250px);
}
</style>