<template>
  <div id="index">
    <vue-office-header :projectName="projectName" @collapseTag="collapseTag" @toRouterView="toRouterView"></vue-office-header>
    <div id="content" class="content">
      <div class="content-body" :style="{height: contentHeight}">


      </div>
    </div>
    <!-- 自定义弹框组件 -->
    <custom-dialog :showCustomDialog="showCustomDialog" @customHandleConfirm="customHandleConfirm"></custom-dialog>
    <button @click="showDialogLayer"></button>
  </div>
</template>
<script>
// 自定义弹窗
import customDialog from "@/components/index/customDialog";
// 公共头部菜单
// import vueOfficeHeader from "@/components/vue-office-header";

export default {
  name: 'index',
  data() {
    return {
      projectName: 'gic-clique',
      contentHeight: '0px', //页面内容高度

      showCustomDialog: false, // 自定义弹框显示标志
    }
  },
  methods: {
    // 处理路由跳转
    toRouterView(val) {
      var that = this;
      // 模拟检查数据
      // //有两个参数
      //{
      //  name:,
      //  path:
      //}
      console.log(val);
      that.$router.push({
        path: val.path
      })
    },
    // 折叠事件
    collapseTag(val) {
      var that = this;
      console.log(val);
      that.collapseFlag = val
    },

    // 自定义弹窗显示事件
    showDialogLayer() {
      var that = this
      that.showCustomDialog = true;
    },

    // 自定义弹框触发事件
    customHandleConfirm(val) {
      var that = this
      that.showCustomDialog = false;
    }
  },
  mounted() {
    var that = this

    that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 + 'px'
  },
  components: {
    customDialog,
    // vueOfficeHeader
  }
}

</script>
<style lang="less" scoped>
#index {
  .content {
    padding-top: 64px;
    box-sizing: border-box;
    overflow: auto;
    min-width: 1400px;

    .content-body {
      display: flex;
      overflow: hidden;

      .right-wrap {
        flex: 1;
        overflow: auto;
        width: 100%;

        .right-content {
          padding: 24px;
          min-height: 480px;

          .right-box {
            /*background: #fff;*/
            /*padding: 24px;*/
          }
        }

        &.near-store-contain {
          .right-content {
            min-height: 570px;
          }
        }

        /deep/ .el-tabs__nav {
          z-index: 1;
        }
      }
    }
  }

  /deep/ .el-submenu__title {
    height: 40px;
    line-height: 40px;
  }

  /* 表格为空 */
  /deep/ .el-table__empty-block {
    height: 256px;
  }
}

/* 隐藏 头部 */
.navheader {
  div.itemlink-gic.bottom {
    display: none;
  }

  a.itemlink.bottom {
    display: none;
  }
}


.el-table__empty-block {
  height: 256px;
}

.el-table__empty-text {
  width: auto;
  margin-bottom: 80px;

  &::before {
    content: ' ';
    display: block;
    width: 60px;
    height: 60px;
    background: url(../../assets/no-data_icon.png) no-repeat center;
    margin: 0px auto 22px auto;
  }
}

.el-submenu__title {
  height: 40px;
  line-height: 40px;
}

.user-header-pop {
  min-width: 95px;
}

.el-popover.user-header-pop {
  min-width: 95px;
}

.left-aside-contain {
  /deep/ .el-submenu__title:hover {
    background-color: #020b21;
  }
}

.el-menu.el-menu--popup {
  background: #020b21;
  border-radius: 4px;
}

/* 输入框 focus*/
.el-form-item.is-success .el-input__inner,
.el-form-item.is-success .el-input__inner:focus,
.el-form-item.is-success .el-textarea__inner,
.el-form-item.is-success .el-textarea__inner:focus {
  border-color: #dcdfe6;
}

/* 箭头*/
.icon-to-pre {
  cursor: pointer;
  font-size: 18px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.icon-to-next {
  cursor: pointer;
  font-size: 18px;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

/*树形*/
.vue-treeselect /deep/ {

  /deep/ .vue-treeselect__control {
    height: 36px;
    /*line-height: 36px;*/
    cursor: pointer;
  }

  .vue-treeselect__placeholder {
    line-height: 36px;
    font-size: 12px;
  }

  .vue-treeselect__multi-value-item-container,
  .vue-treeselect__multi-value {
    line-height: 1
  }

  span.vue-treeselect__multi-value-label {
    line-height: 1;
  }

  .vue-treeselect__multi-value-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f0f2f5;
    color: #909399;
  }

  .vue-treeselect__value-remove {
    color: #909399;
  }

  &:not(.vue-treeselect--disabled) .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-disabled):hover {
    background-color: #f0f2f5;
    color: #909399;
  }

  .vue-treeselect--searchable:not(.vue-treeselect--disabled) .vue-treeselect__value-container {
    cursor: pointer;
  }

  .vue-treeselect__control-arrow {
    display: none;
  }

  .vue-treeselect__control-arrow-container {
    position: relative;
  }

  /deep/.vue-treeselect__control-arrow-container:after,
  .vue-treeselect__control-arrow-container:before {
    border: 6px solid transparent;
    border-left: 6px solid #fff;
    width: 0;
    height: 0;
    position: absolute;
    top: 49%;
    left: 50%;
    margin-left: -6px;
    content: ' ';
    margin-top: -3px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    transition: transform .3s, -webkit-transform .3s;
  }

  /deep/ .vue-treeselect__control-arrow-container:before {
    border-left-color: #c0c4cc;
    top: 52%;
  }

  &.vue-treeselect--focused .vue-treeselect__control-arrow-container:after,
  &.vue-treeselect--focused .vue-treeselect__control-arrow-container:before {
    margin-top: -6px;
    -webkit-transform: rotateZ(-90deg);
    -moz-transform: rotateZ(-90deg);
    -o-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    transition: transform .3s, -webkit-transform .3s;
  }

  &.vue-treeselect--focused .vue-treeselect__control-arrow-container:before {
    border-left-color: #c0c4cc;
    top: 47%;
  }

  .vue-treeselect--has-value .vue-treeselect__multi-value {
    margin-bottom: 0;
  }
}

/* 富文本编辑器 */
.mce-tinymce {
  -webkit-box-shadow: none;
  box-shadow: none;
}

</style>
