<template>
  <div>
    <Tooltip :title="getTitle" placement="bottom" :mouseEnterDelay="0.5">
      <span>
        <a-dropdown :trigger="['click']" :placement="bottom">
          <CloudOutlined
            :style="{
              fontSize: '18px',
            }"
            @click="getStateByGeomidAndCaseNo"
          />
          <template #overlay>
            <a-menu>
              <a-menu-item>
                图斑ID：{{ getGeomid }}
                <a-button :style="{ position: 'absolute', right: '12px' }" type="link" @click="copyToClipboard(getGeomid)">复制</a-button>
              </a-menu-item>
              <a-menu-item>
                案件编号：{{ getCaseno }}
                <a-button type="link" @click="copyToClipboard(getCaseno)">复制</a-button>
              </a-menu-item>
              <a-menu-item>
                当前状态：
                <a-tag v-if="getState == 0" color="red">未查询</a-tag>
                <a-tag v-if="getState == 1" color="green">查询中</a-tag>
                <a-tag v-if="getState == 2" color="blue">查询结束</a-tag>
                <a-button 
                  v-if="getState == 2" 
                  :style="{ position: 'absolute', right: '16px', fontSize: '14px' }" 
                  type="primary" 
                  size="small" 
                  @click="handCloudQuery"
                >
                  查看
                </a-button>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </span>
    </Tooltip>
    <!-- 云查询结果 -->
    <!-- <a-modal
      v-model:open="open"
      :footer="false"
      @cancel="closeCloudQueryModal"
      :width="compare ? '1020px' : '510px'"
      style="top: 20px"
      :destroyOnClose="true"
    >
      <CloudQueryContent @changeCompare="changeCompare"/>
    </a-modal> -->
  </div>
</template>
<script lang="ts" setup>
  import { computed, unref, ref } from 'vue';
  import { Tooltip } from 'ant-design-vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { CloudOutlined } from '@ant-design/icons-vue';
  import { useCloudQueryStore } from '@/store/modules/cloudquery';
  // import { LoadCloudQueryByCaseNo } from '@/api/demo/cloudQuery';
  import { getAppEnvConfig } from '@/utils/env';
  // import CloudQueryContent from '@/components/CloudQueryContent/index.vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import axios from 'axios';

  const { VITE_GLOB_API_URL } = getAppEnvConfig();

  const { t } = useI18n();
  const getTitle = computed(() => {
    return t('layout.header.cloud');
  });

  const cloudQueryStore = useCloudQueryStore();
  const getGeomid = computed(() => {
    return cloudQueryStore.geomid;
  });
  const getCaseno = computed(() => {
    return cloudQueryStore.caseno;
  });
  const nowState = ref(0);
  const getState = computed(() => {
    return nowState.value;
  });

  function getStateByGeomidAndCaseNo(){
    LoadCloudQueryByCaseNo({
      geomid: cloudQueryStore.geomid,
      caseno: cloudQueryStore.caseno,
    }).then((res) =>{
      if(res) {
        nowState.value = res.state;
      } else {
        nowState.value = 1;
      }
    });
  };

  const compare = ref(false);
  const open = ref(false);
  const changeCompare = (value) => {
    compare.value = value;
  };
  const closeCloudQueryModal = () => {
    open.value = false;
    compare.value = false;
  }
  function handCloudQuery() {
    open.value = true;
  }

  // 复制到剪贴板
  const { createMessage } = useMessage();
  const copyToClipboard = async (record) => {
    try {
      await navigator.clipboard.writeText(record);
      createMessage.success('文本已复制到剪贴板');
    } catch (err) {
      createMessage.error('无法复制文本');
    }
  };
</script>

<style lang="less" scoped></style>
