<script>
const screens = [
  {id: '5b1849ac-4fc3-451a-844c-3362b47341ef', label: '市场看板', bg: 'http://10.0.97.209/img/kengee/kengee16.png'},
  {id: '7d26854c-769d-418b-9bae-5c1105e716a9', label: '多店监控', bg: 'http://10.0.97.209/img/kengee/kengee17.png'},
  {id: 'a90522ef-869b-40ea-8542-d1fc9674a1e8', label: '单店监控', bg: 'http://10.0.97.209/img/kengee/kengee18.png'},
]
export default {
  name: "AppNavbar",
  label: "标题栏",
  data() {
    return {screens}
  },
  computed: {
    groupId: v => v.$marketBoard.screenId,
    backgroundImage() {
      const item = this.screens.find(e => e.id === this.groupId)
      return `url(${item.bg})`
    }
  },
  watch: {
    groupId: {
      immediate: true,
      handler(val) {
        if (val) {
          $glob.group = this.groupId
        }
      }
    },
  }
}
</script>

<template>
  <section class="AppNavbar" :style="{backgroundImage}">
    <div v-for="e in screens" :key="e.id" @click="$marketBoard.screenId=e.id" class="pointer"/>
  </section>
</template>

<style scoped>
.AppNavbar {
  max-width: 1920px;
  height: 80px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  gap: 14px;
}

.AppNavbar .pointer {
  width: 172px;
  height: 50px;
  cursor: pointer;
}
</style>
