<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 class="index-swiper">
          <el-carousel trigger="click" height="250px" arrow="never" :autoplay="false">
            <el-carousel-item v-for="(item,index) in bannerList" :key="index">
              <img :src="item.src" alt=""/>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="index-company flex flex-row m-t-24">
          <div class="index-company-left m-r-24 border-box radius-2">
            <div class="index-company-logo">
              <img :src="companyObj.logo" alt="log"/>
            </div>
            <div class="index-company-name color-303133">{{companyObj.name}}</div>
            <ul>
              <li class="flex flex-between"><span>账户余额</span><span class="color-303133 font-16">{{companyObj.money}}</span></li>
              <li class="flex flex-between"><span>企业编码</span><span class="color-303133 font-16">{{companyObj.code}}</span></li>
              <li class="flex flex-between"><span>企业认证</span><span :class="[companyObj.authStatus == 1? 'authActive':'unAuth']"><i class="iconfont icon-renzheng p-r-6 "></i>{{companyObj.authStatus == 1? '已认证':'未认证'}}</span></li>
              <li class="flex flex-between"><span>帮助手册</span><span class="color-1890ff">立即下载<i class="el-icon-arrow-right"></i></span></li>
            </ul>
          </div>
          <div class="index-company-right radius-2">
            <div class="index-company-right__head flex flex-between border-box border-b-e4e7e7">
              <span class="color-303133 font-16">数据概览</span><span class="auto-define" @click="showDialogLayer"><i class="iconfont icon-zidingyi color-909399"></i></span>
            </div>
            <div class="index-company-right__body p-24 border-box">
              <ul class="flex flex-row flex-wrap">
                <li  v-for="(item,index) in dataOverview" :key="index">
                  <div class="color-606266 font-16 data-name">{{ item.name }}</div>
                  <div class="color-303133 font-30 data-num">{{ item.num }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="index-entry m-t-24 radius-2">
          <div class="index-entry-head flex flex-between border-box border-b-e4e7e7">
            <span class="color-303133 font-16">快捷入口</span><span class="auto-define" @click="showDialogLayer"><i class="iconfont icon-zidingyi color-909399"></i></span>
          </div>
          <div class="index-entry-body p-24 border-box">
            <ul class="flex flex-row flex-wrap">
              <li  v-for="(item,index) in entryData" :key="index" class="flex flex-align-center border-box flex" @click="changeRoute(item.route)">
                <span class="square-item flex flex-align-center flex-pack-center" :style="{background: item.color}"><i :class="['iconfont', item.icon]"></i></span>
                <span class="color-303133 font-16 p-l-20">{{ item.name }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <vue-gic-footer></vue-gic-footer>
    </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', // 页面内容高度
      collapseFlag: false, // 折叠参数

      showCustomDialog: false, // 自定义弹框显示标志

      bannerList: [
        {
          name: '',
          src: require('../../assets/index/index_banner1.jpg'),
        },
        {
          name: '',
          src: require('../../assets/index/index_banner1.jpg'),
        }
      ],

      // 公司信息
      companyObj: {
        logo: require('../../assets/logo.png'),
        name: '公司名字',
        code: '12222221',
        money: '2000',
        authStatus: 0,
      },

      // 数据概览
      dataOverview: [
        {
          id: '1',
          name: '员工数量',
          num: '2500'
        },
        {
          id: '2',
          name: '员工数量',
          num: '2500'
        },
        {
          id: '11',
          name: '员工数量',
          num: '2500'
        },
        {
          id: '12',
          name: '员工数量',
          num: '2500'
        },
        {
          id: '21',
          name: '员工数量',
          num: '2500'
        },
        {
          id: '22',
          name: '员工数量',
          num: '2500'
        }
      ],
      entryData: [
        {
          id: '1',
          name: '通讯录行政架构',
          color: '#16BA8A',
          icon: 'icon-hangzhengjiagou',
          route: '/index'
        },
        {
          id: '11',
          name: '通讯录行政架构',
          color: '#1890ff',
          icon: 'icon-qiyerenzheng',
          route: '/index'
        },
        {
          id: '2',
          name: '通讯录行政架构',
          color: '#16BA8A',
          icon: 'icon-hangzhengjiagou',
          route: '/index'
        },
        {
          id: '21',
          name: '通讯录行政架构',
          color: '#1890ff',
          icon: 'icon-qiyerenzheng',
          route: '/index'
        },
        {
          id: '32',
          name: '通讯录行政架构',
          color: '#16BA8A',
          icon: 'icon-hangzhengjiagou',
          route: '/index'
        },
        {
          id: '31',
          name: '通讯录行政架构',
          color: '#1890ff',
          icon: 'icon-qiyerenzheng',
          route: '/index'
        }
      ]
    }
  },
  methods: {
    /**
     * 路由跳转
     */
    changeRoute(route) {
      this.$router.push(route);
    },

    // 处理路由跳转
    toRouterView(val) {
      const that = this;
      // 模拟检查数据
      // //有两个参数
      //{
      //  name:,
      //  path:
      //}
      console.log(val);
      that.$router.push({
        path: val.path
      })
    },
    // 折叠事件
    collapseTag(val) {
      const that = this;
      console.log(val);
      that.collapseFlag = val
    },

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

    // 自定义弹框触发事件
    customHandleConfirm(val) {
      const that = this
      that.showCustomDialog = false;
    }
  },
  mounted() {
    const 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;
    height: auto;
    background: #f5f8fa;

    .content-body {
      display: flex;
      flex-direction: column;
      padding: 24px;
      background: #f5f8fa;
      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;
        }
      }

      .index-swiper {
        width: 100%;
        height: 250px;
      }

      .el-carousel__item {
        text-align: center;
        /*background: url(../../assets/index/index_banner1.jpg) no-repeat center center;*/
      }
      .color-303133 {
        color: #303133;
      }

      .color-c0c4cc {
        color: #c0c4cc;
      }

      .color-606266 {
        color: #606266;
      }

      .color-1890ff {
        color: #1890ff;
      }

      .color-909399 {
        color: #909399;
      }

      .border-box {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      /* display */
      .inline-block {
        display: inline-block;
      }

      .block {
        display: block;
      }

      .top {
        vertical-align: top;
      }

      .middle {
        vertical-align: middle;
      }

      /* flex */
      .flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
      }

      .flex-1 {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }

      .flex-column {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
      }

      .flex-row {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
      }

      .flex-align-center {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
      }

      .flex-pack-center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
      }

      .flex-between {
        -webkit-justify-content: space-between;
        justify-content: space-between;
      }

      .flex-wrap {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
      }

      .p-l-6 {
        padding-left: 6px;
      }

      .p-l-20 {
        padding-left: 20px;
      }

      .p-r-6 {
        padding-right: 6px;
      }

      .p-24 {
        padding: 24px;
      }

      .m-t-24 {
        margin-top: 24px;
      }
      .m-r-24 {
        margin-right: 24px;
      }

      .border-b-e4e7e7 {
        border-bottom: 1px solid #e4e7e7;
      }

      .radius-2 {
        border-radius: 2px;
      }

      .font-14 {
        font-size: 14px;
      }

      .font-16 {
        font-size: 16px;
      }

      .font-30 {
        font-size: 30px;
      }

      .icon-zidingyi {
        cursor: pointer;
        &:hover {
          color: #1890ff;
        }
      }

      .square-item {
        width: 40px;
        height: 40px;
        border-radius: 4px;

        i {
          font-size: 24px;
          color: #fff;
        }
      }

      .index-company {
        width: 100%;
        min-height: 340px;

        &-left {
          width: 360px;
          height: 340px;
          padding: 24px;
          background: #fff;

          li {
            height: 40px;
            line-height: 40px;
            font-size: 14px;

          }

          .unAuth {
            color: #1890ff;
            i {
              color: #c0c4cc;
            }
          }

          .authActive {
            color: #303133;
            i {
              color: #f7cb27;
            }
          }
        }
        &-logo {
          text-align: center;
          img {
            width: 70px;
            height: 70px;
            border-radius: 6px;
            border: 1px solid #DCDFE6;
          }
        }
        &-name {
          height: 44px;
          margin-bottom: 5px;
          line-height: 44px;
          font-size: 16px;
          text-align: center;
        }

        &-right {
          width: calc(100% - 384px);
          min-width: 968px;
          background: #fff;

          &__head {
            height: 56px;
            line-height: 56px;
            padding: 0 24px;
          }

          &__body {


            li {
              min-width: 25%;
            }

            .data-name {
              height: 48px;
              line-height: 48px;
            }
            .data-num {
              height: 62px;
              line-height: 62px;
              margin-bottom: 30px;
            }
          }
        }

      }

      .index-entry {
        width: 100%;
        height: 247px;
        background: #fff;
        &-head {
          height: 56px;
          line-height: 56px;
          padding: 0 24px;
        }

        &-body {
          height: 190px;

          li {
            min-width: 20%;
            height: 56px;
            padding-left: 24px;
            background: rgba(255,255,255,1);
            border: 1px solid rgba(220,223,230,1);
            border-radius: 4px;
            margin-right: 6.666666%;
            margin-bottom: 24px;
            cursor: pointer;
            &:hover {
              border-color: #1890ff;
            }

            &:nth-child(4n) {
              margin-right: 0;
            }
          }
        }
      }
    }
  }

  /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>
