<template>
    <div>
        <div class="bg-white WorkbenchInTabBox">
            <div class="q-px-lg row flex-between">
                <div class="row WorkbenchInTab fz14 text-weight-bolder microsoft" @click="queryObj.Current=1">
                    <div class="cusor-pointer"
                    :class="[queryObj.Current==1?'active':'']">全部</div>
                </div>
                <div class="WorkbenchInDel fz14 microsoft cusor-pointer q-pr-lg" @click="queryObj.Current=2">
                    <div class="WorkbenchInTab">
                        <div :class="[queryObj.Current==2?'active':'']">回收站</div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="q-px-lg">
            <div class="col row flex-between q-px-lg q-py-md">
                <div class="row items-center wrap WorkbenchInSea">
                  <div class="row items-center q-mb-sm">
                    <el-input class="microsoft" style="max-width:150px" 
                    v-model="queryObj.Title" placeholder="搜索关键字"
                    clearable>
                        <template #prefix>
                            <el-icon class="el-input__icon"><Search /></el-icon>
                        </template>
                    </el-input>
                  </div>
                  <div class="row items-center bg-white q-ml-lg q-mb-sm" style="border-radius: 5px;height: 34px;">
                    <div class="row items-center">
                        <el-input class="microsoft" style="max-width:150px" 
                        v-model="queryObj.Title" placeholder="出行地点"
                        clearable>
                        <template #prefix>
                            <el-icon class="el-input__icon"><Location /></el-icon>
                        </template>
                      </el-input>
                    </div>
                    <div class="WorkbenchInSeaLin"></div>
                    <div class="row items-center">
                        <el-input class="microsoft" style="max-width:150px" 
                        v-model="queryObj.Day" placeholder="出行天数"
                        clearable>
                            <template #prefix>
                                <el-icon class="el-input__icon"><Sunny /></el-icon>
                            </template>
                        </el-input>
                    </div>
                    <div class="WorkbenchInSeaLin"></div>
                    <div class="row items-center">
                        <el-date-picker style="max-width:300px" @change="getTime"
                            v-model="dateTime"
                            type="daterange"
                            start-placeholder="开始"
                            end-placeholder="结束"
                            format="YYYY-MM-DD"
                            date-format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD">
                        </el-date-picker>
                    </div>
                  </div>
                  <div class="row items-center q-ml-lg q-mb-sm">
                    <el-input class="microsoft" style="max-width:150px" 
                    v-model="queryObj.Title" placeholder="相关POI"
                    clearable>
                        <template #prefix>
                            <el-icon class="el-input__icon"><Fries /></el-icon>
                        </template>
                    </el-input>
                  </div>
                  <div class="row items-center q-ml-lg q-mb-sm">
                    <el-checkbox v-model="queryObj.Star" label="星标" size="large" />
                  </div>
                </div>
                <div class="row nowrap" style="flex-shrink: 0;">
                    <el-button class="q-pl-lg microsoft"
                    size="Default" type="primary" icon="plus" @click="addCreateProject"
                    > 新建</el-button>
                </div>
            </div>
            
        </div>

        <el-dialog v-model="addDialogFormVisible" title="" width="420">
            <template #header>
                <div class="text-title text-left fz16 PingFangSC">创建出行项目</div>
            </template>
            <NewProject v-if="!addSharer" :addDialogFormVisible="addDialogFormVisible"></NewProject>
            <NewSharer v-else></NewSharer>
            <template #footer>
                <div class="dialog-footer row flex-between">
                    <template v-if="!addSharer">
                        <div class="row items-center pointer" @click="addSharer=true">
                            <el-icon><User /></el-icon>
                            <span class="fz14 microsoft q-pl-md">添加分享人</span>
                        </div>
                        <el-button link type="primary" @click="addDialogFormVisible = false">跳过</el-button>
                    </template>
                    <template v-else>
                        <div class="">
                        
                        </div>
                        <div>
                            <el-button @click="addSharer = false">取消</el-button>
                            <el-button type="primary" @click="confirmator">确认</el-button>
                        </div>
                    </template>
                    
                </div>
            </template>
        </el-dialog>
    </div>
    
</template>

<script lang="ts" setup>
    import { storeToRefs } from 'pinia'
    import { ref, reactive, watch, inject } from "vue";
    import { useUserStore } from "@/store/user"
    import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
    import { injectKeyPublic } from '@/types/injectKey';
    import NewProject from './NewProject'
    import NewSharer from './NewSharer'

    const search = ref({} as any)
    search.value = inject(injectKeyPublic)

    const queryObj = ref({} as any)
    queryObj.value = search.value.queryObj

    const addDialogFormVisible = ref(false)
    const addSharer = ref(false)
    const dateTime = ref('')

    const confirmator = () => {
        addSharer.value = false
    }
    const getTime = () => {
        console.log(dateTime.value)
        if(dateTime.value.length>0){
            queryObj.value.star = dateTime.value[0]
            queryObj.value.end = dateTime.value[1]
        }else{
            queryObj.value.star = ''
            queryObj.value.end = ''
        }
    }
    const addCreateProject = () => {
        addDialogFormVisible.value = true
    }

    watch(()=>queryObj.value,(o,n)=>{
        search.value.queryObj = queryObj.value
    },{deep:true})

</script>

<style lang="scss" scoped>
.user-center-header {
    padding: 0 40px 0 28px;
    border-bottom: 1px solid #efefef;
    height: 56px;
    color: #000;
}

.user-center-menu {
    width: 90px;
    padding: 20px 0 20px 16px;
    font-family: microsoft yahei;
}

.user-center-body {
    padding: 20px 40px 40px 40px;
}
.WorkbenchInTabBox{
    padding: 8px 20px;
}
.WorkbenchInTab div{
    color: $themeColor
}
.WorkbenchInTab div.active{
    position: relative;
}
.WorkbenchInTab div.active::after{
    content: "";
    display: block;
    position: absolute;
    width: 24px;
    height: 4px;
    background: $themeColor;
    border-radius: 2px;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    
}
.WorkbenchInDel{
    padding-left: 16px;
    margin-right: -16px;
    border-left: 1px solid #e6e7e8;
}
.WorkbenchInDel span{
    display: inline-block;
    padding: 0 16px;
    position: relative;
    color: #666e76;
    transition: color .3s;
}
.WorkbenchInDel:hover span{
    color: $themeColor;
}
.WorkbenchInSea::v-deep(.el-input__wrapper),.WorkbenchInSea::v-deep(.el-date-editor.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset;
    border: 1px solid #fff;
}
.WorkbenchInSea::v-deep(.el-input__wrapper:hover),.WorkbenchInSea::v-deep(.el-date-editor.el-input__wrapper:hover) {
    border: 1px solid $themeColor;
}
.WorkbenchInSeaLin{
    margin: 7px 0;
    width: 1px;
    background: #dedede;
}
</style>
