<template>
  <div>
    <div>
      <Typography>
        <TypographyParagraph>
          <blockquote style="background: #f2f2f2">{{ useBlockContent }}</blockquote>
        </TypographyParagraph>
      </Typography>
    </div>
    <div style="display: flex; justify-content: space-between; align-items: center">
      <div>模型内容</div>
      <div>
        <Button @click="handlePremitter">
          <template #icon>
            <SortAscendingOutlined />
          </template>
          格式化
        </Button>
        <Button class="ml-2" @click="handleCopy">
          <template #icon>
            <CopyOutlined />
          </template>
          copy
        </Button>
      </div>
    </div>
    <div class="mt-4">
      <div id="jsoneditor" ref="jsoneditorRef"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, onMounted, nextTick } from 'vue';
  import { CopyOutlined, SortAscendingOutlined } from '@ant-design/icons-vue';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';
  import jsoneditor from 'jsoneditor';
  import 'jsoneditor/dist/jsoneditor.min.css';
  import { Button, Typography, TypographyParagraph } from 'ant-design-vue';
  import { defaultTslContent } from './config';
  import useCommon from '../hook/useCommon';

  const { createMessage } = useMessage();

  const { useBlockContent } = useCommon();

  const jsonValue = ref(defaultTslContent);

  const jsonInstance = ref();

  const jsoneditorRef = ref();

  onMounted(() => {
    nextTick(() => {
      let options = {
        mode: 'code',
        mainMenuBar: false,
        statusBar: false,
      };
      let editor = new jsoneditor(jsoneditorRef.value, options);
      editor.set(jsonValue.value);
      jsonInstance.value = editor;
    });
  });

  const { clipboardRef, copiedRef } = useCopyToClipboard();

  const handleCopy = () => {
    try {
      const valueRef = unref(jsonInstance).get();
      const value = JSON.stringify(unref(valueRef));
      if (!value) {
        createMessage.warning('请输入要拷贝的内容！');
        return;
      }
      clipboardRef.value = value;
      if (unref(copiedRef)) {
        createMessage.success('复制成功！');
      }
    } catch (e) {
      console.log(e);
    }
  };

  const getFormData = () => {
    const value = unref(jsonInstance).get();
    if (!value) return;
    return value;
  };

  const resetFormData = () => {
    unref(jsonInstance).set(defaultTslContent);
  };

  const handlePremitter = () => {
    const value = unref(jsonInstance).get();
    return unref(jsonInstance).set(value);
  };
  defineExpose({
    getFormData,
    resetFormData,
  });
</script>

<style lang="less" scope>
  #jsoneditor {
    width: 100%;
    height: 450px;
  }
</style>