<template>
  <section style="height: 100%;">
    <ai-list v-if="!showDetail">
      <template slot="title">
        <ai-title title="通知公告"></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==i" :ref="currIndex" :instance="instance" :dict="dict"
                        @goPage="goPage"/>
          </el-tab-pane>
        </el-tabs>
      </template>
    </ai-list>
    <component v-else :is="currentComp" :instance="instance" :dict="dict" :detail="detailRow" @gotoEdit="gotoAdd" ></component>
  </section>
</template>
<script>
  import add from './components/add';
  import detail from './components/detail'
  import manageDetail from './components/manageDetail'
  import recentNotice from './components/recentNotice'
  import noticeManage from './components/noticeManage'

  export default {
    name: 'AppNotification',
    label: "通知公告",
    components: {add, detail, recentNotice,noticeManage,manageDetail},
    provide() {
      return {
        top: this
      }
    },
    props: {
      instance: Function,
      dict: Object,
    },
    data() {
      return {
        currIndex: "0",
        currentComp: "",
        showDetail: false,
        detailRow: {},
      }
    },
    computed: {
      tabs() {
        return [
          {label: "最新公告", name: "recentNotice", comp: recentNotice, detail: detail},
          {label: "公告管理", name: "noticeManage", comp: noticeManage, detail: manageDetail},
        ]
      },
    },

    methods: {
      goPage(params) {
        params.row && (this.detailRow = params.row)
        this.currentComp = params.comp

        if (params.comp == 'detail' || params.comp == 'add' || params.comp == "manageDetail") {
          this.showDetail = true
        }
      },
      goBack() {
        this.showDetail = false;
      },
      gotoAdd(obj) {
        this.showDetail = true
        this.detailRow = obj
        this.currentComp = 'add'
      },
    },
  }
</script>
<style lang="scss" scoped>
  :deep( .ai-list__content--right-wrapper ){
    background-color: transparent !important;
    box-shadow: none !important;
  }
</style>
