<template>
  <div class="modal-content-div">
    <div class="title-text">
      {{ compare ? '云查询结果(对比模式)' : '云查询结果' }}
      <Icon
        class="split-button"
        style="font-size: 20px"
        icon="bi:layout-split"
        @click="changeCompare"
      />
    </div>
    <div style="display: flex; width: 100%">
      <div :style="`display: block; width: ${compare ? '50%' : '100%'};`">
        <CloudQueryModal :info="info" />
      </div>
      <div style="display: block; width: 50%; margin-left: 20px" v-if="compare">
        <CloudQueryModal :info="info" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted, defineEmits, defineProps } from 'vue';
  import Icon from '@/components/Icon/Icon.vue';
  import CloudQueryModal from './CloudQueryModal/index.vue';
  import { useCloudQueryStore } from '@/store/modules/cloudquery';
  import { LoadCloudQueryById } from '@/api/demo/cloudQuery';

  const useCloudQuery = useCloudQueryStore();
  const props = defineProps(['cloudQueryContentRecord']);
  const emits = defineEmits(['changeCompare']);
  const compare = ref(false);
  const info = ref();
  const changeCompare = () => {
    compare.value = !compare.value;
    console.log('compare.value', compare.value);
    emits('changeCompare', compare.value);
  };
  onMounted(() => {
    // : '45febd6e-4f87-461a-a65d-f0284db6a356'
    let id = props.cloudQueryContentRecord?.queryId || useCloudQuery.getCloudQueryInfo.id;
    LoadCloudQueryById({ id }).then((res) => {
      let data = JSON.parse(res.receiveContent);
      if (typeof data == 'string') {
        data = JSON.parse(data);
      }
      console.log(47, data);
      info.value = data;
    });
  });
</script>

<style lang="scss" scoped>
  .modal-content-div {
    padding: 53px 20px 10px 20px;
    width: 100%;
    .title-text {
      display: flex;
      justify-content: center;
      font-size: 18px;
      color: #2f83d9;
      text-decoration: underline;
      font-weight: 600;
      position: relative;
    }
    .split-button {
      font-size: 20px;
      display: inline-flex;
      position: absolute;
      right: 8px;
      top: 2px;
      color: #000000a3;
      cursor: pointer;
    }
  }
</style>
