<template>
  <div class="form">
    <div class="form-content">
      <add-list ref="addList" v-if="currIndex === 1"></add-list>
      <list ref="list" v-if="currIndex === 0"></list>
    </div>
    <ai-tabbar :active.sync="currIndex" :list="tabBar"/>
    <div class="form-footer"></div>
  </div>
</template>

<script>
import addList from './components/addList.vue'
import list from './components/list.vue'
import AiTabbar from '../../components/AiTabbar'

export default {
  name: 'AppAskForm',
  appName: '问卷表单',

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

  components: {
    addList,
    AiTabbar,
    list
  },

  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)
      }))
    }
  },

  onLoad () {
    uni.$on('reload', () => {
      if (this.currIndex === 0) {
        this.$refs.list.reload()
      } else {
        this.$refs.addList.getList()
      }
    })
  },

  onReachBottom() {
    if (this.currIndex === 0) {
      this.$refs.list.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .form {
    padding-bottom: 98px;
  }
</style>
