<template>
  <section class="guardianship">
    <component ref="currentTab" :is="currentTab.comp"/>
    <ai-tabbar :active.sync="active" :list="bottomBar"/>
  </section>
</template>

<script>
import AiLoading from "../../components/AiLoading";
import GsLocation from "./gsLocation";
import AiTabbar from "../../components/AiTabbar";
import WardList from "./wardList";
import EarlyWarning from "./earlyWarning";

export default {
  name: "guardianship",
  components: {AiTabbar, AiLoading},
  provide() {
    return {
      top: this
    }
  },
  computed: {
    bottomBar() {
      return [
        {text: "定位", iconPath: "bardwn", selectedIconPath: "bardwh", comp: GsLocation},
        {text: "人员", iconPath: "barryn", selectedIconPath: "barryh", comp: WardList},
        {text: "预警", iconPath: "baryjn", selectedIconPath: "baryjh", comp: EarlyWarning},
      ].map(e => ({
        ...e,
        iconPath: this.cdn(e.iconPath),
        selectedIconPath: this.cdn(e.selectedIconPath)
      }))
    },
    currentTab() {
      return this.bottomBar?.[this.active] || {}
    }
  },
  methods: {
    cdn(icon) {
      return `${this.$cdn}guardianship/${icon}.png`
    },
  },
  data() {
    return {
      active: 0
    }
  },
  created() {
    this.$dict.load("intelligentGuardianshipItem", 'intelligentGuardianshipItem2', 'intelligentGuardianshipAbnormalStatus')
  },
  onReachBottom() {
    if (typeof this.$refs?.currentTab?.reachBottom == 'function') this.$refs?.currentTab.reachBottom()
  }
}
</script>

<style lang="scss" scoped>
.guardianship {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}
</style>
