<template>
  <div class="back-item" :style="{backgroundColor: backgroundColor,color: textColor}">
    <div class="back-left" @click="goBack"><i class="md-icon icon-font md-icon-arrow-left arrow-left md"></i></div>
    <div class="back-text">{{content}}</div>
    <div class="back-right">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "md-back-item",
    props: {
      content: {
        type: String,
        default: '返回'
      },
      backgroundColor:{
        type: String,
        default: '#2a78dc'
      },
      textColor: {
        type: String,
        default: '#000'
      }
    },
    methods: {
      goBack(){
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .back-item
    display flex
    min-height 50px
    line-height 50px
    font-size 14px
    .back-left
      padding 0px 8px
      flex-grow 1
    .back-text
      text-align center
      flex-grow 8
    .back-right
      flex-grow 1
      padding 0px 10px

</style>
