<template>
  <div class="page-main-header">空白 Issue</div>
  <page-layout>
    <div class="page-main-content  g-content-card">
      <d-form layout="vertical" :data="issueData" :rules="rules" ref="formRef">
        <d-form-item class="edit-form-item" field="title" label="标题">
          <d-input v-model="issueData.title" placeholder="请填写 Issue 标题" maxlength="201" size="lg" />
        </d-form-item>
        <d-form-item class="edit-form-item" field="description" label="内容">
          <MdEditor v-model="issueData.description" @content-change="mdChange" :project-id="decodeURIComponent(repoId)" toggle-repo-permission></MdEditor>
        </d-form-item>
        <!-- <d-form-item class="edit-form-item" field="confidential" label="Issue 可见性"><d-select class="edit-form-select" placeholder="请选择" v-model="issueData.confidential" :options="options" size="sm"></d-select></d-form-item> -->
      </d-form>
      <div class="edit-btngroup">
        <d-button :disabled="issueData?.title?.length < 1 || issueData?.title?.length > 200 || !issueData.description || issueData.description.length > 1024 * 1024" @click="handleSubmit" :loading="loading"
          color="primary" variant="solid" class="w-[80px]">新建</d-button>
        <d-button @click="$router.push({ name: 'repoIssues'})"
          class="w-[80px]">取消</d-button>
      </div>
    </div>

    <template #right>
      <AsideSetSkeleton v-model="issueData" type="create" hiddenBoards hiddenMerge hiddenBranch :repoId="repoId" />
    </template>
  </page-layout>
</template>

<script setup lang="ts">
defineOptions({ name: 'create-issue' });
import AsideSetSkeleton from '@/views/Repo/components/IssueAsideSetGroup/index.vue';
import PageLayout from '@/components/PageLayout/index.vue';
import MdEditor from '@/components/MdEditor/index.vue';
import { ref, provide } from 'vue';
import { useRouter } from 'vue-router';
import { createIssue } from '@/api/issue/index';
import { getRepoRole } from '@/api/repo/index';
import { useRepoId } from '@/utils/hooks/useRepoId';
import { reqCatch } from '@/utils/catch';
import { formatIssuePutData } from '@/utils';
import { repoInfoStore } from '@/stores/Repo/index';

import { storeToRefs } from 'pinia';
import { useAccountStore } from '@/stores/user';
const userInfo = useAccountStore();
const { accountInfo } = storeToRefs(userInfo);
const { repoId } = useRepoId();
const loading = ref(false);
const router = useRouter();
const options = [{ name: '公开的', value: false }, { name: '私密的', value: true }];
const { isAdmin, isDeveloper, isVisitor } = repoInfoStore();

const rules = {
  title: [
    { required: true, message: '标题不能为空！', trigger: 'blur' },
    { required: true, min: 1, max: 200, message: '标题限制 1~200 个字符！', trigger: 'blur' }
  ],
  description: [{ required: true, message: '信息不能为空！', trigger: 'blur' }]
};

const formRef = ref(null);
const issueData = ref({ title: '', confidential: false, description: '' });

function handleSubmit() {
  formRef?.value?.validate(async(isValid: boolean) => {
    if (isValid) {
      loading.value = true;
      const res = await reqCatch(createIssue, formatIssuePutData({
        project_id: repoId.value,
        title: issueData.value.title,
        description: issueData.value.description,
        ...issueData.value
      }));

      if (!res.error) {
        router.push({ name: 'repoIssueDetail', params: { serialNumber: res?.data?.data?.iid }});
      }
      loading.value = false;
    }
  });
}

function mdChange(text: string) {
  issueData.value.description = text;
}
provide('isVisitor', isVisitor);
provide('isDeveloper', isDeveloper);
provide('isAdmin', isAdmin);
</script>

<style lang="scss" scoped>
.page-main-header {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 32px;
  @apply text-G900;
}

.page-main-content {
  @apply bg-white p-20;
  :deep(.devui-form__label-span){
    @apply text-G900
  }
}

.edit-btngroup {
  @apply flex gap-2 flex-row-reverse;
}
</style>
