<!--
  @description: 消息中心
  @Modifier: wy
  @routerPath: /personalCenter/messageCenter
  @date: 2022-1-4 17:10
-->
<template>
  <div class="messageCenter">
    <!--  顶部标题栏  -->
    <div class="nav">
      <span class="nav-title">消息中心</span>
      <gx-button type="text" icon="el-icon-setting" @click="visibleDialog=true">
        设置
      </gx-button>
    </div>
    <div class="p0-16 mt10">
      <!--  tag部分  -->
      <div>
        <el-tabs v-model="orderData.activeName" @tab-click="tabClick">
          <el-tab-pane
            v-for="(item,index) in tabsList"
            v-if="item.show"
            :key="index"
            :name="item.index"
          >
            <span slot="label">
              {{ item.name }}
              <template v-if="item.num>0">
                （{{ item.num }}）
              </template>
            </span>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 各模块组件页面 -->
      <component :is="activeComponentName" />
    </div>
    <setting-tag
      v-if="visibleDialog"
      :visible-dialog.sync="visibleDialog"
      :tabs-list="tabsList"
      @changeTabsShow="changeTabsShow"
    />
  </div>
</template>

<script>
// import allMessage from './allMessage'
import logisticsInformation from './logisticsInformation'
import systemMessage from './systemMessage'
import activeMessage from './activeMessage'
import otherMessage from './otherMessage'
import settingTag from './components/settingTag'
export default {
  name: 'MessageCenter',
  components: {
    // allMessage,
    logisticsInformation,
    systemMessage,
    activeMessage,
    otherMessage,
    settingTag
  },
  data() {
    return {
      orderData: {
        activeName: '0', // 默认选中tabList index值
        activeIndex: 0 // 当前选中tab下标
      },
      tabsList: [
        { index: '0', name: '全部', num: null, statusTitle: '全部', compName: 'allMessage', show: true },
        { index: '1', name: '物流信息', num: null, statusTitle: '物流信息', compName: 'logisticsInformation', show: true },
        { index: '2', name: '系统通知', num: null, statusTitle: '系统通知', compName: 'systemMessage', show: true },
        { index: '3', name: '活动优惠', num: null, statusTitle: '活动优惠', compName: 'activeMessage', show: true },
        { index: '4', name: '其他', num: null, statusTitle: '其他', compName: 'otherMessage', show: false }
      ],
      activeComponentName: 'allMessage',
      visibleDialog: false
    }
  },
  methods: {
    // 切换tab
    tabClick(tab) {
      const index = Number(tab.index)
      this.orderData.activeIndex = index
      this.activeComponentName = this.tabsList[index].compName
    },
    // 设置tab显示与否
    changeTabsShow(arr) {
      this.tabsList.forEach(item => {
        if (arr.includes(item.name) || item.name === '全部') {
          item.show = true
        } else {
          item.show = false
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .messageCenter {
    margin: 0 26px;
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      .nav-title {
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
</style>
