<template>
  <PageWrapper v-if="!flag" title="实时定位链接" contentFullHeight fixedHeight contentBackground>
    <template #extra>
      <a-space size="middle">
        <a-button type="dashed" @click="handleModeChange('page')">网页原样式</a-button>
        <a-button type="dashed" @click="handleModeChange('pageUrl')">网页地址</a-button>
        <a-dropdown>
          <a-button type="primary"> 定位</a-button>
          <template #overlay>
            <a-menu >
              <a-menu-item :key="it" v-for="it in errorMsg" v-html="it">
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-space>
    </template>
    <CodeEditor v-show="modeValue == 'htmlmixed'" ref="scrollable" id="htmlCode"  v-model:value="value" :code="value" :mode="modeValue" />
    <div v-show="modeValue == 'page'" id="htmlPage">
      <div v-html="retMsg"></div>
    </div>
  </PageWrapper>
  <div v-if="flag" style="position: fixed;background-color: white;border-radius: 8px;padding: 10px;z-index: 10000;height: 100vh;width: 100%">
    <div style="width: 100%;text-align: center;margin-top: 30vh">
      <a-space>
        <a-spin size="large" />
      </a-space>
      <div style="margin: 10vh;font-size: 20px">
        抓取数据中...
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {defHttp} from '/@/utils/http/axios';
import { PageWrapper } from '/@/components/Page';
import type { MenuProps } from 'ant-design-vue';
import { ref,watch} from 'vue'
import { useRoute } from 'vue-router'
import {onMounted} from "vue";
const route = useRoute();
const objectSite = ref(route.params.site)
const html = ref()
const retMsg = ref()
const url = ref()
const value1 = ref<string>('page');
let str = objectSite.value+"";
let link =  ref();
let errorMsg =  ref([]);
let id = str
const htmlData = ref("");
const modeValue = ref('page');
const value = ref();
const valueHtml = ref();
const scrollable = ref();
const href = ref();
const hrefPage = ref();
let flag =  ref(true);
onMounted(()=>{
  defHttp.get({
    url:'/openai/list?id='+id,
    timeout:1000000,
  }).then((res)=>{
    retMsg.value = res.byId.retMsg
    url.value = res.byId.source
    errorMsg.value = res.errorMsg
    flag.value = false
  })
})

const lock = (it) => {
  const element = document.querySelector("[title='"+it+"']");
  const elementPosition = element.getBoundingClientRect().top;
  const div = document.getElementById('htmlPage')
  const sol = elementPosition;
  console.log(sol)
  div.scrollTop = sol
}

const lockUrl = () => {
  window.open(url.value, "_blank");
}

watch(value1, (newName, oldName) => {
  console.log("newName", newName);
  if(newName == "url"){
    window.open(url.value, "_blank");
  }
});
const onClick: MenuProps['onClick'] = ({ key }) => {
};
function handleModeChange(mode:string) {
  console.log(mode)
  if (mode === 'page') {
    modeValue.value = 'page'
    return;
  }
  if (mode === 'htmlmixed') {
    modeValue.value = 'htmlmixed'
  }
  if (mode === 'pageUrl') {
    lockUrl()
    return;
  }
}

</script>

<style scoped>
pre {
  width: 100%;
  overflow-x: auto;
}
pre code {
  white-space: pre-wrap;
}
#components-affix-demo-target {
  height: 100vh;
  overflow-y: scroll;
}
#htmlPage {
  height: 90vh;
  overflow-y: scroll;
}
</style>
