<script setup lang="ts">
import { useContentStore } from '~/stores/contents';

const route = useRoute();
const router = useRouter();

const contentId = route.query.contentId;

const editorRef = ref();

const contentStore = useContentStore();
const { contents, initialValue } = storeToRefs(contentStore);

onBeforeMount(() => {
  if (contentId) {
    contentStore.searchContents(Number(contentId));
  } else {
    contentStore.resetContents();
  }
});

const save = () => {
  contents.value.contents = editorRef.value.getValue();

  contentStore
    .updateContents()
    .then(() => {
      message.success('콘텐츠 정보가 저장이 되었습니다.');
      moveList();
    })
    .catch(() => {
      message.error('콘텐츠 저장에 실패하였습니다.');
    });
};

const moveList = () => {
  router.push('/admin/content/list');
};

const nonValid = computed(() => {
  return !contents.value.contentTitle;
});
</script>

<template>
  <client-only>
    <a-space direction="vertical" class="w-full">
      <a-card>
        <a-row>
          <a-col :span="24">
            <a-form-item
              label="제목"
              label-align="left"
              :colon="false"
              :label-col="{ span: 2 }"
            >
              <a-input
                title="제목"
                placeholder="콘텐츠 제목"
                v-model:value="contents.contentTitle"
              />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item
              label="기관"
              label-align="left"
              :colon="false"
              :label-col="{ span: 2 }"
            >
<!--              <common-inst-code-select v-model:value="contents.orgId" />-->
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item
              label="내용"
              label-align="left"
              :colon="false"
              :label-col="{ span: 2 }"
              :wrapper-col="{ span: 22 }"
            >
              <lazy-data-editor ref="editorRef" :initial-value="initialValue" />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item
              label="사용여부"
              label-align="left"
              :colon="false"
              :label-col="{ span: 2 }"
              :wrapper-col="{ span: 22 }"
            >
              <a-switch v-model:checked="contents.useYn" />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-flex justify="space-between">
              <a-space>
                <common-permit-button api="/api/admin/contents/updateContents">
                  <a-button
                    type="primary"
                    @click="save"
                    :disabled="nonValid"
                    v-if="!contentId"
                    >저장</a-button
                  >
                  <a-button
                    type="primary"
                    @click="save"
                    v-if="contentId != null"
                    >수정</a-button
                  >
                </common-permit-button>
                <a-button type="default" @click="moveList">목록</a-button>
              </a-space>
            </a-flex>
          </a-col>
        </a-row>
      </a-card>
    </a-space>
  </client-only>
</template>
