<template>
  <div style="height: calc(100vh - 150px)" class="w-full flex flex-col">
    <ViewTitle title="函数代码">
      <template #right>
        <el-button type="text" @click="handleAdd"><LuPlus size="14px" /></el-button>
      </template>
    </ViewTitle>
    <div class="flex-1 min-h-0">
      <el-scrollbar>
        <MethodItem
          v-for="item in projectStore.project?.methods || []"
          :key="item.id"
          :data="item"
          @delete="handleDelete(item.id)"
        />
        <div
          v-if="!projectStore.project?.methods?.length"
          class="text-center text-text-secondary mt-4"
        >
          暂无数据~
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import ViewTitle from '@/components/ViewTitle/index.vue'
import { LuPlus } from 'vue-icons-plus/lu'
import MethodItem from './components/MethodItem.vue'
import { useProjectStore } from '@/store/modules/project'
import { createMethod } from '@/model'

const projectStore = useProjectStore()

const handleDelete = (id: string) => {
  projectStore.project?.methods?.splice(
    projectStore.project.methods.findIndex((item) => item.id === id),
    1
  )
}

const handleAdd = () => {
  projectStore.project?.methods?.push(createMethod())
}
</script>

<style scoped></style>
