<template>
  <div>
    <div>
      <Typography>
        <TypographyParagraph>
          <blockquote class="bg-gray-50">{{ useBlockContent }}</blockquote>
        </TypographyParagraph>
      </Typography>
    </div>
    <div>
      <Tabs type="card" v-model:active-key="activeKey" @change="handleSwitchTsl">
        <Tabs.TabPane :key="FunctionType.PROPERTIES" tab="属性" />
        <Tabs.TabPane :key="FunctionType.SERVICE" tab="服务" />
        <!-- <Tabs.TabPane :key="FunctionType.EVENTS" tab="事件" /> -->
        <template #tabBarExtraContent>
          <Button @click="handlePremitter">
            <template #icon>
              <SortAscendingOutlined />
            </template>
            格式化
          </Button>
          <Button class="ml-2" @click="handleCopy">
            <template #icon>
              <CopyOutlined />
            </template>
            copy
          </Button>
        </template>
      </Tabs>
    </div>
    <div class="relative">
      <Spin :spinning="loading">
        <div id="jsoneditor" ref="jsoneditorEl"></div>
        <div class="absolute top-0 left-0 w-full h-full"></div>
      </Spin>
    </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, Tabs, Spin } from 'ant-design-vue';
  import { FunctionType } from './config';
  import useCommon from '../hook/useCommon';
  import { DeviceRecord } from '/@/api/device/model/deviceModel';
  import { getModelTsl } from '/@/api/device/modelOfMatter';

  const props = defineProps<{
    record: DeviceRecord;
  }>();

  const loading = ref(false);

  const { createMessage } = useMessage();

  const { useBlockContent } = useCommon();

  const jsonValue = ref();

  const jsonInstance = ref<{
    set: (value?: Recordable) => void;
    get: () => Recordable;
  }>();

  const jsoneditorEl = ref<HTMLDivElement>();

  const activeKey = ref(FunctionType.PROPERTIES);

  onMounted(() => {
    nextTick(() => {
      let options = {
        mode: 'code',
        mainMenuBar: false,
        statusBar: false,
      };
      let editor = new jsoneditor(jsoneditorEl.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();
  };

  const handlePremitter = () => {
    const value = unref(jsonInstance)?.get();
    return unref(jsonInstance)?.set(value);
  };

  const handleSwitchTsl = async (functionType: FunctionType) => {
    try {
      loading.value = true;
      const record = await getModelTsl({ deviceProfileId: props.record.id, functionType });
      jsonInstance.value?.set(record);
    } catch (error) {
    } finally {
      loading.value = false;
    }
  };

  onMounted(() => {
    activeKey.value = FunctionType.PROPERTIES;
    handleSwitchTsl(FunctionType.PROPERTIES);
  });

  defineExpose({
    getFormData,
    resetFormData,
  });
</script>

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