<template>
  <div>
    <div>
      <Typography>
        <TypographyParagraph>
          <blockquote style="background: #f2f2f2">{{ blockContent }}</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';

  const { createMessage } = useMessage();
  const blockContent = `物模型是对设备在云端的功能描述，包括设备的属性、服务和事件。物联网平台通过定义一种物的描述语言来描述物模型，称之为 TSL（即 Thing 
Specification Language），采用 JSON 格式，您可以根据 TSL 组装上报设备的数据。您可以导出完整物模型，用于云端应用开发；您也可以只导出
精简物模型，配合设备端 SDK 实现设备开发。`;
  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>