<template>
  <div class="border border-solid border-1px border-border rounded-2px m-4px" ref="contentRef">
    <div
      class="h-32px leading-24px flex items-center justify-between px-12px gap-4px cursor-pointer"
      @click="expand = !expand"
    >
      <span>
        <AiOutlineDown size="12px" v-if="expand" />
        <AiOutlineRight size="12px" v-else />
      </span>
      <LuBox size="12px" />
      <span class="flex-1 truncate" :title="title">
        <el-input
          size="small"
          v-if="edit"
          v-model.trim="title"
          ref="inputRef"
          spellcheck="false"
          @keydown.enter="handleChangeName"
          @blur="handleChangeName"
          @click.stop
        />
        <span v-else>{{ data.name }}</span>
      </span>
      <span class="flex gap-4px items-center">
        <LuPencilLine size="12px" @click.stop="handleEdit" />
        <el-popconfirm
          :append-to="contentRef"
          class="box-item"
          title="确认删除?"
          @confirm="$emit('delete')"
        >
          <template #reference>
            <span class="cursor-pointer" @click.stop><LuTrash2 size="14px" /></span>
          </template>
        </el-popconfirm>
      </span>
    </div>
    <div class="my-12px text-12px px-12px text-text-secondary" v-if="expand">代码内容:</div>
    <div class="border" v-if="expand">
      <MonacoEditor v-model="data.action" :allow-fullscreen="false" language="c" bordered />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Method } from '@/types/method'

import { ref, nextTick } from 'vue'
import MonacoEditor from '@/components/MonacoEditor/index.vue'
import { LuBox, LuPencilLine, LuTrash2 } from 'vue-icons-plus/lu'
import { AiOutlineRight, AiOutlineDown } from 'vue-icons-plus/ai'

const props = defineProps<{
  data: Method
}>()
defineEmits(['delete'])

const expand = ref(false)
const edit = ref(false)
const title = ref('')
const contentRef = ref<HTMLDivElement>()
const inputRef = ref<HTMLInputElement>()

const handleEdit = async () => {
  title.value = props.data.name
  edit.value = true
  await nextTick()
  inputRef.value?.focus()
}
const handleChangeName = () => {
  if (title.value) {
    props.data.name = title.value
    edit.value = false
  }
}
</script>

<style scoped></style>
