<template>
  <div class="allStationPage">
    <div class="breadcrumb" v-if="showPeriod || showCollection">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="item in breadcrumbArr" :key="item.key" :style="item.blod" @click.native="changePage(item)">
                {{item.name}}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div>
        <station-management v-show="showStation" @showPeriodFn="showPeriodFn"></station-management>
        <period-management v-show="showPeriod" @showCollectionFn="showCollectionFn" ></period-management>
        <collection-line-management v-show="showCollection"></collection-line-management>
    </div>
  </div>
</template>

<script>
import stationManagement from './stationManagement.vue'
import periodManagement from './periodManagement.vue'
import collectionLineManagement from './collectionLineManagement.vue'
export default {
    components: { 
        stationManagement,
        periodManagement,
        collectionLineManagement
    },
    data() {
        return {
            showStation: false,
            showPeriod: false,
            showCollection: false,
            breadcrumbArr: []
        }
    },
    created() {
        this.showStation = true
    },
    methods:{
        changePage(obj) {
            console.log(obj)
            if (obj.key === 'station') {
                this.showStation = true
                this.showCollection = false
                this.showPeriod = false
            } else if (obj.key === 'period') {
                this.showPeriodFn(true)
            }
        },
        showPeriodFn(val) {
            this.breadcrumbArr = []
            this.showStation = false
            this.showCollection = false
            this.showPeriod = val
            this.breadcrumbArr.push(
                {
                    name: '场站管理',
                    key: 'station',
                    blod: 'font-weight:bold;cursor:pointer'
                },
                {
                    name: '期次管理',
                    key: 'period'
                }
            )
        },
        showCollectionFn(val) {
            this.breadcrumbArr = []
            this.showStation = false
            this.showCollection = val
            this.showPeriod = false
            this.breadcrumbArr.push(
                {
                    name: '场站管理',
                    key: 'station',
                    blod: 'font-weight:bold;cursor:pointer'
                },
                {
                    name: '期次管理',
                    key: 'period',
                    blod: 'font-weight:bold;cursor:pointer'
                },
                {
                    name: '集电线管理',
                    key: 'collect'
                }
            )
        },
    }
}
</script>

<style lang="less">
.allStationPage{
    .breadcrumb{
        margin: 15px 0 0 40px;
    }
}
</style>