<template>
  <ai-list v-if="showList">
    <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"
          :name="String(i)"
        >
          <component
            :is="tab.comp"
            v-if="currIndex === String(i)"
            :ref="currIndex"
            :instance="instance"
            :dict="dict"
            @change="changeDetail"
          ></component>
        </el-tab-pane>
      </el-tabs>
    </template>
  </ai-list>

  <component
    v-else
    @change="changeDetail"
    :is="componentName"
    :params="params"
    :instance="instance"
    :dict="dict"
  ></component>
</template>

<script>
import commonList from './components/commonList.vue'
import systemList from './components/systemList.vue'
import Detail from './components/Detail'
import detailSystem from './components/detailSystem'

export default {
  label: '消息推送',
  name: 'AppMsgTemplate',
  // 组件
  components: {
    commonList,
    systemList,
    Detail,
    detailSystem
  },
  props: {
    instance: Function,
    dict: Object
  },
  data() {
    return {
      currIndex: '0',
      showList: true,
      componentName: '',
      params: {}
    }
  },
  // 计算
  computed: {
    tabs() {
      return [
        {
          label: '公共模板',
          name: 'commonList',
          comp: commonList
        },
        {
          label: '系统模板',
          name: 'systemList',
          comp: systemList
        }
      ]
    }
  },
  // 监听
  watch: {},
  // 实例创建后
  created() {},
  // 实例渲染后
  mounted() {},
  // 方法
  methods: {
    changeDetail(data) {
      if (data.type === 'detail') {
        this.showList = false
        this.componentName = 'Detail'
        this.params = data.params
      }
      if (data.type === 'detailSystem') {
        this.showList = false
        this.componentName = 'detailSystem'
        this.params = data.params
      }
      if (data.type === 'list') {
        this.showList = true
        this.$nextTick(() => {
          if (data.isRefresh) {
          }
        })
      }
    }
  }
}
</script>

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