<template>
  <ai-list v-if="!isShowDetail">
    <template slot="title">
      <ai-title title="客户群发" :isShowBottomBorder="true"></ai-title>
    </template>
    <template slot="tabs">
      <component :ref="activeName" :is="activeName" @change="change" :instance="instance" :dict="dict"
                 :permissions="permissions"/>
    </template>
  </ai-list>
  <component v-else :is="activeName" :params="params" @change="change" :instance="instance" :dict="dict" :permissions="permissions"/>
</template>

<script>
  import TableList from './components/TableList.vue'
  import NewClientMass from './components/NewClientMass.vue'
  import {mapState} from 'vuex'

  export default {
    name: 'AppClientMassTextin',
    label: '客户群发',
    components: {
      TableList,
      NewClientMass,
    },
    props: {
      instance: Function,
      dict: Object,
      permissions: Function
    },

    computed: {
      ...mapState(['user']),
    },

    data() {
      return {
        activeName: 'TableList',
        params: {},
        isShowDetail: false,
      }
    },

    methods: {
      change(val) {
        console.log(val);
        if (val.type) {
          this.activeName = val.type
          switch (val.type) {
            case "NewClientMass":
              this.isShowDetail = true
              this.params = val.row
              break;
            case "TableList":
              this.isShowDetail = false
              this.$nextTick(() => {
                this.$refs[this.activeName].getList()
              })
              break;
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
