<template>
  <div>
    <!-- <a-tooltip>
      <template #title>云查询记录</template>
      <CloudOutlined
        :style="{
          fontSize: '18px',
        }"
        @click="handleOpenTable"
      />
    </a-tooltip> -->
    
    <!-- 云查询记录 -->
    <a-modal
      v-model:open="openTable"
      title="云查询记录"
      :footer="false"
      :width="'1020px'"
      style="top: 30px;"
      :destroyOnClose="true"
    >
      <BasicTable @register="registerTable">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'state'">
            <a-tag color="red" v-if="record.state == 0">排队中</a-tag>
            <a-tag color="green" v-if="record.state == 1">查询中</a-tag>
            <a-tag color="blue" v-if="record.state == 2">查询结束</a-tag>
          </template>
          <template v-if="column.key === 'action' && record.state == 2">
            <a-button
              type="link"
              @click="handCloudQuery(record)"
            >
              查看
            </a-button>
          </template>
        </template>
      </BasicTable>
    </a-modal>
    <!-- 云查询结果 -->
    <a-modal
      v-model:open="openResult"
      :footer="false"
      @cancel="closeCloudQueryModal"
      :width="compare ? '1020px' : '510px'"
      style="top: 20px"
      :destroyOnClose="true"
    >
      <CloudQueryContent @changeCompare="changeCompare" :cloudQueryContentRecord="cloudQueryContentRecord" />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { computed, unref, ref, onMounted } from 'vue';
  import { Tooltip } from 'ant-design-vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { BasicColumn, FormSchema } from '@/components/Table';
  import { CloudOutlined } from '@ant-design/icons-vue';
  import { useCloudQueryStore } from '@/store/modules/cloudquery';
  import { LoadCloudQueryAll } from '@/api/demo/cloudQuery';
  import CloudQueryContent from '@/components/CloudQueryContent/index.vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import axios from 'axios';

  // 云查询记录----------------------------------------------
  // 云查询记录-table
  const columns: BasicColumn[] = [
    {
      title: 'id',
      dataIndex: 'id',
      ifShow: false,
    },
    {
      title: 'queryId',
      dataIndex: 'queryId',
      ifShow: false,
    },
    {
      title: '线索编号',
      dataIndex: 'caseNo',
      width: 150,
    },
    {
      title: '线索ID',
      dataIndex: 'geomId',
       width: 100,
    },
    {
      title: '当前状态',
      dataIndex: 'state',
      width: 80,
    },
    {
      title: '区县',
      dataIndex: 'countyName',
     ifShow: false,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 150,
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 100,
    },
  ];
  // 云查询记录-搜索
  const searchFormSchema: FormSchema[] = [
    {
      field: 'caseNo',
      label: '线索编号',
      component: 'Input',
      colProps: { span: 8 },
    },
    {
      field: 'geomId',
      label: '线索ID',
      component: 'Input',
      colProps: { span: 8 },
    },
  ];
  const openTable = ref(false);
  function handleOpenTable(){
    openTable.value = true;
  }
  // 云查询记录-表格
  const [registerTable, { reload }] = useTable({
    api: LoadCloudQueryAll,
    columns: columns,
    title: '云查询记录',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    showIndexColumn: true,
    useSearchForm: true,
    canResize: true,
    bordered: true,
    showTableSetting: true,
    handleSearchInfoFn(info) {
      return info;
    },
  });

  // 云查询结果----------------------------------------------
  const compare = ref(false);
  const openResult = ref(false);
  const changeCompare = (value) => {
    compare.value = value;
  };
  const closeCloudQueryModal = () => {
    openResult.value = false;
    compare.value = false;
  }
  const cloudQueryContentRecord = ref();
  function handCloudQuery(record) {
    cloudQueryContentRecord.value = record;
    openResult.value = true;
  }

  // 读取Cookie的函数
  const cloudQueryStore = useCloudQueryStore();
  function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

  // onMounted(()=>{
  //   cloudQueryStore.setGeomid(getCookie("geomid"));
  //   cloudQueryStore.setCaseno(getCookie("caseno"));
  //   if(cloudQueryStore.geomid != null && cloudQueryStore.caseno != null) {
  //     const beforeId = getCookie("beforeId");
  //     cloudQueryStore.setBeforeId(beforeId);
  //     cloudQueryStore.setCloudQueryInfo({ id: beforeId });
  //     cloudQueryStore.setIdentification(true);
  //   }
  // });
</script>
<style lang="less" scoped></style>
