<template>
    <div class="devfiling">
        <!-- <div class="page_nav">
            <ul>
            <li :class="{'nav_active': pageType == item.id}"
                v-for="(item,index) in navList"
                :key="item.id"
                @click="changPageType(index)">
                {{item.name}}
            </li>
            </ul>
        </div> -->
        <component :is="pageDetail" :devType="devType"></component>
        <!-- <devPlan v-if="pageDetail == 'devPlan'" :devType="devType"></devPlan>
        <devRegister v-if="pageDetail == 'devRegister'" :devType="devType"></devRegister> -->
    </div>
</template>

<script>
// import devPlan from './devPlan.vue'
import devRegister from './devRegister.vue'
export default {
    components: {
        // devPlan,
        devRegister
    },
    data(){
        return {
            navList:[{
                name: '策划管理',
                id: '1'
            },{
                name: '设备登记',
                id: '2'
            },{
                name: '监督备案',
                id: '3'
            },{
                name: '交底管理',
                id: '4'
            },{
                name: '验收管理',
                id: '5'
            },{
                name: '监督旁站',
                id: '6'
            },{
                name: '检查管理',
                id: '7'
            },{
                name: '任务管理',
                id: '8'
            }],
            pageType: 1,
            pageDetail: "devRegister",
            devType: 1
        }
    },
    created(){
        this.projectSn = this.$store.state.projectSn;
        this.userId = this.$store.state.userInfo.userId
       
    },
    methods: {
        changPageType(val){
            console.log(val)
            this.pageType = this.navList[val].id
            if(val == 0){
                this.pageDetail = "devPlan"
            } else if(val == 1){
                this.pageDetail = "devRegister"
            }
        }
    }
}
</script>

<style lang="less" scoped>
.devfiling{
    width: 100%;
    height: 100%;
    .page_nav{
        height: 60px;
        width: 100%;
        padding-left: 27px;
        box-sizing: border-box;
        // line-height: 60px;
        ul{
        display: flex;
        align-items: center;
        height: 100%;
        li{
            margin-right: 54px;
            font-size: 14px;
            display: inline-block;
            cursor: pointer;
            position: relative;
        }
        .nav_active{
            padding: 0 4px;
            padding-bottom: 3px;
            color: #88E7F0;
            border-bottom: 1px solid #88E7F0;
        }
        .nav_active::before{
            content: "";
            width: calc(100% + 6px);
            height: 100%;
            position: absolute;
            top: 0;
            left: -3px;
            border-left: 0px solid;
            border-right: 0px solid;
            border-bottom: 2px solid;
            background: linear-gradient(to top,rgba(136, 231, 240, 0.5),rgba(136, 231, 240, 0));
            transform:perspective(0.5em) rotateX(-3deg);
            border-image: linear-gradient(to top, rgba(136, 231, 240, 0.5), rgba(136, 231, 240, 0)) 1 1;
        }
        }
    }
   
}
</style>