let sendButton = null //发送按钮
let sendTextarea = null   //文本域
let chatZone = null   //内容显示的容器
let clickTabsList = []  //存储tabs选项,这是个二维数组
let clickTabsCount = 0   //此值记录回复的数量
let clickTabsIndex = null //此值记录的是点击的tab属于第几个回复的内容
let clickTabText = null   //选中的tabs中的文本内容


let interfaceEchoData=[]
let nowClickDocId=null





// let isAnswerButton = null
// let answerYes = null
// let answerNo = null
// let isAnswerYesButton = null
// let evEchoGood = null
// let evEchoBad = null










window.onload = function () {
    getElementFunc()    //加载获取元素



    getDiv()
    caluRemainWord()
}
function getElementFunc() {
    sendButton = document.querySelector('#sendButton')    //获取发送按钮元素
    sendTextarea = document.querySelector('#sentTextarea')    //获取文本域元素
    chatZone = document.querySelector('#chatZone')    //获取内容显示的容器
    sendButton.addEventListener('click', () => { sendFunc() })     //给发送按钮绑定click监听，回调sendFunc函数
   
    sendTextarea.addEventListener('keydown',(e)=>{
        if(e.key=='Enter'){
            e.preventDefault()
            sendFunc()
           
        }
    })
}

 async function sendFunc(){



    let sendText = sendTextarea.value //发送的文本内容取值
    console.log('发送的文本内容================>', sendText)

    if (sendText == '') {
        return
    }
    
    sendTextarea.value =''
    remainText.innerText=50
    let rightOption = document.createElement('div')   //创建要添加的div
    rightOption.className = "right"       //添加class类目
    rightOption.innerHTML = `<div class="right-text">${sendText}</div>` //要展示的发送内容添加到创建的div
    chatZone.appendChild(rightOption)   //向容器添加我们发送的内容（展示出来）

    interfaceRequest(sendText)

  

    




    console.log('interfaceEchoData[clickTabsCount]================>',clickTabsCount)

    if (interfaceEchoData[clickTabsCount].data==null) {
        noSearchContent()   //没有搜索到内容
    } else {
        yesSearchContent() //搜索到了内容
    }




}



 function interfaceRequest(sendText){
     console.log('=============执行了====================')
    

    let xhr=new XMLHttpRequest()
    
    let url=`https://zrzyt.hubei.gov.cn/apps/znwd/documentsSearch/docData?keyword=${sendText}`

    xhr.open('post',url,false)
    
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
   
    

    xhr.onload=()=>{
        if(xhr.status==200&&xhr.readyState==4){
            

            console.log('添加之前================>',interfaceEchoData)

            interfaceEchoData.push(JSON.parse(xhr.response))
            // interfaceEchoData[clickTabsCount]=JSON.parse(xhr.response)
            console.log('接口返回================>',interfaceEchoData[clickTabsCount].data)

            console.log('添加之后================>',interfaceEchoData)

          
        }
        
    }

    
    xhr.send()
    
    
    

    }
    














//没有搜索到内容
function noSearchContent() {
    console.log('执行此方法了')
    let leftOption = document.createElement('div')    //创建回复的div
    leftOption.className = 'left'
    leftOption.innerHTML =                              //回复的内容
        `  
                            <div class="isAnswer-no"  style="display:flex">
                                <span class="one">抱歉！没有能够帮到您。</span>
                                    <span class="two">您的问题我还没有学会但我已经记下啦，稍后我会尽快学习补充哦！</span>
                                    <span class="three"><a href="#"  target="_blank">您也可以使用全文检索进行查询 </a></span>
                            </div>
    `
    console.log(leftOption)
    chatZone.appendChild(leftOption)
    divScrollBottom()
    clickTabsCount++ 
}



