<template>
  <div class="dashboard">
    <el-row class="content" >
      <div class="scroll_area" >
        <div class="out_box_title_content">
          <el-col class="title_content" :span="12" >
            <!-- <el-row class="title" style="text-align: center;">
            </el-row> -->
            <el-row class="out_box_row">
              <el-col :xl="6" :lg="8" :md="12" :sm="12" v-for="(item, index) in sysData" :key="index"  class='item_out_box' style="">
                <div @click="jump(item.path)" class="item_ten">
<!--                  <img class="img_div" :src="item.url">-->
                  <div class="img_div">
                    <svg viewBox="0 0 384 307" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                      <g fill="#e6effc" fill-rule="nonzero">
                        <path d="M307.5,14 C349.3,37.1 386.4,93.1 383.1,152.9 C379.8,212.7 336.1,276.2 279.3,297.9 C222.5,319.6 152.6,299.5 95.5,266.7 C38.4,233.9 -5.9,188.4 0.8,150.6 C7.5,112.7 65.2,82.4 102.4,60.4 C139.6,38.4 156.3,24.7 187.9,12.9 C219.4,1 265.8,-9 307.5,14 Z"></path>
                      </g>
                    </svg>
                  </div>
                  <i class="box-icon" :class="item.icon_class"></i>
                  <div class="fr">{{item.title}}</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
  export default {
    components: {
    },
    data() {
      return {
        sysData: [
          {
            url: 'static/images/dashboard/tenant_management.png ',
            title: 'App列表',
            img: '',
            path: '/hs/appList',
            icon_class: 'el-icon-s-custom'
          },
          {
            url: 'static/images/dashboard/application_management.png',
            title: '系统升级',
            path: '/hs/system',
            icon_class: 'el-icon-notebook-2'
          }
          // {
          //   url: 'static/images/dashboard/room.png',
          //   title: 'AdminTool',
          //   path: '/system/app',
          //   icon_class: 'el-icon-apple'
          // }
        ],
        tenantData: [
          {
            url: 'static/images/dashboard/company_info.png',
            title: '公司',
            path: '/tenant/company',
            icon_class: 'el-icon-office-building'
          },
          {
            url: 'static/images/dashboard/user_management.png',
            title: '用户',
            path: '/tenant/user',
            icon_class: 'el-icon-user-solid'
          },
          {
            url: 'static/images/dashboard/user_edit.png',
            title: '角色',
            path: '/tenant/role',
            icon_class: 'el-icon-s-check'
          },
          {
            url: 'static/images/dashboard/manangement.png',
            title: '租户权限项',
            path: '/tenant/permission',
            icon_class: 'el-icon-set-up'
          },
          {
            url: 'static/images/dashboard/manangement.png',
            title: '权限组',
            path: '/tenant/right_group',
            icon_class: 'el-icon-s-cooperation'
          },
          {
            url: 'static/images/dashboard/manangement.png',
            title: '用户权限组',
            path: '/tenant/user_right_group',
            icon_class: 'el-icon-s-order'
          },
          {
            url: 'static/images/dashboard/manangement.png',
            title: '单据类型',
            path: '/tenant/bill_type',
            icon_class: 'el-icon-document-checked'
          },
          {
            url: 'static/images/dashboard/manangement.png',
            title: '单据数据权限',
            path: '/tenant/bill_data_right',
            icon_class: 'el-icon-document'
          }
        ],
        identity: ''
        // only_sys: false
      }
    },
    name: 'index',
    methods: {
      jump(path) {
        if (path === '/hs/system') {
          if (sessionStorage.user) {
            this.$router.push({ path: '/hs/system' })
          } else {
            this.$router.push({ path: '/login' })
          }
        } else {
          this.$router.push(path)
        }
      }
    },
    mounted() {
      // const login_data = sessionStorage.login_data ? JSON.parse(sessionStorage.login_data) : {}
      // this.identity = login_data.identity
      // this.only_sys = login_data.only_sys
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    height: 100%;
  }
  .content {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    /*border: 1px solid rgba(49, 70, 89, .1);*/
    border-radius: 4px;
    overflow: hidden;
    background: url('../../../static/images/dashboard/bg_bttom.svg') 0 no-repeat;
    background-size: 100% 300px;
    background-position-y: bottom;
    /*background: linear-gradient(to right,rgba(222,227,233,0.1) 0,rgba(222,227,233,0.6) 50%,rgba(222,227,233,0.1) 100%);*/
  }
  .content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 1px;
    background: #dee3e9;
    background: linear-gradient(to right, rgba(222, 227, 233, 0.1) 0, rgba(222, 227, 233, 0.6) 50%, rgba(222, 227, 233, 0.1) 100%);
  }
  .content_ {
    display: flex;
    justify-content: center;
  }
  .scroll_area {
    width: 50%;
    height: 100%;
    overflow-y: auto;
  }
  .scroll_area::-webkit-scrollbar {
    display:none;
  }
  .title,.title_w {
    width: 180px;
    margin: 0 auto;
    line-height: 24px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    background: #3525d3;
    padding: 5px;
    box-shadow: 0 8px 16px rgba(53,37,211,.24);
    animation:titleFrame .2s;
  }
  // .title span, .title_w span {
  //   font-family: '-apple-system', 'Microsoft JhengHei UI';
  // }
  @keyframes titleFrame {
    0%   {color: transparent; transform: scale(0.8);}
    100% {color: white; transform: scale(1);}
  }
  .item_out_box{
    margin-bottom: 45px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .item_ten{
    width: 70%;
    padding-top: 70%;
    /*height: 160px;*/
    position: relative;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px 0 rgba(34,34,34,.08);
    border-radius: 10px;
    /*box-shadow: 0 0 0 6px rgba(0, 0, 0, .1);*/
    transition: all 0.2s ease-in-out;
    color: #666;
    cursor: pointer;
    animation:itemFrame .3s;
  }
  @keyframes itemFrame {
    0%   {color: transparent; transform: scale(0.9);}
    100% {color: white; transform: scale(1);}
  }
  .item_ten:hover {
    /*transform: scale(1.1);*/
    color: #fff;
    background-color: #2c57e4;
    box-shadow: 0 8px 16px rgba(53,37,211,.24);
  }
  .fr{
    position: absolute;
    bottom: 5%;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 0 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /*font-family: HYXZYT;*/
    font-family: '-apple-system', 'Microsoft JhengHei UI';
    animation:frFrame .3s .2s;
  }
  @keyframes frFrame {
    0%   {color: transparent; transform: scale(0);}
    100% {color: #666; transform: scale(1);}
  }
  .img_div {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 15%;
  }
  .box-icon {
    display: inline-block;
    position: absolute;
    top: 25%;
    font-size: 25px;
    color: #2c57e4;
  }
  .out_box_row{
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    /*align-content: center;*/
    /*justify-content: space-between;*/
  }
  .title_content{
    width: 100%;
    padding: 20px 30px 0;
  }
  .out_box_title_content{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .img_light{
    width: 20px;
    height: 20px;
  }
  .title_top{
    padding-left: 20px;
  }
</style>
