<template>
    <!-- PC -->
    <div class="hidden lg:flex bg-black h-10 w-full text-white items-center p-4 text-[12px]">
        <div class="w-[50%] text-[12px] justify-center flex flex-row items-center">
            <strong><span>Organisasi Haji dan Umrah yang Terpercaya</span></strong>
            <div class="h-10 w-px bg-[#7a7a7a] ml-5"></div>
            <span class="text-white text-[12px] opacity-90 ml-5">Kementerian Haji dan Umrah Arab Saudi</span>
        </div>

        <div class="flex flex-row items-center justify-center w-[50%]">
            <div class="flex flex-row items-center h-full">
                <img class="h-[50%] bg-black hover:opacity-50 ml-0.5" v-for="value in imgList" :src="value" alt="">
            </div>
            <div class="h-10 w-px bg-[#7a7a7a] ml-5"></div>
            <span class="hover:opacity-90 text-[12px] ml-5">PERTANYAAN YANG SERING DIAJUKAN</span>
            <div class="h-10 w-px bg-[#7a7a7a] ml-5"></div>
            <span class="hover:opacity-80 ml-5 text-[12px]">GALERI</span>
        </div>
    </div>
    <div
        class="hidden lg:flex pl-[10%] h-[100px] flex-row items-center sticky top-0 z-50 bg-white border-b border-gray-200">
        <img class="h-12" :src="logoImg" alt="">
        <strong><span @click="tapItem(index)" :class="{ 'text-blue': index === nowIndex }"
                class="ml-5 text-[13px] hover:opacity-50" v-for="(value, index) in titleList">
                <span v-if="index != 2">{{ value }}</span>
                <el-dropdown v-else trigger="click">
                    <div style="margin-top: 7px;" :class="{ 'text-blue': index === nowIndex }"
                        class="ml-5 text-black text-[13px] hover:opacity-50">
                        {{ value }} ∨
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu style="padding: 10px;">
                            <el-dropdown-item>
                                <template #default>
                                    <div @click="tapTentang(1)" class=" flex flex-row items-center justify-start">
                                        <!-- <BoltIcon class="w-5 h-5 text-black ml-1.5"></BoltIcon> -->
                                        <span :class="{ 'text-blue': route.fullPath.includes('/tentang') }"
                                            class=" leading-8 ml-1.5 text-[16px]">Tentang Kami</span>
                                    </div>
                                </template>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div @click="tapTentang(2)" class=" flex flex-row items-center justify-start">
                                    <!-- <ChartBarIcon class="w-5 h-5 text-black ml-1.5"></ChartBarIcon> -->
                                    <span :class="{ 'text-blue': route.fullPath.includes('/serti') }"
                                        class=" leading-8 ml-1.5 text-[16px]">Sertiflkat Kami</span>
                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div @click="tapTentang(3)" class=" flex flex-row items-center justify-start">
                                    <!-- <CurrencyDollarIcon class="w-5 h-5 text-black ml-1.5"></CurrencyDollarIcon> -->
                                    <span :class="{ 'text-blue': route.fullPath.includes('/kebija') }"
                                        class=" leading-8 ml-1.5 text-[16px]">Kebijakan Privasi</span>
                                </div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </span></strong>
    </div>

    <!-- phone -->
    <div class="lg:hidden sm:block bg-black h-10 w-full text-white items-center flex p-4 text-[12px]">
        <div class="flex flex-row items-center h-full">
            <img class="h-5 bg-black hover:opacity-50" v-for="value in imgList" :src="value" alt="">
        </div>
    </div>
    <div
        class="lg:hidden sm:block flex flex-row items-center justify-between p-2.5 sticky top-0 z-50 bg-white border-b border-gray-200">
        <strong><span @click="menuTap" class="text-[14px] text-[#333333]">☰ MENU</span></strong>
        <img class="h-10" :src="logoImg" alt="">
        <div class="flex items-center justify-center w-[93px] h-[42px] bg-[#f3f3f3]">
            <span class="text-[13px] text-center text-[#3e3e3e]">HEMEN<br>ARA</span>
        </div>
    </div>

    <!-- 侧边栏 -->
    <el-drawer style="padding: 0;" :with-header="false" :show-close="false" v-model="drawer2" :direction="direction"
        size="80%">
        <!-- <template #header>
            <div class="flex w-full justify-between h-[50px] flex-row text-[13px]">
                <div @click="tapTit(0)" :class="{'text-[#666666] bg-[#999999] border-b':titleIndex === 0}" class="text-[#909090]  bg-[#f8f8f8] w-[50%] flex items-center justify-center">MENU</div>
                <div @click="tapTit(1)" :class="{'text-[#666666] bg-[#999999] border-b':titleIndex === 1}" class="text-[#909090] bg-[#f8f8f8] w-[50%] flex items-center justify-center">KATEGORI</div>
            </div>
        </template> -->

        <template #default>
            <div class="flex w-full justify-between h-[50px] flex-row text-[13px]">
                <!-- <div @click="tapTit(0)" :class="{titleIndex == 0 ? 'text-[#666666] bg-[#999999] border-b':''}" class="text-[#909090]  bg-[#f8f8f8] w-[50%] flex items-center justify-center">MENU</div>
                <div @click="tapTit(1)" :class="{titleIndex == 1 ? 'text-[#666666] bg-[#999999] border-b':''}" class="text-[#909090] bg-[#f8f8f8] w-[50%] flex items-center justify-center">KATEGORI</div> -->
                <div @click="tapTit(0)" :class="titleIndex === 0
                    ? 'text-[#666666] bg-[#f3f3f3] border-b-2 border-[#666666]'
                    : 'text-[#909090] bg-[#f9f9f9]'"
                    class="w-[50%] flex items-center justify-center transition-all duration-300">
                    MENU
                </div>

                <div @click="tapTit(1)" :class="titleIndex === 1
                    ? 'text-[#666666] bg-[#f3f3f3] border-b-2 border-[#666666]'
                    : 'text-[#909090] bg-[#f9f9f9]'"
                    class="w-[50%] flex items-center justify-center transition-all duration-300">
                    KATEGORI
                </div>
            </div>
            <div @click="tapItem(index)" v-for="(value, index) in titleList"
                class="h-[50px] border-b border-[#f1f1f1] flex items-center pl-4">
                <span v-if="index != 2" :class="{ 'text-blue': index === nowIndex }"
                    class="text-[13px] text-[#333333]">{{ value }}</span>
                <el-dropdown v-else trigger="click">
                    <div style="margin-top: 7px;" :class="{ 'text-blue': index === nowIndex }"
                        class=" text-black text-[13px] hover:opacity-50">
                        {{ value }} ∨
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu style="padding: 10px;">
                            <el-dropdown-item>
                                <template #default>
                                    <div @click="tapTentang(1)" class=" flex flex-row items-center justify-start">
                                        <!-- <BoltIcon class="w-5 h-5 text-black ml-1.5"></BoltIcon> -->
                                        <span :class="{ 'text-blue': route.fullPath.includes('/tentang') }" class=" leading-8 ml-1.5 text-[16px]">Tentang Kami</span>
                                    </div>
                                </template>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div @click="tapTentang(2)" class=" flex flex-row items-center justify-start">
                                    <!-- <ChartBarIcon class="w-5 h-5 text-black ml-1.5"></ChartBarIcon> -->
                                    <span :class="{ 'text-blue': route.fullPath.includes('/serti') }" class=" leading-8 ml-1.5 text-[16px]">Sertiflkat Kami</span>
                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div @click="tapTentang(3)" class=" flex flex-row items-center justify-start">
                                    <!-- <CurrencyDollarIcon class="w-5 h-5 text-black ml-1.5"></CurrencyDollarIcon> -->
                                    <span :class="{ 'text-blue': route.fullPath.includes('/kebija') }" class=" leading-8 ml-1.5 text-[16px]">Kebijakan Privasi</span>
                                </div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </template>

        <!-- <template #footer>
            <div>
            </div>
        </template> -->
    </el-drawer>
