<template>
  <a-card>
    <el-popconfirm title="这是一段内容确定删除吗？">
      <template #reference>
        <el-button>删除</el-button>
      </template>
    </el-popconfirm>
    <a-space>
      <div class="primary">dasdsad</div>
      <el-button @click="handleTestClick">dasdsad</el-button>
      <el-button type="success" @click="handleAddOrEdit()"> 新增API </el-button>
      <el-button type="primary" @click="handleAddOrEdit()">新增模块</el-button>
      <el-button type="primary" @click="handleAddOrEdit()">新增版本</el-button>
    </a-space>

    <a-space direction="vertical" style="width: 100%">
      <a-table
        bordered
        :loading="loading"
        :pagination="pagination"
        :data-source="dataSource"
        :columns="columns"
        row-key="_id"
        @change="handleChange"
      >
        <template #params="{ record }">
          <a-space>{{ record.params }}</a-space>
        </template>

        <template #headers="{ record }">
          <a-space>{{ record.headers || "-" }}</a-space>
        </template>

        <template #operation="{ record }">
          <a-space>
            <a @click="handleAddOrEdit(record)">编辑</a>
            <a-popconfirm
              v-if="dataSource.length"
              title="确定要删除该项吗?"
              @confirm="handleDelete(record._id)"
            >
              <a>删除</a>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-space>
  </a-card>

  <AddEditApiModal
    v-model:currentRow="currentRow"
    v-model:visible="addEditVisible"
    @success="handleChange({ pageSize: pagination.pageSize, current: 1 })"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import AddEditApiModal from "./modals/add-edit-api-modal.vue";
import { getColumns } from "./columns";
import { useApliList } from "./hooks/useApiList";
import { IApi } from "./types";

export default defineComponent({
  name: "Home",
  setup: () => {
    const addEditVisible = ref(false);
    const currentRow = ref<IApi | undefined>(undefined);
    const { dataSource, loading, pagination, handleChange, handleDelete } =
      useApliList();
    /**
     * 打开新增对话框
     */
    const handleAddOrEdit = (row?: IApi) => {
      addEditVisible.value = true;
      if (row) currentRow.value = row;
    };

    const handleTestClick = () => {
      console.log(111);
    };

    return {
      currentRow,
      addEditVisible,
      handleAddOrEdit,
      loading,
      pagination,
      dataSource,
      handleChange,
      handleDelete,
      columns: getColumns(),
      handleTestClick,
    };
  },

  components: {
    AddEditApiModal,
  },
});
</script>

<style lang="scss" scoped>
.primary {
  background-color: var(--color-primary);
  color: var(--color-primary-light-3);
}
</style>
