<template>
  <div class="page-container">
    <!--智能体列表-搜索-->
    <div class="search-box" v-if="activeName === 'list'" style="right: 25px;">
      <el-input 
        v-model="listKeyword" 
        class="search-input" 
        placeholder="输入智能体名称" 
        :prefix-icon="Search" 
        clearable
        @input="searchListData"
      />
    </div>
    <!--智能体配置-搜索-->
    <div class="search-box" v-if="activeName === 'setting'">
      <el-input 
        v-model="settingKeyword" 
        class="search-input" 
        placeholder="输入智能体名称" 
        :prefix-icon="Search" 
        clearable
        @input="searchSettingData"
      />
      <el-button 
        type="primary" 
        :icon="Plus" 
        class="ml-12" 
        @click="handleDialog(false)"
      >
        创建智能体
      </el-button>
    </div>
    <!-- tab切换 -->
    <el-tabs v-model="activeName" class="res-el-tab" @tab-change="handleTabChange">
      <el-tab-pane label="智能体列表" name="list">
        <TabListPane v-if="activeName === 'list'" ref="refTab0Pane" />
      </el-tab-pane>
      <el-tab-pane label="智能体配置" name="setting">
        <TabSettingPane v-if="activeName === 'setting'" ref="refTab1Pane" @edit="handleDialog" />
      </el-tab-pane>
    </el-tabs>
    <!--创建 智能问答-->
    <CreateDialog ref="CreateDialogRef" @refresh="searchSettingData" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import TabListPane from './components/TabListPane.vue'
import TabSettingPane from './components/TabSettingPane.vue'
import { Search, Plus } from '@element-plus/icons-vue'
import { debounce } from 'lodash-es'
import CreateDialog from './components/CreateDialog.vue'


const router = useRouter()
const route = useRoute()
const activeName = ref<'list' | 'setting'>('list')
const listKeyword = ref('')
const settingKeyword = ref('')
const refTab0Pane = ref();
const refTab1Pane = ref();
const CreateDialogRef = ref<any>(null)

/** 搜索智能体列表 */
const searchListData = debounce(() => {
  refTab0Pane.value.keyword = listKeyword.value
  refTab0Pane.value?.getPageData()
}, 300)

/** 搜索智能体设置列表 */
const searchSettingData = debounce(() => {
  refTab1Pane.value.keyword = settingKeyword.value
  refTab1Pane.value?.getPageData()
}, 300)

/** 创建/编辑智能体-弹框 */
const handleDialog = (row?: any) => {
  CreateDialogRef.value?.open(row);
}

/* 初始化时从路由参数读取 activeName */
onMounted(() => {
  if (route.query.tab) {
    activeName.value = route.query.tab as 'list' | 'setting'
  }
  setTimeout(() => {
    handleTabChange(activeName.value)
  })
})

/** 切换 tab 时更新路由参数 */
const handleTabChange = (tabName: string) => {
  listKeyword.value = '';
  settingKeyword.value = '';
  router.push({
    query: {
      ...route.query,
      tab: tabName
    }
  })
}

</script>
<style scoped lang="scss">
.page-container {
  margin-top: -12px;
  .search-box {
    position: absolute;
    right: 10px;
    top: 34px;
    z-index: 1;
    .search-input {
      width: 280px;
    }
  }
}
</style>