<script setup lang="ts">
import { useDocList } from "./index";
import { Search } from "@element-plus/icons-vue";
import { hasPerms } from "@/utils/auth";
defineOptions({
  name: "DocList"
});

const {
  activeName,
  handleClick,
  handleAddApp,
  handleSyncApi,
  tabsData,
  actionButtons,
  tableColumns,
  tableRows,
  filterText,
  loading,
  handleSearch
} = useDocList();
</script>
<template>
  <el-card v-loading="loading" shadow="never">
    <div v-show="tabsData.length === 0">
      <el-button type="primary" @click="handleAddApp">添加应用</el-button>
    </div>
    <el-tabs
      v-show="tabsData.length > 0"
      v-model="activeName"
      addable
      @tab-click="handleClick"
      @tab-add="handleAddApp"
    >
      <template #add-icon>
        <el-icon style="font-size: 20px"><CirclePlusFilled /></el-icon>
      </template>
      <el-tab-pane
        v-for="item in tabsData"
        :key="item.id"
        :label="item.appName"
        :name="item.id"
      />
    </el-tabs>
    <PlusTable
      v-show="tabsData.length > 0"
      :columns="tableColumns"
      :table-data="tableRows"
      showOverflowTooltip
      :action-bar="{
        buttons: actionButtons,
        confirmType: 'popconfirm',
        width: 150
      }"
      adaptive
    >
      <template #title>
        <el-input
          v-model="filterText"
          type="text"
          placeholder="过滤,支持接口标题,接口名称"
          style="width: 300px"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
      </template>
      <template #toolbar>
        <el-button
          v-if="hasPerms('doc:page-btn:sync')"
          type="primary"
          @click="handleSyncApi"
        >
          同步全部接口
        </el-button>
      </template>
    </PlusTable>
  </el-card>
</template>
