<script setup lang="ts">
import { ref, shallowRef, onMounted, computed, defineProps  } from 'vue';
import WebHookItem from './WebHookItem.vue';
import { Message } from 'vue-devui/message';

const visible = ref(false);
const currentId = ref('');
const loading = ref(true);

// 请求API都由父级决定 抽离方便复用
const props = withDefaults(defineProps<{
  getRepoWebhooks: Function,
  editWebhook: Function,
  deleteWebHook: Function,
  repoId: string | null
}>(), {
  getRepoWebhooks: () => {},
  editWebhook: () => {},
  deleteWebHook: () => {},
});

const empty = computed(() => {
  return !loading.value && !webHookList.value.length;
});

const emit = defineEmits(['create', 'edit']);

const webHookList = shallowRef<any[]>([]);

const getConfig = async() => {
  const res = await props.getRepoWebhooks({ repoId: props.repoId, conf: { page: 1, per_page: 50 }});
  if (!res.error) {
    webHookList.value = res?.data?.data;
  }
  loading.value = false;
};

const handleDeal = async(data: Record<string, any>) => {
  const { hook_id, ...config } = data;
  const res = await props.editWebhook({ repoId: props.repoId, hook_id, conf: config });
  if (!res.error) {
    Message.success('操作成功');
    getConfig();
  }
};

const handleDel = (data: { hook_id: string }) => {
  const { hook_id } = data;
  visible.value = true;
  currentId.value = hook_id;
};

const handleConfirm = async() => {

  const res = await props.deleteWebHook({ repoId: props.repoId, hook_id: currentId.value });
  if (!res.error) {
    Message.success('webhook移除成功');
    getConfig();
    visible.value = false;
  }
};

const handleEdit = (data: any) => {
  emit('edit', data);
};

onMounted(() => {
  getConfig();
});

</script>

<template>
  <div class="box-border py-[24px]">
    <div class="repo-settings-title">
      <div>WebHook</div>
    </div>
    <div class="g-content-card pb-[18px]">
      <div class="text-sm mb-[18px] flex items-center justify-between p-[18px] border-box border-b-[1px] border-solid border-[var(--color-CG200)]">
        <div class="mr-2">
          WebHook 将允许 GitCode 向你的外部服务进行通知，当某些特定事件发生时，我们将向你指定的 URL中发送一个 POST 请求。
        </div>
        <d-button variant="solid" color="primary" icon="add" @click="emit('create')">新建 WebHook</d-button>
      </div>
      <DataPanel :loading="loading" :empty="empty" :skeleton="loading" :card="false">
        <div class="border-box px-[18px]">
          <div class="repo-table-item" v-for="hook of webHookList" :key="hook.id">
          <WebHookItem
            :hook="hook"
            @edit="handleEdit"
            @run="handleDeal"
            @pause="handleDeal"
            @delete="handleDel"
          ></WebHookItem>
        </div>
        </div>
      </DataPanel>
    </div>
    <GModal v-model="visible" title="你正在删除webhook" @confirm="handleConfirm">
      <div class="px-[8px]">删除后将无法恢复, 确认继续么?</div>
    </GModal>
  </div>
</template>

<style lang="scss" scoped>
.repo-table-item {
  &:nth-last-of-type(1) {
    @apply border-b-[1px];
  }
  @apply flex items-center  py-[14px] px-[24px] justify-between border-t-[1px] border-l-[1px] border-r-[1px] border-solid border-[var(--color-CG200)];
}
.g-content-card{
  .devui-button{
    min-width: 155px;
  }
}
</style>
