<template>
  <div class="container clear">
    <div
      class="item"
      v-for="(item, index) in buttons"
      :key="item"
      @click="$emit('click-btn', { item, index })"
    >
      {{ item }}
    </div>
  </div>
</template>

<script setup>
import { defineEmits, computed, inject } from 'vue';

const scene = inject('scene');

defineEmits(['click-btn']);

const buttons = computed(() => {
  if (scene === 'center') {
    return ['农场连线', '时物链', '数据监控', '导出统计'];
  } else {
    return ['专家连线', '时物链', '系统总览', '导出统计'];
  }
});
</script>

<style scoped>
.container {
  height: 45rem;
  position: absolute;
  bottom: 14rem;
  width: 100%;
}

.item {
  width: 144rem;
  height: 45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('assets/images/btn-border.png') no-repeat center;
  background-size: 100%;
  color: #01f6ff;
  font-size: 15rem;
  cursor: pointer;
}
.item:nth-of-type(1) {
  float: left;
  margin-left: 20rem;
}
.item:nth-of-type(2) {
  float: left;
  margin-left: 24rem;
}
.item:nth-of-type(3) {
  float: right;
  margin-right: 24rem;
  margin-left: 24rem;
}
.item:nth-of-type(4) {
  float: right;
}
</style>