//搜索到了内容
function yesSearchContent() {


    let tabs=``
    let dataLi=''
    for(let i=0;i<interfaceEchoData[clickTabsCount].data.length;i++){
        tabs=tabs+`<span class="tabs-option" id="tabsOption">${interfaceEchoData[clickTabsCount].data[i].classifyName}</span>`

        

    }
    for(let i=0;i<interfaceEchoData[clickTabsCount].data[0].smartSettingClassifyList.length;i++){
        let docId=String(interfaceEchoData[clickTabsCount].data[0].smartSettingClassifyList[i].docId)
        dataLi=dataLi+"<li id='dataLi'  onClick=\"dataliClickFunc('"+docId+"');\">"+interfaceEchoData[clickTabsCount].data[0].smartSettingClassifyList[i].docTitle+"</li>"
    }
   


    let leftOption = document.createElement('div')    //创建回复的div
    leftOption.className = 'left'
    leftOption.innerHTML =                              //回复的内容
        `  
    <div class="left-option">
            <div class="left-option-tabs">
                ${tabs}
             
               
            </div>
            <ul id="echoListUl">
               ${dataLi}
            </ul>
    </div>

    <div class="isAnswer">
    <div class="text">是你要找的答案吗？</div>
    <div class="button" id="isAnswerButton">
        <div class="yesAnswer">是</div>
        <div class="noAnswer">否</div>
    </div>
    </div>
                             <div class="isAnswer-yes" id="answerYes">

                                <div class="serviceEV">
                                    <div class="text">请对我们的服务做出评价</div>
                                    <div class="button" id="isAnswer-yes-button">
                                        <div class="good">
                                            <img src="//zrzyt.hubei.gov.cn/material/images/znwd/eval-true.png" alt="">
                                        </div>

                                        <div class="bad">
                                            <img src="//zrzyt.hubei.gov.cn/material/images/znwd/eval-false.png" alt="">
                                        </div>

                                    </div>
                                </div>

                                <div class="evEcho-good" id="evEcho-good"><span >谢您的评价，我会努力学习做的更好！</span></div>
                                
                                <div class="evEcho-bad" id="evEcho-bad">
                                    <span class="one">抱歉！没有能够帮到您。</span>
                                    <span class="two">您的问题我还没有学会但我已经记下啦，稍后我会尽快学习补充哦！</span>
                                    <span class="three"><a href="#"  target="_blank">您也可以使用全文检索进行查询 </a></span>
                                </div>
                            </div>

                            <div class="isAnswer-no" id="answerNo">
                                <span class="one">抱歉！没有能够帮到您。</span>
                                    <span class="two">您的问题我还没有学会但我已经记下啦，稍后我会尽快学习补充哦！</span>
                                    <span class="three"><a href="#"  target="_blank">您也可以使用全文检索进行查询 </a></span>
                            </div>
    `
    chatZone.appendChild(leftOption)
    tabsClick() //搜索到了，开始加载回复内容的tabs
    divScrollBottom()
}


function tabsClick() {
    let index = clickTabsCount
    clickTabsList[index] = document.querySelectorAll('#tabsOption')   //获取当前返回内容的tabs,返回一个数组
    clickTabsList[index][0].className = 'tabs-option-checked'         //给第一个tabs添加高亮class
    clickTabText = clickTabsList[index][0].innerText                  //默认将第一个tabs的文本存储起来
    //给所有tabs绑定click监听
    for (let i = 0; i < clickTabsList[index].length; i++) {
        clickTabsList[index][i].addEventListener('click', () => {
            for (let y = 0; y < clickTabsList[index].length; y++) {
                clickTabsList[index][y].className = 'tabs-option'     //先把所有的tabs设置为默认样式
            }
            clickTabsList[index][i].className = 'tabs-option-checked' //把当前点击的tabs设置为高亮样式
            clickTabText = clickTabsList[index][i].innerText          //将选择的tabs的文本内容存储



            clickTabsIndex = index + 1                                  //记录当前点击的tabs属于第几个回复的内容
            console.log(`当前点击的是回复的第${clickTabsIndex}个内容，文本是===================>`, clickTabText)
            tabClickDataEcho(index,i)   //点击之后的数据回显,index是第几个回复内容的数组下标，i是在当前点击的tabs在回复内容中的数组下标
        })
    }
    for (let i = 0; i < clickTabsList[index].length; i++) {
        clickTabsList[index][i].removeAttribute('id')   //清除已经挂载监听的tabs的id,避免后续重复挂载，导致紊乱
    }
    clickTabsCount++    //数量+1
    dataLiClick()   //加载回复的内容选项的点击效果
    clickIsAnswer()
    
}

function tabClickDataEcho(index,i){
    // index是第几个回复内容的数组下标，i是在当前点击的tabs在回复内容中的数组下标
  

    let info=interfaceEchoData[index].data[i].smartSettingClassifyList
    console.log('info============================>',info)
    let echoListUl=document.querySelectorAll('#echoListUl') //获取所有列表父级ul
    
    let dataLi=``
    for(let i=0;i<info.length;i++){
        console.log('docId======================>',info[i].docId)
        let docId=String(info[i].docId)
        dataLi=dataLi+"<li id='dataLi'  onClick=\"dataliClickFunc('"+docId+"');\">"+info[i].docTitle+"</li>"
    }

    echoListUl[index].innerHTML=dataLi  //赋值给对应的ul

    // dataLiClick()   //重新加载一次列表li的点击方法
   
}



