<template>
  <div class="m-nav-bar flex-default" :style="{ background }">
    <div class="left" @click="goBack">
      <m-icon :icon="backIcon" :size="20" />
    </div>
    <div class="title flex-center" :style="{ color: titleColor }">
      {{ title }}
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    light: {
      type: Boolean,
      default: false,
    },
    background: {
      type: String,
      default: "#FFFFFF",
    },
  },
  computed: {
    titleColor() {
      return this.light ? "#FFFFFF" : "";
    },
    backIcon() {
      return this.light ? "icon-back-light" : "icon-back";
    },
  },
  methods: {},
};
</script>

<style lang="less">
.m-nav-bar {
  height: @mall-nav-bar-height;
  padding: 0 12px;
  position: relative;
  .title {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: 100%;
    text-align: center;
    position: absolute;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>