<template>
  <!-- 导航条 -->
  <div class="bar" :style="{ background: num ? '#005CCD' : '#f9f9f9', color: num ? '#fff' : 'rgba(0, 0, 0, 0.90)' }">
    <div v-if="num !== 0 || backPage !==0" style="position: absolute;left: 10px;">
      <van-icon @click="back" name="arrow-left" />
    </div>

    <div class="barTitle" style="font-size: 20px;" v-if="tit!==''">
      {{ tit }}
    </div>

		<div v-else>
			<slot name="title"></slot>
		</div>

    <div v-if="setting" style="position: absolute;right: 10px;">
			<van-popover placement="bottom-end" v-model="showSetting" trigger="click">
        <slot name="setting"></slot>
        <template #reference>
					<slot name="settingIcon"></slot>
					<!-- <van-icon name="weapp-nav" /> -->
        </template>
      </van-popover>
    </div>

		<div style="position: absolute;right: 10px;">
			<slot name="changeChapter" ></slot>
		</div>
</div>
</template>

<script>
// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function(event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event)
      }
    }
    // 在文档上添加点击事件监听器
    document.addEventListener('click', el.clickOutsideEvent)
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener('click', el.clickOutsideEvent)
  }
}
export default {
  props: {
    tit: {
      type: String,
      default: ''
    },
    num: {
      type: Number,
      default: 0
    },
    backPage: {
      type: Number,
      default: 0
    },
    setting: {
      type: Boolean,
      default: false
    }
  },
  directives: {
    'click-outside': clickOutside // 注册自定义指令
  },
  data() {
    return {
      barBackColor: 'barBackColor',
      showSetting: false
    }
  },

  methods: {
    back() {
      if (this.backPage == 1) {
        console.log(this.backPage)
        this.$router.go(-1)
        // this.$router.push({ path: '/classObserve', query: {} })
      } else {
        this.$emit('cutPage')
      }
    },
    settingFn() {
      this.showSetting = !this.showSetting
    }
  }
}
</script>

<style lang="scss" scoped>
.bar {
  width: 100%;
  height: 40px;
  z-index: 999;
  font-weight: 550;
  // background-color: #f9f9f9;
  display: flex;
  box-sizing: border-box;
  padding: 0 10px;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  font-size: 17px;
	color: black !important;
	background-color: #fff !important;
}

.barTitle{
	max-width: 50vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