function dataLiClick() {


    // let dataLi = document.querySelectorAll('#dataLi')    //获取所有的内容li,返回一个数组
    // console.log('所有的dataLi==================>',dataLi)
    // let allDataLi=[]
    // let allDataLiIndex=0
    // console.log('接口里面的所有数据====================>',interfaceEchoData)

    // for(let i=0;i<interfaceEchoData.length;i++){
    //     if(interfaceEchoData[i].data!=null){
    //         for(let y=0;y<interfaceEchoData[i].data.length;y++){
    //             for(let z=0;z<interfaceEchoData[i].data[y].smartSettingClassifyList.length;z++){
    //                 allDataLi[allDataLiIndex]=interfaceEchoData[i].data[y].smartSettingClassifyList[z]
    //                 allDataLiIndex++
    //             }
    //         }
    //     }
       
    // }   //获取所有li数据



   

    // for(let i=0;i<dataLi.length;i++){
       
    //     dataLi[i].removeEventListener("click",dataliClickFunc);
    // }


    // for (let i = 0; i < dataLi.length; i++) {
    //     nowClickDocId=dataLi[i].getAttribute('docId')
    //     console.log('docId=================>',nowClickDocId)
    //     dataLi[i].addEventListener('click',dataliClickFunc)
    // }




    // divScrollBottom()
    // clickIsAnswer()

}


function dataliClickFunc(docId){

    

    let allDataLi=[]
    let allDataLiIndex=0
    console.log('接口里面的所有数据====================>',interfaceEchoData)

    for(let i=0;i<interfaceEchoData.length;i++){
        if(interfaceEchoData[i].data!=null){
            for(let y=0;y<interfaceEchoData[i].data.length;y++){
                for(let z=0;z<interfaceEchoData[i].data[y].smartSettingClassifyList.length;z++){
                    allDataLi[allDataLiIndex]=interfaceEchoData[i].data[y].smartSettingClassifyList[z]
                    allDataLiIndex++
                }
            }
        }
       
    }   //获取所有li数据
            console.log('allDataLi===============================>',allDataLi)
            console.log('docId=================================>',docId)
            let clickLi=null
            let flag=true
            for(let y=0;y<allDataLi.length;y++){
                if(allDataLi[y].docId==docId&&flag==true){
                    clickLi=allDataLi[y]
                    flag=false
                }
            }
            let dataLiText = clickLi.docTitle //取当前点击的文本内容
            console.log('当前的li的文本==================>',dataLiText)
            let resDiv = document.createElement('div')    //创建点击回复内容后右侧展示的div
            resDiv.className = "right"       //添加class类目
            resDiv.innerHTML = `<div class="right-text">${dataLiText}</div>` //要展示的发送内容添加到创建的div
            chatZone.appendChild(resDiv)   //向容器添加
            dataLiClickLeftEcho(clickLi) //左侧回显内容
            divScrollBottom()
}


//点击左侧li后回复的内容
function dataLiClickLeftEcho(dataLi) {

    let resDiv = document.createElement('div')    //创建点击回复内容后右侧展示的div
    resDiv.className = "left"       //添加class类目
    resDiv.innerHTML = `
    <div class="dataLiEchoText">
    <div class="top">猜您是问：${dataLi.docTitle}</div>
    <div class="contentText">
        ${dataLi.docAbstract==null?'':dataLi.docAbstract}
    </div>
    <div class="checkOrigin">
    <a href="${dataLi.docUrl}" target="_blank">查看原文>></a>

    </div>
    </div>
    <div class="isAnswer">
    <div class="text">是你要找的答案吗？</div>
    <div class="button" id="isAnswerButton">
        <div class="yesAnswer">是</div>
        <div class="noAnswer">否</div>
    </div>
    </div>
    <div class="isAnswer-yes" id="answerYes">

                                 <div class="serviceEV">
                                    <div class="text">请对我们的服务做出评价</div>
                                    <div class="button" id="isAnswer-yes-button">
                                    <div class="good">
                                    <img src="//zrzyt.hubei.gov.cn/material/images/znwd/eval-true.png" alt="">
                                </div>
                                <div class="bad">
                                    <img src="//zrzyt.hubei.gov.cn/material/images/znwd/eval-false.png" alt="">
                                </div>
                                    </div>
                                </div>

                                <div class="evEcho-good" id="evEcho-good"><span >谢您的评价，我会努力学习做的更好！</span></div>
                                <div class="evEcho-bad" id="evEcho-bad">
                                    <span class="one">抱歉！没有能够帮到您。</span>
                                    <span class="two">您的问题我还没有学会但我已经记下啦，稍后我会尽快学习补充哦！</span>
                                    <span class="three"><a href="#"  target="_blank">您也可以使用全文检索进行查询 </a></span>
                                </div>
                            </div>

                            <div class="isAnswer-no" id="answerNo">
                                <span class="one">抱歉！没有能够帮到您。</span>
                                    <span class="two">您的问题我还没有学会但我已经记下啦，稍后我会尽快学习补充哦！</span>
                                    <span class="three"><a href="#"  target="_blank">您也可以使用全文检索进行查询 </a></span>
                            </div>
    ` //要展示的发送内容添加到创建的div
    chatZone.appendChild(resDiv)   //向容器添加
    clickIsAnswer()
}


