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

<script>
import AddList from './AddList.vue'
import List from './List.vue'

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

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

  components: {
    AddList,
    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)
      }))
    }
  },
  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>
.form-wrapper {
  // padding-bottom: 98px;
}
</style>
