<template>
  <div>
     <div class="sysBox" ref="sysBox">
          <div class="sysInnerBox">
            <div class="sysItem" v-for="(item,index) in authData" :key="index">
              <img :src="item.imgUrl" alt="">
              <p>{{item.name}}</p>
              <Button  size="small" @click.self="hrefApp(item)">进入系统</Button>
            </div>
          </div>
        </div>
  </div>
</template>

<script>
export default {
  name: 'HSysChange',
  props: {
    authData: {
      type: Array
    },
    sysShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      systemShow: false
    }
  },

  watch: {
    sysShow(val) {
      // this.systemShow = val
      if (val === true && this.authData.length > 0) {
        if (this.authData.length === 1) {
          this.$refs.sysBox.style.width = 268 + 'px'
        } else {
          this.$refs.sysBox.style.width = this.authData.length * 130 + (this.authData.length + 1) * 20 + 'px'
        }
        this.$refs.sysBox.style.height = 170 + 'px'
        this.$refs.sysBox.style.transition = 'all 0.5s'
      } else {
        this.$refs.sysBox.style.width = 0 + 'px'
        this.$refs.sysBox.style.height = 0 + 'px'
        this.$refs.sysBox.style.transition = 'all 0.5s'
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.sysBox {
      position: absolute;
      top: 56px;
      left: 0;
      z-index: 1001;
      width: 0;
      box-shadow: 0px 10px 14px 0px rgba(0, 0, 0, 0.4);
      background:rgba(27,59,92,1);
      border-radius: 0 8px 8px 0;
      overflow: hidden;
      .sysInnerBox {
        min-width: 268px;
        padding: 20px 0 20px 20px;
        height: 170px;
        width:770px;
        overflow: hidden;
        .sysItem {
          float: left;
          margin-right: 20px;
          width: 130px;
          height: 129px;
          border-radius: 4px;
          background: rgba(0, 0, 0, 0.1456);
          color: rgba(255, 255, 255, 1);
          overflow: hidden;
          text-align: center;
          img {
            margin-top: 28px !important;
            transition: all 0.5s;
            -moz-transition: all 0.5s; /* Firefox 4 */
            -webkit-transition: all 0.5s; /* Safari 和 Chrome */
            -o-transition: all 0.5s; /* Opera */
            height: 44px;
            width: auto;
            display: block;
            margin: 0 auto;
          }
          p {
            line-height: 70px;
            font-size: 14px;
            color:#fff;
          }
          button {
            background-color: transparent;
            color: #fff;
            font-size: 12px;
            height: 26px;
            width: 76px;
          }
          &:hover {
            background:linear-gradient(180deg,rgba(40,87,137,1) 0%,rgba(66,130,178,1) 100%);
            img {
              height: 28px;
              margin-top: 17px !important;
            }
            p {
              line-height: 40px;
              margin-bottom: -3px;
            }
          }
        }
      }
    }
</style>
