<template>
    <div class="window-height column">
        <div class="user-center-header row items-center">
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pptTD.png"
                style="height: 24px" />
            <div class="q-ml-lg text-weight-bold" style="font-size: 20px">
                工作台
            </div>
            <div class="user-center-menu column ">
                <el-button class="full-width pingfangr text-weight-bolder" 
                @click="forwardSpace" 
                style="font-size: 14px !important;" icon="arrow-left">返回</el-button>
            </div>
            <div class="col"></div>
            <UserCard :size="33"></UserCard>
        </div>
        <div class="full-height bg-f5">
            <headers></headers>
            <list></list>
        </div>
       
    </div>
    
    
    <el-dialog v-model="mapVisible" title="" width="80vw">
        <template #header> </template>
        <map-view></map-view>
        <template #footer> </template>
    </el-dialog>
    
</template>

<script lang="ts" setup>
    import UserCard from "@/components/User/UserCard.vue";
    import { ref, reactive, provide } from "vue";
    import { useRouter } from "vue-router";
    import { injectKeyPublic } from '@/types/injectKey';
    import headers from './components/header.vue'
    import list from './components/list.vue'
    import MapView from "@/components/Mapbox/MapView.vue";

    const router = useRouter()
    const mapVisible = ref(false)
    const search = reactive({
        msg: {
            allPeoples:[],
            personnelType: 1,
            personnelList1: [],
            personnelList2: [],
            personnelList3: [],
            personnelList4: [],
            personnelList5: [],
        },
        form:{
            Name: '' 
        },
        queryObj:{
            pageIndex: 1,
            pageSize: 20,
            LineId: 0, //线路Id
            Title: '', //模板名称
            CountryName: '', //国家名称
            SeasonName: '', //季节名称
            ColorName: '', //颜色名称
            CountryNames: [], //国家名称
            SeasonNames: [], //季节名称
            ColorNames:  [], //颜色名称
            pageCount: 0, //总页数
            TempType: 0,
            TemplateType: 0,//0 不限 1模版 2广告
            type: 0,
            OrderByType: 1,//排序方式
            QAuthType: '',//1-免费，2-VIP，3-私有
            Current: 1,
            star: '',
            end: '',
            Day: '',
            Star: false,
        },
    })
    provide(injectKeyPublic,search)

    const forwardSpace = () => router.push('/space')
</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{
    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>
