<template>
  <PageWrapper title="实时定位链接" contentFullHeight fixedHeight contentBackground>
    <template #extra>
      <a v-show="modeValue == 'htmlmixed'" style="height: 20px;width: 200px;background-color: #0a8fe9;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;color: white" href="#mao">定位</a>
      <a v-show="modeValue == 'page'" style="height: 20px;width: 200px;background-color: #0a8fe9;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;color: white" href="#mao2">定位</a>
      <a-space size="middle">
        <a-button type="dashed"  @click="handleModeChange('htmlmixed')">html代码</a-button>
        <a-button type="dashed" @click="handleModeChange('page')">网页原样式</a-button>
        <a-button type="dashed" @click="handleModeChange('pageUrl')">网页地址</a-button>
      </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="valueHtml"></div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { nextTick, ref,onMounted } from 'vue';
import { CodeEditor } from '/@/components/CodeEditor';
import { PageWrapper } from '/@/components/Page';
import { html_beautify } from 'js-beautify'
import {RadioButton, Radio, Space, Modal } from 'ant-design-vue';
import {defHttp} from '/@/utils/http/axios';
import {useRoute} from "vue-router";
const route = useRoute();
const objectSite = ref(route.params.site)
let str = objectSite.value+"";
let link =  ref();
let errorMsg =  ref();
let flag =  ref(true);
let id = str
const jsonData =
  '{"name":"BeJson","url":"http://www.xxx.com","page":88,"isNonProfit":true,"address":{"street":"科技园路.","city":"江苏苏州","country":"中国"},"links":[{"name":"Google","url":"http://www.xxx.com"},{"name":"Baidu","url":"http://www.xxx.com"},{"name":"SoSo","url":"http://www.xxx.com"}]}';

const htmlData = ref("");
const modeValue = ref('htmlmixed');
const value = ref();
const valueHtml = ref();
const scrollable = ref();
const href = ref();
const hrefPage = ref();

onMounted(()=>{
  defHttp.get({
    url:'/openai/listLink?id='+id,
    timeout:1000000,
  }).then((res)=>{
    console.log(res)
    htmlData.value = res.doc;
    value.value = html_beautify(htmlData.value)
    valueHtml.value = html_beautify(htmlData.value)
    nextTick(()=>{
      setTimeout(function() {
          let htmlCode = document.getElementById("htmlCode")
          let innerHTMLCode = htmlCode.innerHTML;
          href.value = res.url
          hrefPage.value = res.source
          innerHTMLCode = innerHTMLCode.replaceAll("amp;","")
          innerHTMLCode = innerHTMLCode.replaceAll(res.url,"<span id='mao' style='background: yellow;border-style: solid;border-color: red;border-width: 2px;padding: 5px'>"+res.url+"</span>");
          document.getElementById("htmlCode").innerHTML = innerHTMLCode;

          let htmlPage = document.getElementById("htmlPage");
          let innerHTMLPage = htmlPage.innerHTML;

          innerHTMLPage = innerHTMLPage.replaceAll("amp;","");

          const startIndex = innerHTMLPage.indexOf(res.url)

          console.log("=============")
          console.log(startIndex)
          let index = 0;
          for (let i = startIndex; i > 0 ; i--) {
             const result = innerHTMLPage.substring(i, i+1); // 截取子串
               if(result == "<"){
                 console.log(result)
                 index = i
                 break
               }
          }
          let end = 0;
          let ll = 0;
          for (let j = startIndex; j < innerHTMLPage.length ; j++) {
            const result = innerHTMLPage.substring(j, j+1); // 截取子串
            if(result == ">"){
              if(ll == 1){
                console.log(result)
                console.log(j)
                end = j;
                break
              }
              ll = 1
              continue
            }
          }
          const resultRR = innerHTMLPage.substring(index, end+1); // 截取子串
          console.log(resultRR)

          innerHTMLPage = innerHTMLPage.replaceAll(resultRR,"<span id='mao2' title='"+res.url+"' style='background: yellow;border-style: solid;border-color: red;border-width: 2px;padding: 5px'>"+resultRR+"</span>"+"<span title='"+res.url+"' style='background: yellow;border-style: solid;border-color: red;border-width: 2px;padding: 5px'>"+res.url+"</span>");
          document.getElementById("htmlPage").innerHTML = innerHTMLPage;

        }, 500); // 定时时间
    })
  })
})
function findOnPage(){
  var elementById = document.getElementById("htmlCode");
  const div = document.getElementsByClassName('CodeMirror-scroll')[0]
  const sol = 1000;
  div.scrollTop = sol
}
const lock = () => {
  window.open(hrefPage.value, "_blank");
}
function handleModeChange(mode:string) {
    console.log(mode)
    if (mode === 'page') {
      modeValue.value = 'page'
      return;
    }
    if (mode === 'htmlmixed') {
      modeValue.value = 'htmlmixed'
    }
    if (mode === 'pageUrl') {
      lock()
      return;
    }
}
function showData() {
    Modal.info({ title: '编辑器当前值', content: value.value });
  }
</script>
<style scoped>
/*::v-deep .CodeMirror-scroll > div{
  min-height: 81850px;
  margin-left: 31px;
  margin-bottom: -7px;
  border-right-width: 43px;
  padding-right: 7px;
  padding-bottom: 0px;
}*/
::v-deep   .CodeMirror {
  font-family: monospace;
  height: 90vh;
  color: black;
  direction: ltr;
}
#htmlPage {
  height: 90vh;
  overflow-y: scroll;
}
</style>
