<template>
  <div class="page">
    <a-card v-if="current" :bordered="false" :title="`${current.title}`">
      <!-- 编辑器 -->
      <byte-md-editor
        v-model:value="content"
        :locale="zh_Hans"
        :plugins="plugins"
        uploadImages
        height="600px"
        :editorConfig="{ lineNumbers: true }"
      />
      <div class="ele-text-info" style="margin-top: 10px">
        <a-space :size="100">
          <div>文档ID: {{ current.docsId }}</div>
          <div>预览地址: {{ `/dashboard/docs?id=${current.docsId}` }}</div>
          <div>发布时间: {{ current.createTime }}</div>
        </a-space>
      </div>
      <div class="docs-sumbit" v-permission="'cms:docs:update'">
        <a-space>
          <a-button type="primary" @click="save">保存</a-button>
          <!--          <router-link :to="'/content/docs?id=' + current.docsId" @click.stop="">-->
          <!--            <a-button>预览</a-button>-->
          <!--          </router-link>-->
        </a-space>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import 'bytemd/dist/index.min.css';
  import { reactive, ref, watch } from 'vue';
  import 'github-markdown-css/github-markdown-light.css';
  import type { Docs } from '@/api/cms/docs/model';
  import { message } from 'ant-design-vue';
  // import TinymceEditor from '@/components/TinymceEditor/index.vue';
  import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
  import highlight from '@bytemd/plugin-highlight';
  // 中文语言文件
  import zh_Hans from 'bytemd/locales/zh_Hans.json';
  // // 链接、删除线、复选框、表格等的插件
  import gfm from '@bytemd/plugin-gfm';
  // // 插件的中文语言文件
  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
  // // 预览界面的样式，这里用的 github 的 markdown 主题
  import 'github-markdown-css/github-markdown-light.css';
  // import {
  //   addDocsContent,
  //   getDocsContent,
  //   updateDocsContent
  // } from '@/api/cms/docs-content';
  // import { DocsContent } from '@/api/cms/docs-content/model';
  import { addDocs, updateDocs } from '@/api/cms/docs';

  const props = defineProps<{
    // 文档 id
    current?: Docs | null;
  }>();

  // 插件
  const plugins = ref([
    gfm({
      locale: zh_HansGfm
    }),
    highlight()
  ]);

  // 提交状态
  const loading = ref(false);
  // 编辑器内容，双向绑定
  const content = ref('');
  // const disabled = ref(false);
  // 是否是修改
  const isUpdate = ref(false);
  // const docsContentId = ref(0);

  const form = reactive<Docs>({
    docsId: 0,
    content: ''
  });

  // const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
  // const config = ref({
  //   height: 690,
  //   // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
  //   file_picker_callback: (callback: any, _value: any, meta: any) => {
  //     const input = document.createElement('input');
  //     input.setAttribute('type', 'file');
  //     // 设定文件可选类型
  //     if (meta.filetype === 'image') {
  //       input.setAttribute('accept', 'image/*');
  //     } else if (meta.filetype === 'media') {
  //       input.setAttribute('accept', 'video/*');
  //     }
  //     input.onchange = () => {
  //       const file = input.files?.[0];
  //       if (!file) {
  //         return;
  //       }
  //       if (meta.filetype === 'media') {
  //         if (!file.type.startsWith('video/')) {
  //           editorRef.value?.alert({ content: '只能选择视频文件' });
  //           return;
  //         }
  //       }
  //       if (file.size / 1024 / 1024 > 20) {
  //         editorRef.value?.alert({ content: '大小不能超过 20MB' });
  //         return;
  //       }
  //       const reader = new FileReader();
  //       reader.onload = (e) => {
  //         if (e.target?.result != null) {
  //           const blob = new Blob([e.target.result], { type: file.type });
  //           callback(URL.createObjectURL(blob));
  //         }
  //       };
  //       reader.readAsArrayBuffer(file);
  //     };
  //     input.click();
  //   }
  // });

  /* 搜索 */
  // const reload = () => {
  //   getDocsContent(Number(props.current?.docsId))
  //     .then((res) => {
  //       content.value = String(res.content);
  //       docsContentId.value = Number(res.docsContentId);
  //       isUpdate.value = true;
  //     })
  //     .catch(() => {
  //       loading.value = false;
  //       content.value = '';
  //       isUpdate.value = false;
  //     });
  // };

  // 保存文档
  const save = () => {
    loading.value = true;
    const docsData = {
      ...form,
      docsId: props.current?.docsId,
      content: content.value
    };
    const saveOrUpdate = isUpdate.value ? updateDocs : addDocs;
    saveOrUpdate(docsData)
      .then((msg) => {
        loading.value = false;
        message.success(msg);
      })
      .catch((e) => {
        loading.value = false;
        message.error(e.message);
      });
  };

  // 监听文档 id 变化
  watch(
    () => props.current?.docsId,
    () => {
      content.value = props.current?.content + '';
      isUpdate.value = true;
    }
  );
</script>

<script lang="ts">
  export default {
    name: 'Markdown'
  };
</script>
<style lang="less" scoped>
  .sys-category-table :deep(.ant-table-body) {
    overflow: auto !important;
    overflow: overlay !important;
  }

  .sys-category-table :deep(.ant-table-pagination.ant-pagination) {
    padding: 0 4px;
    margin-bottom: 0;
  }

  .docs-sumbit {
    margin: 10px 0;
  }
</style>
