 <template>
  <div class="nav-bar">
    <div class="back-btn" @click="$router.back()" v-if="showBack">
      <i class="arrow-left"></i>
    </div>
    <div class="title">{{ title }}</div>
    <div class="right-btn" @click="handleRightAction" v-if="rightText || rightIcon">
      <i v-if="rightIcon" :class="rightIcon"></i>
      <span v-if="rightText">{{ rightText }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 是否显示返回按钮
    showBack: {
      type: Boolean,
      default: true
    },
    // 右侧文字
    rightText: {
      type: String,
      default: ''
    },
    // 右侧图标类名
    rightIcon: {
      type: String,
      default: ''
    },
    // 自定义返回处理
    customBack: {
      type: Function,
      default: null
    },
    // 右侧按钮点击处理
    rightAction: {
      type: Function,
      default: null
    },
    // 背景色
    backgroundColor: {
      type: String,
      default: '#fff'
    },
    // 文字颜色
    textColor: {
      type: String,
      default: '#000'
    }
  },
  methods: {
    // 处理返回按钮点击
    handleBack() {
      if (this.customBack) {
        this.customBack();
      } else {
        this.$router.back();
      }
      this.$emit('back');
    },
    
    // 处理右侧按钮点击
    handleRightAction() {
      if (this.rightAction) {
        this.rightAction();
      }
      this.$emit('right-click');
    }
  }
}
</script>

<style scoped>
.nav-bar {
  height: 44px;
  background-color: v-bind(backgroundColor);
  color: v-bind(textColor);
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 15px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  z-index: 1000;
}

.back-btn {
  width: 24px;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.back-btn:active {
  opacity: 0.6;
}

.arrow-left {
  width: 12px;
  height: 12px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.back-btn:hover .arrow-left {
  transform: rotate(45deg) translateX(-1px);
}

.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  max-width: calc(100% - 120px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.right-btn {
  position: absolute;
  right: 15px;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  font-size: 14px;
}

.right-btn:active {
  opacity: 0.6;
}

.right-btn i {
  font-size: 16px;
  margin-right: 4px;
}

.right-btn span {
  font-weight: 500;
}

/* 响应式优化 */
@media screen and (max-width: 375px) {
  .title {
    max-width: calc(100% - 100px);
    font-size: 15px;
  }
  
  .right-btn {
    font-size: 13px;
  }
}
</style>