<template>
  <div class="dashboard-container">
    <component :is="currentRole" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor'

export default {
  name: 'Dashboard',
  components: { adminDashboard, editorDashboard },
  data() {
    return {
      currentRole: 'adminDashboard'
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
  }
}
</script>
<!-- <template>
  <div class="app-container">
    <el-main v-if="haveRoles">
      <div class="left-side">
        <div class="index-head" style="border-bottom-right-radius: 0px;border-bottom-left-radius:0px">
          <el-row>
            <el-radio-group v-model.trim="type" size="small">
              <el-radio-button
                :label="1"
                border
                class="buttonOption"
              >车行看板</el-radio-button>
              <el-radio-button
                v-if="filterButton('person_board')"
                :label="2"
                border
                class="buttonOption"
              >人行看板</el-radio-button>
            </el-radio-group>
          </el-row>
        </div>
        <keep-alive>
          <component :is="boardData" />
        </keep-alive>
      </div>
      <div class="right-side">
        <notice />
        <shortcut />
      </div>
    </el-main>
    <div v-else>
      <component :is="currentRole" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor'
import headerList from './components/headerList'
import chartsBody from './components/chartsBody'
import notice from './components/notice'
import shortcut from './components/shortcut'
import personData from './boardData/person.vue'
import perkData from './boardData/park.vue'
export default {
  components: {
    adminDashboard,
    editorDashboard,
    headerList,
    chartsBody,
    notice,
    shortcut,
    personData,
    perkData
  },
  data() {
    return {
      // haveRoles: true,
      date: '',
      currentRole: 'adminDashboard',
      componentName: '',
      offsetLeft: '0',
      offsetXValue: 0,
      type: 1
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    haveRoles() {
      const activeList = this.$store.state.user.toplist.filter(item => item.id == this.$store.state.user.topnav + '')[0]
      return activeList.name == '首页' && this.$route.path == '/dashboard'
    },
    boardData() {
      if (this.type == 1) {
        return 'perkData'
      } else {
        return 'personData'
      }
    }
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
  },
  mounted() {
    // if (this.haveRoles) {
    //   const _this = this
    //   // #region 页面大小变化时控制三角形指向箭头的位置
    //   _this.offsetLeft = document.querySelector('.selected-box').querySelector('.select').offsetLeft - 27
    //   document.querySelector('.header-list').querySelector('.el-scrollbar__wrap').addEventListener('scroll', function(e) {
    //     _this.offsetXValue = this.scrollLeft
    //     _this.offsetLeft = document.querySelector('.' + _this.componentName).offsetLeft + document.querySelector('.selected-box').querySelector('.select').offsetLeft - 27 - this.scrollLeft
    //   })
    //   // #endregion
    //   // 页面滚动时隐藏element时间选择组件
    //   document.querySelector('.app-container').addEventListener('scroll', function(e) {
    //     _this.$refs.chartsBodyRef.hideDatePicker()
    //   })
    // }
  },
  methods: {
    // 选中标签改变时触发
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background: #EFF3F5;
  padding: 0;
  margin: 0;
  .el-main {
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    .left-side {
      width: calc(100% - 320px);
      // height: 100%;
      border-radius: 10px;
      .index-head {
        padding: 20px 30px 14px 30px;
        background: #ffffff;
        border-radius: 10px;
        position: relative;
        .selected {
          overflow: hidden;
          width: calc(100% - 60px);
          height: 50px;
          position: absolute;
          /deep/ .el-icon-caret-top {
            font-size: 54px;
            padding-top: 4px;
            color: #ffffff;
          }
        }
      }
      .index-charts {
        // height: calc(100% - 320px);
        // min-width: 750px;
        margin-top: 18px;
        background: #ffffff;
        border-radius: 10px;
      }
    }
    .right-side {
      margin-left: 20px;
      width: 300px;
      // height: 100%;
    }
  }
}
.date {
  font-size: 14px !important;
  line-height: 36px !important;
  margin-left: 8px;
  color: #999999 !important;
  padding-left: 0px !important;
}
</style>
 -->
