<template>
    <div class="w-full flex flex-col h-screen">
      <!-- 顶部空白或标题 -->
      <div @click="tapTop" class="lg:block w-full h-20 ">
        <img class="w-[200px] ml-20" :src="headerLogo" alt="">
      </div>
  
      <div class="w-full flex flex-row flex-1 overflow-hidden">
        <!-- 左侧菜单 -->
        <div class="hidden lg:block w-[25%] p-4 bg-[#3d476a] text-white h-full overflow-y-auto">
          <div class="text-[20px] mb-5">Help Center Topics</div>
          <div 
            v-for="(value, index) in leftList" 
            :key="index"
            @click="leftItemClick(index)" 
            :style="{color: nowLeftValue == value ? 'green' : ''}" 
            class="border-b border-gray-400 leading-16 cursor-pointer"
          >
            <div class="ml-5">{{value}}</div>
          </div>
        </div>
  
        <!-- 右侧内容 -->
        <div class="lg:pl-10 lg:pr-10 w-full p-2 lg:p-4 h-full overflow-y-auto">
            <div class=" bg-gray-50 flex items-center p-4 lg:p-10 flex-col mb-4">
                <div class=" text-4xl text-gray-700 mb-4">SJ FAQs</div>
                <el-input @input="inputChange" v-model="searchX" class="h-12 text-3xl" placeholder="Type your question or search term here..."></el-input>
            </div>
            <div v-if="!isMobile" class=" text-3xl mb-5">{{ nowLeftValue }}</div>
          <el-collapse>
            <el-collapse-item v-for="(value,index) in rightListx" :key="index">
              <template #title>
                <span v-if="!isMobile" style="font-size:20px;font-weight: 300;color: #6c6c6c;">{{value.tit}}</span>
                <span v-else style="font-size:16px;font-weight: 300;color: #6c6c6c;">{{value.tit}}</span>

              </template>
              <div class="text-[18px] text-gray-400 ml-6">{{value.con}}</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </template>
  

<script setup>
import helpCenterData from '@/utils/data.js'
import { ref } from 'vue'
import headerLogo  from '@/assets/register/header-logo-new.png'
import useWindowSize from '@/utils/useWindowSize.js'
import { useRouter } from 'vue-router'

const {isMobile} = useWindowSize()
const router = useRouter()

const leftList = Object.keys(helpCenterData)
const nowLeftValue = ref('Popular')
const searchX = ref(null)

const rightList = helpCenterData['Popular']
const rightListx = ref(rightList)

const leftItemClick = (index) => {
    nowLeftValue.value = leftList[index]
    rightListx.value = helpCenterData[nowLeftValue.value]
}

function searchHelpCenter(keyword) {
  const lowerKeyword = keyword.toLowerCase() // 忽略大小写
  const result = Object.values(helpCenterData)
    .flatMap(arr => arr)
    .filter(item =>
      item.tit.toLowerCase().includes(lowerKeyword) ||
      item.con.toLowerCase().includes(lowerKeyword)
    )
    .sort((a, b) => {
      // 提取标题开头数字
      const numA = parseInt(a.tit.match(/^\d+/)?.[0] || 0, 10)
      const numB = parseInt(b.tit.match(/^\d+/)?.[0] || 0, 10)
      return numA - numB
    })
  return result
}


const inputChange = (keyword) =>{
    if(keyword === ''){
        nowLeftValue.value = 'Popular'
        rightListx.value = helpCenterData[nowLeftValue.value]
    }else{
        nowLeftValue.value = "search"
        rightListx.value = searchHelpCenter(keyword)
    }
}

const tapTop = () => {
    router.push({path:"/register"})
}


</script>