<script setup>
import { ref, onMounted } from "vue";
import { Search, Plus } from "@element-plus/icons-vue";
import ClassicEditor from "ckeditor5-custom-build/build/ckeditor.js";

import { getArticle, updateArticle } from "@/api/article.js";

const editor = ClassicEditor;
const editorContent = ref("");
const editorConfig = ref({
  simpleUpload: {
    // The URL that the images are uploaded to.
    uploadUrl: '/adminapi/article/uploadImage',
    // // Headers sent along with the XMLHttpRequest to the upload server.
    headers: {
      'X-CSRF-TOKEN': 'CSFR-Token',
      'Authorization' : `${sessionStorage.getItem('token')}`
    }
  },
  image: {
    resize: true,
    toolbar: [
      "imageTextAlternative",
      "|",
      "imageStyle:alignLeft",
      "imageStyle:alignRight",
      "|",
      "imageStyle:alignBlockLeft",
      "imageStyle:block",
      "imageStyle:alignBlockRight",
    ],
    styles: [
      'full',
      'alignLeft',
      'alignRight',
    ],
  },
});

onMounted(async () => {
  let res = await getArticle(2);
  if (res.code === 200) {
    editorContent.value = res.data.content;
  }
});

const submitForm = async () => {
  let res = await updateArticle({
    id: 2, 
    content: editorContent.value
  });

  if (res.code === 200) {
    // editorContent.value = res.data.content;
    return ElMessage({
          message: '更新成功',
          type: 'success',
    });
  }

  return ElMessage({
    message: '更新失敗',
    type: 'error',
  });
};

</script>

<template>
  <div class="main">
    <!-- Breadcrumb: Start -->
    <div class="breadcrumb-section">
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item> 經銷系統 </el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">經營理念</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div></div>
    </div>
    <!-- Breadcrumb: End -->
    <el-card :body-style="{ padding: '0px' }">
      <div :style="{ padding: '10px' }">
        <ckeditor :editor="editor" v-model="editorContent" :config="editorConfig"></ckeditor>      
      </div>
      <div class="card-footer">
        <el-button type="primary" @click="submitForm()">確認</el-button>
      </div>
    </el-card>
  </div>
</template>

<style lang="less" scoped>
.card-footer {
  background-color: #f5f7fa;
  border-top: 1px solid #ebeef5;
  padding: 10px;
  text-align: right;
}

:deep(.ck-editor__editable_inline) {
  height: calc(100vh - 315px);
}
</style>