<template>
  <div class="zui-nav-bar" :class="classRender" :style="styleRender">
    <div class="zui-nav-bar__left">
      <span @click="clickLeft">
        <slot v-if="$scopedSlots[leftSlot] || $slots[leftSlot]" :name="leftSlot"></slot>
        <template v-else>
          <zui-icon v-if="leftArrow" :name="leftIcon" size="1.3rem"></zui-icon>
          <div class="zui-nav-bar__text" v-if="leftText">{{ leftText }}</div>
        </template>
      </span>
    </div>
    <div class="zui-nav-bar__title md-ellipsis">
      <slot v-if="$scopedSlots[titleSlot] || $slots[titleSlot]" :name="titleSlot"></slot>
      <template v-else>{{ title }}</template>
    </div>
    <div class="zui-nav-bar__right">
      <span @click="clickRight">
        <slot v-if="$scopedSlots[rightSlot] || $slots[rightSlot]" :name="rightSlot"></slot>
        <template v-else>
          <div class="zui-nav-bar__text" v-if="rightText">{{ rightText }}</div>
        </template>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  props: {
    title: {
      // 标题
      type: String,
      default: '',
    },
    leftIcon: {
      // 左侧图标
      type: String,
      default: 'return',
    },
    leftText: {
      // 左侧文案
      type: String,
      default: '',
    },
    rightText: {
      // 右侧文案
      type: String,
      default: '',
    },
    leftArrow: {
      // 是否显示左侧箭头
      type: Boolean,
      default: false,
    },
    fixed: {
      // 是否固定在顶部
      type: Boolean,
      default: false,
    },
    border: {
      // 是否显示下边框
      type: Boolean,
      default: false,
    },
    zIndex: {
      type: [Number, String],
      default: 1,
    },
    primary: {
      // 是否为品牌色主题
      type: Boolean,
      default: false,
    },
  },
  data: function () {
    return {
      leftSlot: 'left',
      rightSlot: 'right',
      titleSlot: 'title',
    };
  },
  computed: {
    classRender: function () {
      return {
        'zui-nav-bar--border-bottom': this.border,
        'zui-nav-bar--fixed': this.fixed,
        'zui-nav-bar--primary': this.primary,
      };
    },
    styleRender: function () {
      return { 'z-index': this.zIndex };
    },
  },
  methods: {
    clickLeft: function () {
      if (this.$listeners['click-left']) {
        this.$emit('click-left');
      } else {
        if (window.api) {
          window.api.closeWin();
        }
      }
    },
    clickRight: function () {
      this.$emit('click-right');
    },
  },
};
</script>

<style>
@import './index.css';
</style>