</template>

<script setup>
import logoImg from "@/assets/umraza_logo.png"
import facebook from "@/assets/social/f.jpg"
import ins from "@/assets/social/ins.jpg"
import x from "@/assets/social/x.jpg"
import whats from "@/assets/social/whats.jpg"
import you from "@/assets/social/you.jpg"
import { ref, watch, onMounted } from "vue"
import { useRouter, useRoute } from "vue-router"

const router = useRouter()
const route = useRoute()

const drawer2 = ref(false)
const direction = 'ltr'
const titleIndex = ref(0)

const titleList = [
    "HALAMAN BERANDA",
    "HARGA HAJI",
    "TENTANG KAMI",
    "GALERI",
    "BLOG",
    "TANYA JAWAB",
    "KOMUNIKASI"
]
const imgList = [
    facebook,
    x,
    ins,
    you,
    whats
]
const nowIndex = ref(0)


const tapItem = (index) => {
    nowIndex.value = index
    if (index != 2) {
        drawer2.value = false
    }
    if (index == 0 || index == 1) {
        router.push({ path: "/home" })
    }
    if (index == 3) {
        router.push({ path: "/galeri" })
    }
    if (index == 4) {
        router.push({ path: "/blog" })
    }
    if (index == 5) {
        router.push({ path: "/tanya" })
    }
    if (index == 6) {
        router.push({ path: "/komuni" })
    }
}

const tapTit = (index) => {
    titleIndex.value = index
}

const tapTentang = (number) => {
    drawer2.value = false
    if (number == 1) {
        router.push({ path: "/tentang" })
    }
    else if (number == 2) {
        router.push({ path: "/serti" })
    }
    else {
        router.push({ path: "/kebija" })
    }
}

function menuTap() {
    drawer2.value = true
}
function cancelClick() {
    drawer2.value = false
}

watch(() => route.fullPath,
    (newPath, oldPath) => {
        if (newPath.includes('/home')) {
            nowIndex.value = 0;
        }
        else if (newPath.includes('/galeri')) {
            nowIndex.value = 3;
        }
        else if (newPath.includes('/blog')) {
            nowIndex.value = 4;
        }
        else if (newPath.includes('/tanya')) {
            nowIndex.value = 5;
        }
        else if (newPath.includes('/komuni')) {
            nowIndex.value = 6;
        }
        else if (newPath.includes('/tentang') || newPath.includes('/serti') || newPath.includes('/kebija')) {
            nowIndex.value = 2;
        }
        else {
            nowIndex.value = -1;
        }
    })

const syncByPath = (p) => {
    if (p.includes('/home') || p === '/') nowIndex.value = 0
    else if (p.includes('/galeri')) nowIndex.value = 3
    else if (p.includes('/blog')) nowIndex.value = 4
    else if (p.includes('/tanya')) nowIndex.value = 5
    else if (p.includes('/komuni')) nowIndex.value = 6
    else if (['/tentang', '/serti', '/kebija'].some(s => p.includes(s))) nowIndex.value = 2
    else nowIndex.value = -1
}

// 1) 首次挂载时同步（解决刷新后为 0 的问题）
onMounted(() => syncByPath(route.path))

</script>

<style scoped>
.text-blue {
    color: #003366;
}

::v-deep(.el-drawer__body) {
    padding: 0 !important;
}
</style>