<template>
  <div class="form-wrapper">
    <div class="form-content">
      <Home ref="Home" v-if="currIndex === 0" @change="onChange"/>
      <Organize ref="Organize" v-if="currIndex === 1" @change="onChange"/>
    </div>
    <AiTabbar :active.sync="currIndex" :list="tabBar"/>
  </div>
</template>

<script>
  import Home from './Home.vue'
  import Organize from './Organize.vue'

  export default {
    name: 'Tabbar',
    appName: '乡村相册',

    data() {
      return {
        currIndex: 0
      }
    },

    components: {
      Home,
      Organize
    },

    computed: {
      tabBar() {
        const link = icon => `${this.$cdn}askform/${icon}.png`
        return [
          {text: "相册", iconPath: "bdlb1", selectedIconPath: "bdlb2"},
          {text: "组织", iconPath: "xjxm1", selectedIconPath: "xjxm2"}
        ].map(e => ({
          ...e,
          iconPath: link(e.iconPath),
          selectedIconPath: link(e.selectedIconPath)
        }))
      }
    },

    methods: {
      onChange(e) {
        this.$emit('change', e)
      },
      show() {
        if (this.currIndex == 0) {
          this.currIndex = -1
          this.$nextTick(() => {
            this.currIndex = 0
          })
        }
      }
    },
    onReachBottom() {
      if (this.currIndex === 0) {
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
