<template>
  <ai-list class="AppGridMember" v-if="!isShowDetail">
    <template slot="title">
      <ai-title title="网格员管理" :isShowBottomBorder="false"></ai-title>
    </template>
    <template slot="tabs">
      <el-tabs v-model="currIndex">
        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
          <component :ref="String(i)" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance" :dict="dict" :permissions="permissions"/>
        </el-tab-pane>
      </el-tabs>
    </template>
  </ai-list>
  <Add v-else-if="component === 'Add'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Add>
  <Family v-else-if="component === 'Family'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Family>
  <ApplyDetail v-else-if="component === 'ApplyDetail'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></ApplyDetail>
  <ApplyAdd v-else-if="component === 'ApplyAdd'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></ApplyAdd>
</template>

<script>
  import List from './components/list'
  import ApplyList from './components/ApplyList'
  import Add from './components/add'
  import ApplyDetail from './components/ApplyDetail'
  import ApplyAdd from './components/ApplyAdd'
  import Family from './components/Family'

  export default {
    name: "AppGridMember",
    label: "网格管理员",

    props: {
      instance: Function,
      dict: Object,
      permissions: Function
    },

    data() {
      return {
        component: "List",
        params: {},
        include: [],
        currIndex: '0',
        isShowDetail: false
      };
    },

      computed: {
        tabs () {
          const tabList = [
            {label: '网格员信息', name: 'List', comp: List, permission: ''},
            {label: '申报信息', name: 'ApplyList', comp: ApplyList, permission: 'app_appgirdmemberapply_detail'}
          ].filter(item => {
            return item.name !== 'ApplyList' || this.permissions(item.permission)
          })

          return tabList
        }
      },

    components: {
      Add,
      List,
      Family,
      ApplyList,
      ApplyDetail,
      ApplyAdd
    },

    mounted() {},

    methods: {
      onChange(data) {
        if (data.type === "Add") {
          this.component = "Add"
          this.isShowDetail = true
          this.params = data.params
        }

        if (data.type === "Family") {
          this.component = "Family"
          this.isShowDetail = true
          this.params = data.params
        }
        if (data.type === "ApplyDetail") {
          this.component = "ApplyDetail"
          this.isShowDetail = true
          this.params = data.params
        }

        if (data.type === "ApplyAdd") {
          this.component = "ApplyAdd"
          this.isShowDetail = true
          this.params = data.params
        }

        if (data.type === "list") {
          this.component = "List"
          this.isShowDetail = false
          this.params = data.params
        }

        if (data.type === "ApplyList") {
          this.component = "ApplyList"
          this.isShowDetail = false
          this.params = data.params
        }
      }
    }
  }
</script>

<style lang="scss">
  .AppGridMember {
    height: 100%;
  }
</style>
