<template>
    <div class="breadcrumb"  :class="{bottomBorderShow:bottomBorderShow}">
        <div class="row1" v-if="showRow1">
            <div class="title ">
                <span class="">{{menuPath.meta.headerMenuName}}</span>
                <!-- <span class="breadcrumb_iconBox">
                    <el-icon><ArrowRight /></el-icon>
                </span>
                <span @click="menuClick"  :class="{myHover:breadcrumb_list.length,s1:breadcrumb_list.length == 0}" >
                    {{$route.meta.name}}
                </span> -->
                <template v-for="item,index in routerBreadcrumb">
                    <span class="breadcrumb_iconBox">
                         <i class="common_iconfont common_icon-xiexian fs_12"></i>
                    </span>
                    <span :class="{hover2:index < routerBreadcrumb.length -1,s1:index == routerBreadcrumb.length -1}" @click="itemClick(item,index)">
                        {{item.name}}
                    </span>
                </template>
                <span>
                    <!-- {{breadcrumb_list}} -->
                </span>
                <slot name="nameAfter"></slot>
            </div>
        </div>
        <div class="pageHeader " v-else >
            <div class="name">
                <span class="flex aic" :class="{myHover:isBack}" @click="backClick()">
                    <el-icon class="mar_r_6" v-if="isBack"><ArrowLeft /></el-icon>
                    <template v-if="routerBreadcrumb.length">
                        {{routerBreadcrumb[routerBreadcrumb.length -1].name}}
                    </template>
                    <template v-else>
                        {{$route.meta.name}}
                    </template>
                </span>
            </div>
            <slot name="nameAfter"></slot>
        </div>
        <div class="other">
            <div class="otherContainer">
                <slot name="other"></slot>
<!--                <el-button title="返回"  @click="backClick()" v-if="isBack" icon="ArrowLeft" type="primary" class="btnIcon "></el-button>-->

				<div v-if="isBack"  title="返回" @click="backClick()" class=" mar_l_10 backBtn">
					<el-icon><ArrowLeft /></el-icon>
				</div>

            </div>
        </div>
    </div>
</template>

<script>
import {useTheme} from "@/store/theme"
import {computed} from "vue"
import { storeToRefs } from 'pinia'
import { useBreadcrumb } from "gy-webcode3/store/breadcrumb"
import uuid from "gy-webcode3/utils/uuid"
import { useMenu } from '@/store/menu'

export default {
    // props:['name','showBack','goBack','pageHeaderShow'],
    props:{
        name:{
            type:String,
            default:""
        },
		bottomBorderShow:{
			type:Boolean,
			default:true
		}
    },
    setup(props, ctx){
        const themeStore = useTheme();
        const {themeConfig} = storeToRefs(themeStore)
        const breadcrumbShow = computed(()=>themeConfig.value.breadcrumbShow)

        const breadcrumbStore = useBreadcrumb();
        const breadcrumb_list = breadcrumbStore.breadcrumb_list

        const isBack = computed(()=> !!ctx.attrs.onGoBack);

        const menuStore = useMenu();

        return {
            menuStore,
            breadcrumb_list,
            breadcrumbShow,
            isBack
        }
    },
    
    data(){
        return {
            myID:"",
            fullPath:"",
        }
    },
    watch:{
        names(){
            // let breadcrumb_list = this.breadcrumb_list;
            // if(this.names.length){
            //     this.names.forEach(item => {
            //         breadcrumb_list.push({
            //             name:item,
            //             click:this.backClick
            //         })
            //     })
            // }
            // console.log(breadcrumb_list);
        }
    },
    computed:{
        names(){
            return this.name ? this.name.split(',') : []
        },
        showRow1(){
            if(this.breadcrumbShow){
                return true;   
            }
        },
        menuPath(){
            // return this.$store.state.menu.menuPath[this.$route.fullPath]
            let menu = this.menuStore.menuPath
            let menuKey = Object.keys(menu).find(key => {
                return this.fullPath.includes(key)
            })
            if(menu[menuKey]){
                return menu[menuKey]
            }
            return {
                name:'没配菜单',
                meta:{}
            }
        },

        routerBreadcrumb(){
            if(this.breadcrumb_list[this.fullPath]){
                return this.breadcrumb_list[this.fullPath]
            }
            return []
        }
        
    },
    created(){

        let breadcrumb_list = this.breadcrumb_list;
        let fullPath = this.$route.fullPath;
        this.fullPath = fullPath;
        if(!breadcrumb_list[fullPath]){
            breadcrumb_list[fullPath] = []
        }
        
        let myID = uuid(10,16)
        this.myID = myID;

        if(this.names.length){
            this.names.forEach(item => {
                
                breadcrumb_list[fullPath].push({
                    name:item,
                    id:myID,
                    click:this.backClick
                })
            })
        }
        else{
            breadcrumb_list[fullPath].push({
                name:this.menuPath.name,
                id:myID,
                click:this.backClick
            })
        }

        
    },
    methods:{
        backClick(){
            // let routeName = this.$route.name;
            // let rIndex = this.breadcrumb_list[routeName].findIndex(i => i.id == this.myID)
            // this.breadcrumb_list[routeName] = this.breadcrumb_list[routeName].slice(0,rIndex)
            this.$emit('goBack');

        },
        itemClick(data,index){
            if(index != this.routerBreadcrumb.length -1){
                this.routerBreadcrumb[index+1].click()
            }
        },
        menuClick(){
            if(this.routerBreadcrumb.length){
                this.routerBreadcrumb[0].click()
            }
        }
    },
    beforeUnmount(){
        if(this.breadcrumb_list[this.fullPath]){
            let rIndex = this.breadcrumb_list[this.fullPath].findIndex(i => i.id == this.myID)
            this.breadcrumb_list[this.fullPath].splice(rIndex,1)
        }
        // let rIndex = this.breadcrumb_list[this.fullPath].findIndex(i => i.id == this.myID)
        // this.breadcrumb_list[this.fullPath].splice(rIndex,1)

    }
}
</script>

<style>

</style>