<template>
  <PageWrapper title="实时定位链接" contentFullHeight fixedHeight contentBackground>
    <template #extra>
      <span v-show="modeValue == 'htmlmixed'">
        <a-dropdown >
          <a-button type="primary"> 定位</a-button>
          <template #overlay>
            <a-menu >
              <a-menu-item :key="it" v-for="it in AurlList" >
                <span style="text-align: center" v-html="it"></span>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </span>
      <span v-show="modeValue == 'page'">
        <a-dropdown >
          <a-button type="primary"> 定位</a-button>
          <template #overlay>
            <a-menu >
              <a-menu-item :key="it" v-for="it in BurlList" >
                <span style="text-align: center" v-html="it"></span>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </span>
      <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-if="modeValue == 'htmlmixed'" ref="scrollable" id="htmlCode"  v-model:value="value" :code="value" :mode="modeValue" />
    <div v-if="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();
const AurlList = ref();
const BurlList = ref();
const urlList = ref();

onMounted(()=>{
  defHttp.get({
    url:'/homepageouterlink/homePageOuterLink/queryByIdErr?id='+id,
    timeout:1000000,
  }).then((res)=>{
    console.log(res)
    value.value = html_beautify(res.retMsg)
    valueHtml.value = html_beautify(res.retMsg)
    AurlList.value = res.aurlList
    BurlList.value = res.burlList
    urlList.value = res.urlList
    nextTick(()=>{
      setTimeout(function() {
        let htmlCode = document.getElementById("htmlCode")
        let innerHTMLCode = htmlCode.innerHTML;
        href.value = res.url
        hrefPage.value = res.source
        for(let z = 0;z < urlList.value.length;z++){
          try {
            if(urlList.value[z] === 'stylesheet'){
              continue
            }
            innerHTMLCode = innerHTMLCode.replaceAll("amp;","")
            innerHTMLCode = innerHTMLCode.replaceAll(urlList.value[z],"<span id='Amao"+z+"' style='background: yellow;border-style: solid;border-color: red;border-width: 2px;padding: 5px'>"+urlList.value[z]+"</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)
            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
              }
            }
            innerHTMLPage = innerHTMLPage.replaceAll(urlList.value[z],"<span id='Bmao"+z+"' style='background: yellow;border-style: solid;border-color: red;border-width: 2px;padding: 5px'>"+urlList.value[z]+"</span>");
            document.getElementById("htmlPage").innerHTML = innerHTMLPage;
          }catch (e){
            console.log(e)
          }
        }

      }, 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>
