<template>
  <section class="conference">
    <ai-list v-if="!showDetail">
      <template slot="title">
        <ai-title title="会议管理"></ai-title>
      </template>
      <template slot="tabs">
        <el-tabs v-model="currIndex" @tab-click="handleClick">
          <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"
                       :permissions="permissions" @goPage="goPage" :listType="listType" />
          </el-tab-pane>
        </el-tabs>
      </template>
    </ai-list>

    <component v-else :is="currentComp" :instance="instance" :dict="dict" :detail="detailRow" :listType="listType" @gotoEdit="gotoAdd" ></component>

  </section>
</template>
<script>
import addMeeting from './addMeeting';
import detail from './detail'
import list from './list'

export default {
  name: 'AppConference',
  label: "会议管理",
  components: {addMeeting, detail, list},
  provide() {
    return {
      top: this
    }
  },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      //会议状态，0、草稿；1、未开始；2、进行中；3、已取消；4、已结束
      //参会状态，0、未确认；1、已确认；2、缺席
      currIndex: "0",
      currentComp: "",
      showDetail: false,
      detailRow: {},
      listType: '1',
    }
  },
  computed:{
    tabs() {
      return [
        {label: "我参与的会议", name: "addMeeting", comp: list, detail: detail, permission: ""},
        {label: "我发起的会议", name: "addMeeting",  comp: list, detail: detail, permission: ""},
      ]
    },
  },

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

      if(params.comp == 'detail' || params.comp == 'addMeeting') {
        this.showDetail = true
      }
    },
    handleClick() {
      if (this.currIndex == 0) {
        this.listType = '1'
      } else {
        this.listType = '0'
      }
    },
    goBack() {
      this.showDetail = false;
      if (this.currIndex == '0') {
        this.listType = '1'
      } else {
        this.listType = '0'
      }
    },
    gotoAdd(obj) {
      this.showDetail = true
      this.detailRow = obj
      this.currentComp = 'addMeeting'
    },
  },
}
</script>
<style lang="scss" scoped>
  .conference {
    height: 100%;

    :deep( .ai-list__content--right-wrapper ){
      background-color: transparent !important;
      box-shadow: none !important;
    }
  }
</style>
