<template>
    <div class="q-pa-md" style="border-right: 1px solid #ddd;">
        <el-dropdown >
            <el-button type="primary">
                <div class="row items-center"  style="width:188px;">
                    <el-icon :size="16" color="#FFF" style="margin-left: 50px;"><Plus/></el-icon>
                    <span class="col" style="margin-top: 2px; text-align: left;">新建</span>
                    <el-icon :size="16" color="#FFF"><ArrowDown /></el-icon>
                </div>
            </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                <el-dropdown-item @click="openMarketHandler('/trip')">创建行程</el-dropdown-item>
                <el-dropdown-item @click="openMarketHandler('/ad')">创建广告图</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <div class="tabs-items">
            <div class="item" :class="{'active':currentMenu==0}" @click="setCurrentMenuHandler(0)"><el-icon color="#564bec" class="q-mr-md" size="16"><Clock /></el-icon>最近</div>
            <div class="item" :class="{'active':currentMenu==1}" @click="setCurrentMenuHandler(1)" v-if="userInfo.iv||userInfo.it"><el-icon color="#564bec" class="q-mr-md" size="16"><Star /></el-icon>星标</div>
            <div class="item" :class="{'active':currentMenu==2}" @click="setCurrentMenuHandler(2)" v-if="userInfo.it"><el-icon color="#564bec" class="q-mr-md" size="16"><Share /></el-icon>共享</div>
        </div>
        
        <div class="tabs-items">
            <div class="q-mb-md q-ml-lg text-small">我的设计文档</div>
            <div class="item" :class="{'active':currentMenu==3}" @click="setCurrentMenuHandler(3)"><el-icon color="#564bec" class="q-mr-md" size="16"><Management /></el-icon>行程文档</div>
            <div class="item" :class="{'active':currentMenu==4}" @click="setCurrentMenuHandler(4)"><el-icon color="#564bec" class="q-mr-md" size="16"><Picture /></el-icon>广告图</div>
        </div>

        <div class="tabs-items">
            <div class="item" :class="{'active':currentMenu==-1}" @click="setCurrentMenuHandler(-1)" v-if="userInfo.iv||userInfo.it"><el-icon color="#564bec" class="q-mr-md" size="16"><Delete /></el-icon>回收站</div>
        </div>

    </div>
    <div class="col">
        <BrowsingHistory :current-menu="currentMenu" v-if="currentMenu==0"></BrowsingHistory>
        <StarTarget :current-menu="currentMenu" v-if="currentMenu==1"></StarTarget>
        <journeyAds :position="position" :current-menu="currentMenu" v-if="currentMenu==3||currentMenu==4" @destroy-position="()=>position=null"></journeyAds>
        <RecycleBin :current-menu="currentMenu" v-if="currentMenu==-1"></RecycleBin>
        <ShareList :position="position" v-if="currentMenu==2" @destroy-position="()=>position=null"></ShareList>
    </div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/user';
import { storeToRefs } from 'pinia';
import { ref, watch, inject } from 'vue';
import BrowsingHistory from './BrowsingHistory.vue'
import StarTarget from './StarTarget.vue'
import ShareList from './Share.vue';
import journeyAds from './journeyAds.vue'
import RecycleBin from './RecycleBin.vue'
import { Plus,ArrowDown,Clock,Star,Share,Picture,Management,Delete,Setting } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { openNewBlank } from '@/utils/common';
import { useSellTemplateStore } from '@/store';
import { injectKeyTemplate } from '@/types/injectKey'

const router = useRouter();
const sellStore = useSellTemplateStore()
const {userInfo} = storeToRefs(useUserStore())
const {SaleSearchPosition} = storeToRefs(sellStore)

const currentMenu = ref<number>(0)
const position = ref<{FileId:number,FileType:1|2,Position:{FileId:number,FileName:string}[]}|null>(null)

const searchData = ref({} as any)
searchData.value = inject(injectKeyTemplate)

const openMarketHandler = (type:string='') =>{
    openNewBlank(`/market/create${type}/${currentMenu.value}`)
}

const setCurrentMenuHandler=(i:number)=>{
    currentMenu.value=i
    searchData.value.currentMenu = i
}

const initPageHandler = ()=>{
    if(SaleSearchPosition.value){
        position.value = SaleSearchPosition.value
        sellStore.setSaleSearchPosition(null)
    }
    if(router.currentRoute.value.query && router.currentRoute.value.query.current){
        currentMenu.value = parseInt(router.currentRoute.value.query.current.toString())
    }else if(router.currentRoute.value.params.current){
        currentMenu.value = parseInt(router.currentRoute.value.params.current.toString())
    }
    currentMenu.value = currentMenu.value>4||currentMenu.value<-1?0:currentMenu.value
    searchData.value.currentMenu = currentMenu.value
}

watch(() => router.currentRoute.value.path, (toPath) => {
    initPageHandler()
},{immediate: true,deep: true})

watch(() => SaleSearchPosition.value, (n) => {
    if(SaleSearchPosition.value){
        position.value = SaleSearchPosition.value
        sellStore.setSaleSearchPosition(null)
    }
},{deep: true})
</script>
<style scoped>

.tabs-items{
    margin-top: 30px;
}
.tabs-items .item{
    border-radius: 6px;
    padding: 10px 25px;
    font-size: 13px;
    margin-bottom: 5px;
    cursor: pointer;
    color:#000;
    display: flex;
    align-items: center;
    font-family: microsoft yahei;
}
.tabs-items .item.active{
    color:var(--el-color-primary);
    background-color: #564bec11 !important;
    cursor: default;
}
.tabs-items .item:hover{
    background-color: #eee;
}
</style>