// let answerIndex=0
// let answerLength=0
let buttonLength=0
function clickIsAnswer() {
   let isAnswerButton = document.querySelectorAll('#isAnswerButton')
   let answerYes = document.querySelectorAll('#answerYes')
   let answerNo = document.querySelectorAll('#answerNo')
   let isAnswerYesButton = document.querySelectorAll('#isAnswer-yes-button')
   let evEchoGood = document.querySelectorAll('#evEcho-good')
   let evEchoBad = document.querySelectorAll('#evEcho-bad')
   buttonLength=isAnswerButton.length-1
    for (let i = 0; i < isAnswerButton.length; i++) {
        isAnswerButton[i].children[0].addEventListener('click', () => {
            isAnswerButton[i].children[1].style.display = 'none'
            answerYes[i].style.display = 'flex'
           
            if(i==buttonLength){
                console.log('buttonLength=====================>',buttonLength)
                console.log('=====================================')
                console.log(isAnswerButton)
                console.log('=====================================')
                divScrollBottom()
            }
        })
        isAnswerButton[i].children[1].addEventListener('click', () => {
            isAnswerButton[i].children[0].style.display = 'none'
            answerNo[i].style.display = 'flex'
            if(i==buttonLength){
                console.log('buttonLength=====================>',buttonLength)
                divScrollBottom()
            }
        })
        isAnswerYesButton[i].children[0].addEventListener('click', () => {

            isAnswerYesButton[i].children[1].style.display = 'none'
            evEchoGood[i].style.display = 'block'
            if(i==buttonLength){
                console.log('buttonLength=====================>',buttonLength)
                divScrollBottom()
            }
        })
        isAnswerYesButton[i].children[1].addEventListener('click', () => {

            isAnswerYesButton[i].children[0].style.display = 'none'
            evEchoBad[i].style.display = 'flex'
            if(i==buttonLength){
                console.log('buttonLength=====================>',buttonLength)
                divScrollBottom()
            }
        })




    }
    // answerLength=isAnswerButton.length-1
    // for (let i = 0; i < isAnswerButton.length; i++) {
    //     isAnswerButton[i].children[0].removeEventListener('click',isAnswerButtonOne)
    //     isAnswerButton[i].children[1].removeEventListener('click',isAnswerButtonTwo)
    //     isAnswerYesButton[i].children[0].removeEventListener('click',isAnswerYesButtonOne)
    //     isAnswerYesButton[i].children[1].removeEventListener('click',isAnswerYesButtonTwo)
    // }


    // for (let i = 0; i < isAnswerButton.length; i++) {
    //     answerIndex=i
    //     isAnswerButton[i].children[0].addEventListener('click',isAnswerButtonOne)
    //     isAnswerButton[i].children[1].addEventListener('click',isAnswerButtonTwo)
    //     isAnswerYesButton[i].children[0].addEventListener('click',isAnswerYesButtonOne)
    //     isAnswerYesButton[i].children[1].addEventListener('click',isAnswerYesButtonTwo)
    // }

}


// function isAnswerButtonOne(){
//     isAnswerButton[answerIndex].children[1].style.display = 'none'
//     answerYes[answerIndex].style.display = 'flex'
//     if(answerIndex==answerLength){
//         divScrollBottom()
//     }
// }
// function isAnswerButtonTwo(){
//     isAnswerButton[answerIndex].children[0].style.display = 'none'
//     answerNo[answerIndex].style.display = 'flex'
//     if(answerIndex==answerLength){
//         divScrollBottom()
//     }
// }
// function isAnswerYesButtonOne(){
//     isAnswerYesButton[answerIndex].children[1].style.display = 'none'
//     evEchoGood[answerIndex].style.display= 'block'
//     if(answerIndex==answerLength){
//         divScrollBottom()
//     }
// }
// function isAnswerYesButtonTwo(){
//     isAnswerYesButton[answerIndex].children[0].style.display = 'none'
//     evEchoBad[answerIndex].style.display = 'flex'
//     if(answerIndex==answerLength){
//         divScrollBottom()
//     }
// }




//聊天框内容溢出置底
function divScrollBottom() {
    $('#chatFrame')[0].scrollTop=$('#chatFrame')[0].scrollHeight
}