<template>
    <div class="navs-form row items-center">
        <el-dropdown split-button 
            size="small" type="primary"
            @click="searchData.TemplateType=1,sellAdd(1)">
            <span style="font-size: 23px;margin-right: 10px;"> + </span> <span>新建</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-button type="primary" 
                    size="small" :loading="datas.loading"
                    style="color: #ffff;"
                    @click.stop="searchData.TemplateType=1,sellAdd(1)">
                  新建行程
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="true">
                  <el-button type="primary" 
                    size="small" :loading="datas.loading"
                    style="color: #ffff;"
                    @click.stop="searchData.TemplateType=2,sellAdd(3)">
                    新建广告  
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
        </el-dropdown>
        <!-- <el-button class="navs-Button" type="primary" @click="sellAdd(1)">
            <span style="font-size: 23px;margin-right: 10px;"> + </span> <span>新建</span>
        </el-button> -->
        <div class="q-mt-lg">
            <div v-for="(item,index) in datas.navs" class="q-mb-md">
                <el-button class="navs-Button" 
                :icon="item.icon"
                :type="datas.SellDatas==item.Id?'danger':'info'" text
                @click="datas.SellDatas=item.Id">
                    <span>{{item.Name}}</span>
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ArrowDown } from '@element-plus/icons-vue'
    import { reactive, ref, inject, watch, onMounted} from "vue";
    import { storeToRefs } from 'pinia'
    import { useSellTemplateStore,useScreenStore } from '@/store'

    import { injectKeyTemplate } from '@/types/injectKey'

    const searchData = ref({} as any)
    searchData.value = inject(injectKeyTemplate)
    const SalesEditorStore = useSellTemplateStore()
    const marketStore = useScreenStore()
    const { market } = storeToRefs(useScreenStore())

    const datas = reactive({
        SellDatas: {},
        navs: [
            // {Name:'最近',Id:1,icon:'Timer'},
            // {Name:'星标',Id:2,icon:'Star'},
        ]
    })
    datas.SellDatas = inject('SellDatas')
    const sellAdd = (type:number) =>{
        searchData.value.sellId = 0
        searchData.value.sellTempId = 0
        SalesEditorStore.setSalesEditor(type)
        marketStore.setMarket(true)
    }
</script>

<style lang="scss" scoped>
    .navs-form{
        /* padding: 15px; */
    }
    .navs-Button{
        width: 100%;
    }
    
</style>