<template>
    <div class="title_top">
        <div class="left_top">
            <el-tabs v-model="activeName" @tab-click="handleClick" >
                <el-tab-pane label="绿色通道" name="first">
                    <greenChannel></greenChannel>
                </el-tab-pane>
                <el-tab-pane label="急诊录入" name="second">
                    <emergencyInput></emergencyInput>
                </el-tab-pane>
                <el-tab-pane label="绿色通道记录" name="third">
                <greenRecord :activeName="activeName"></greenRecord>
            </el-tab-pane>
            </el-tabs>
        </div>

        <div class="right_top">
            <el-tabs @tab-click="logOut">
                <el-tab-pane label="退出登录" name="out" ></el-tab-pane>
            </el-tabs>
        </div>
    </div>

</template>
<script>
import greenChannel from '@/view/green-channel.vue'
import emergencyInput from '@/view/emergency-input.vue'
import greenRecord from '@/view/green_record.vue'
export default {
  name: 'IndexPage',
    components: {
        greenChannel,
        emergencyInput,
        greenRecord
    },
    data() {
        return {
            activeName:'first',
        }
    },
    methods: {
        handleClick(){

        },
        logOut(){
            this.$confirm('确定要退出登录吗？', '退出登录', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success('退出登录成功');
                localStorage.setItem('info',{})
                this.$router.replace('/login')
            }).catch(() => {
                // 取消退出
                // console.log('用户取消退出登录');
            });
        }
    }
}
</script>



<style scoped>
.title_top {
    padding:0 20px ;
    display: flex;
    justify-content: space-between;
    ::v-deep .el-tabs__nav {
        line-height: 50px;
    }
    .left_top {
        flex: 1;
    }
    .right_top {
        display: flex;
        justify-content: end;
        ::v-deep .el-tabs__active-bar  {
            width: 0 !important;
        }
        ::v-deep .el-tabs__item:hover {
            color: #303133;
        }
        ::v-deep .el-tabs__item.is-active {
            color: #303133;
        }
    }
}

</style>