<template>
  <div>
    <div class="top">
      <div>
        脚本语言:
        <Select :defaultValue="'JavaScript'" style="width: 200px; margin-left: 5px">
          <SelectOption value="JavaScript">JavaScript(ECMAScript 5)</SelectOption>
        </Select>
        <AIcon type="ExpandOutlined" style="margin-left: 20px" @click="toggle" />
      </div>
    </div>
    <div class="edit" ref="el">
      <MonacoEditor language="javascript" style="height: 100%" theme="vs" v-model:modelValue="editorValue" />
    </div>
    <div class="bottom">
      <div style="width: 49.5%">
        <div class="bottom-title">
          <div class="bottom-title-text">模拟输入</div>
          <div class="bottom-title-topic">
            <template v-if="productStore.current.transportProtocol === 'MQTT'">
              <div style="margin-right: 5px">Topic:</div>
              <AutoComplete
                placeholder="请输入Topic"
                style="width: 300px"
                :options="topicList"
                :allowClear="true"
                :filterOption="(inputValue: any, option: any) => option!.value.indexOf(inputValue) !== -1"
                v-model:value="topic"
              />
            </template>
            <template v-else>
              <div style="margin-right: 5px">URL:</div>
              <Input placeholder="请输入URL" v-model:value="url" style="width: 300px" />
            </template>
          </div>
        </div>
        <Textarea
          :rows="5"
          placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串"
          style="margin-top: 10px"
          v-model:value="simulation"
        />
      </div>
      <div style="width: 49.5%">
        <div class="bottom-title">
          <div class="bottom-title-text">运行结果</div>
        </div>
        <Textarea :autoSize="{ minRows: 5 }" :style="resStyle" v-model:value="result" />
      </div>
    </div>
  </div>
  <div style="margin-top: 10px; margin-left: 10px">
    <PermissionButton
      type="primary"
      hasPermission="device/Instance:update"
      :loading="loading"
      :disabled="isDisabled"
      @click="debug()"
      :tooltip="{
        title: '需输入脚本和模拟数据后再点击'
      }"
    >
      调试
    </PermissionButton>
    <PermissionButton
      hasPermission="device/Instance:update"
      :loading="loading"
      :disabled="!isTest"
      @click="save()"
      :style="{ marginLeft: '10px' }"
      :tooltip="{
        title: isTest ? '' : '请先调试'
      }"
    >
      保存
    </PermissionButton>
  </div>
</template>

<script setup lang="ts" name="DataAnalysis">
  import { PermissionButton } from '@jdlinker/ui';
  import { useFullscreen } from '@vueuse/core';
  import { useProductStore } from '@jdlinker/func';
  import { getProtocal, productCode, saveProductCode, testCode } from '../../../../../api/device/instance';
  // @ts-ignore
  import { AutoComplete, message, MonacoEditor } from 'linker-ui-components';
  import { isBoolean } from 'lodash-es';
  import { computed, onMounted, ref } from 'vue';
  import { Input, Select, SelectOption, Textarea } from 'ant-design-vue';

  const defaultValue =
    '//解码函数\r\nfunction decode(context) {\r\n    //原始报文\r\n    var buffer = context.payload();\r\n    // 转为json\r\n    // var json = context.json();\r\n    //mqtt 时通过此方法获取topic\r\n    // var topic = context.topic();\r\n\r\n    // 提取变量\r\n    // var topicVars = context.pathVars("/{deviceId}/**",topic)\r\n    //温度属性\r\n    var temperature = buffer.getShort(3) * 10;\r\n    //湿度属性\r\n    var humidity = buffer.getShort(6) * 10;\r\n    return {\r\n        "temperature": temperature,\r\n        "humidity": humidity\r\n    };\r\n}\r\n';

  const el = ref<HTMLElement | null>(null);
  const { toggle } = useFullscreen(el);
  const productStore = useProductStore();

  const url = ref<string>('');
  const topic = ref<string>('');
  const topicList = ref([]);
  const simulation = ref<string>('');
  const resultValue = ref<any>({});
  const loading = ref<boolean>(false);
  const isTest = ref<boolean>(false);
  const editorValue = ref<string>('');

  const resStyle = computed(() =>
    isBoolean(resultValue.value.success)
      ? {
          'margin-top': '10px',
          'border-color': resultValue.value.success ? 'green' : 'red'
        }
      : {
          'margin-top': '10px'
        }
  );

  const isDisabled = computed(() => simulation.value === '');

  const result = computed(() =>
    resultValue.value.success ? JSON.stringify(resultValue.value.outputs?.[0]) : resultValue.value.reason
  );

  //获取topic
  const getTopic = async () => {
    const res: any = await getProtocal(productStore.current.messageProtocol, productStore.current.transportProtocol);
    if (res.status === 200) {
      topicList.value = res.result.routes?.map((items: any) => ({
        value: items.topic
      }));
    }
  };
  //获取产品解析规则
  const getProductCode = async () => {
    const res: any = await productCode(productStore.current.id);
    if (res.status === 200) {
      if (res.result) {
        editorValue.value = res.result?.configuration?.script;
      } else {
        editorValue.value = defaultValue;
      }
    }
  };
  //调试
  const test = async (dataTest: any) => {
    loading.value = true;
    const res = await testCode(dataTest);
    if (res.status === 200) {
      loading.value = false;
      resultValue.value = res?.result;
    } else {
      loading.value = false;
    }
  };

  //保存产品解析规则
  const save = async () => {
    const item = {
      provider: 'jsr223',
      configuration: {
        script: editorValue.value,
        lang: 'javascript'
      }
    };
    const res = await saveProductCode(productStore.current.id, item);
    if (res.status === 200) {
      message.success('保存成功');
      getProductCode();
    }
  };

  const debug = () => {
    if (productStore.current.transportProtocol === 'MQTT') {
      if (topic.value !== '') {
        test({
          headers: {
            topic: topic.value
          },
          configuration: {
            script: editorValue.value,
            lang: 'javascript'
          },
          provider: 'jsr223',
          payload: simulation.value
        });
        isTest.value = true;
      } else {
        message.error('请输入topic');
      }
    } else {
      if (url.value !== '') {
        test({
          headers: {
            url: url.value
          },
          provider: 'jsr223',
          configuration: {
            script: editorValue.value,
            lang: 'javascript'
          },
          payload: simulation.value
        });
        isTest.value = true;
      } else {
        message.error('请输入url');
      }
    }
  };

  onMounted(() => {
    getProductCode();
    getTopic();
  });
</script>

<style scoped lang="less">
  .top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .edit {
    height: 550px;
    border: 1px solid #dcdcdc;

    .edit-only {
      height: 550px;
      width: 97%;
      position: absolute;
      z-index: 1;
      background-color: #eeeeee70;
      cursor: not-allowed;
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #f7f7f7;

    .bottom-title {
      display: flex;
      justify-content: space-between;

      .bottom-title-text {
        font-weight: 600;
        font-size: 14px;
        margin-top: 10px;
      }

      .bottom-title-topic {
        display: flex;
        align-items: center;
      }
    }
  }
</style>
