<template>
  <div id="dataPublish">
    <br/>
    <div class="left">
      <el-scrollbar :max-height="menuHeight">
        <el-menu default-active="0" class="dataPublish-menu" @select="handleServiceSelect">
          <el-menu-item v-for="(item,index) of serviceList" :key="index" :index="index+''" >
            <el-icon>
              <IconPark-server/>
            </el-icon>
            <span>{{ item.serviceName }}</span>
          </el-menu-item>
        </el-menu>
        <el-empty description="无服务/权限" v-if="!serviceList || serviceList.length<1"></el-empty>
      </el-scrollbar>

    </div>
    <div class="content">
      <PublishDetail :data="currService" v-if="currService.serviceName"/>
    </div>
  </div>
</template>

<script>
import PublishDetail from '@/components/dataPublish/PublishDetail'
import ServiceData from "@/static/datas/ServiceData";

export default {
  data() {
    return {
      menuHeight: '',
      serviceList: [],
      currService: {},
      pageShow: {},
    }
  },
  props: {
    height: Object
  },
  components: {
    PublishDetail
  },
  created() {
    let app = this;
    this.pageShow = this.$store.state.pageShow;
    this.menuHeight = this.height * 0.7;
    this.serviceList = JSON.parse(JSON.stringify(ServiceData))
    this.serviceList = this.serviceList.filter(item=>app.pageShow[item.authKey])
    if (this.serviceList.length > 0) {
      this.currService = this.serviceList[0]
    }
  },
  mounted() {
  },
  methods: {
    handleServiceSelect(val) {
      this.currService = this.serviceList[Number(val)]
    }
  }
}

</script>

<style scoped>
#dataPublish .left {
  display: inline-block;
  width: 20%;
  height: 100%;
}

#dataPublish .content {
  display: inline-block;
  width: 79%;
  vertical-align: top;
  height: 100%;
}
</style>

<style>
#dataPublish .el-menu-item,.el-sub-menu__title {
  font-size: 17px !important;
  font-weight: 600;
  color: #373737;
}
</style>