<template>
    <div class="head-bar" :style="{background:bgColor}">
        <div class="left" @click="backRouter" v-if="backMenu">
            <md-icon name="arrow-left" :color="backIconColor"></md-icon>
        </div>
        <div class="left" v-else />
        <div class="center">
            {{title}}
        </div>
        <div class="right">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<script>
    import {
        Icon,
    } from 'mand-mobile'
    export default {
        name: "head-bar",
        components: {
            [Icon.name]: Icon,
        },
        props:{
            backIconColor:{  // 图标颜色
                default: '#333131',
                type: String
            },
            backMenu:{  // 是否显示返回按钮
                default: false,
                type: Boolean
            },
            title:{ // 标题
                default: '',
                type: String
            },
            bgColor: {
                default: '#F2F2F2',
                type: String
            }
        },
        methods:{
            /**
             * @Author: NanKeYang
             * @Description: 返回路由
             * @Data: 2019/12/31 10:51
             */
            backRouter(){
                this.$router.back();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .head-bar{
        height: 100px;
        line-height: 100px;
        background: #F2F2F2;
        font-size: 32px;
        .left,.center,.right{
            float: left;
            text-align: center;
            min-height:1px;
        }
        .left,.right{
            width: 100px;
        }
        .center{
            width: calc(100% - 200px);
            font-weight: bold;
        }
    }
</style>