<template>
  <div class="bi-system-link">
    <el-popover
      placement="top"
      trigger="hover"
      popper-class="system-link-popper"
      :popper-options="{ padding: '0px' }"
    >
      <div class="system-list">
        <div
          v-for="item in systemList"
          :key="item.id"
          class="system-item"
          @click="goSystem(item)"
        >
          <div class="system-logo">
            <img :src="item.logo_path">
          </div>
          <p class="system-name">{{ item.short_name }}</p>
          <p class="go-system">前往平台</p>
        </div>
      </div>
      <div
        slot="reference"
        type="text"
      >
        <el-button
          class="system-link-button"
          type="text"
        >
          <svg class="iconpark-icon">
            <use href="#el-icon-more1" />
          </svg>
        </el-button>
      </div>
    </el-popover>
  </div>
</template>

<script>
import request from '../../utils/request/index.js'
import { getToken } from '../../utils/tools'

export default {
  name: 'BiSystemLink',
  props: {},
  data() {
    return {
      systemList: []
    }
  },
  mounted() {
    // this.getZqToken()
    this.getSystemList()
  },
  methods: {
    async getSystemList() {
      const res = await request({
        env: this.$BI.env,
        system: 'zq',
        api: '/api/index/system'
      })
      if (res.status_code === 1) {
        this.systemList = res.data
      }
    },
    // async getZqToken() {
    //   const res = await this.request({
    //     url: '/sys_common/getZqToken',
    //     method: 'post'
    //   })
    //   if (res.status_code === 1) {
    //     this.zqToken = res.data
    //   }
    // },
    goSystem({ link }) {
      let tokenParam = ''
      if (link.includes('/sso')) {
        tokenParam = 'token'
      }
      if (link.includes('/public/sso')) {
        tokenParam = 'authorization'
      }
      if (link === 'http://scan.lzyl99.com/sso' || link === 'http://wechatbi.lzyl99.com/login/authorization') {
        tokenParam = 'authorization'
      }
      const url = tokenParam ? `${link}?${tokenParam}=${getToken()}` : link
      const a = document.createElement('a')
      a.target = '_blank'
      a.href = url
      a.click()
    }
  }
}
</script>
<style lang="scss" scoped>
.bi-system-link {
  display: flex;
  align-items: center;
  ::v-deep > span {
    display: flex;
    align-items: center;
  }
}
.system-link-button {
  padding: 3px;
  width: 32px;
  height: 32px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  .iconpark-icon,
  .iconpark-icon:hover {
    font-size: 24px;
    color: #4e5969;
  }
  &:hover {
    background-color: #f2f3f5;
  }
  ::v-deep {
    span {
      display: block;
      height: 100%;
      width: 100%;
    }
  }
}
.system-list {
  max-width: 585px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  .system-item {
    text-align: center;
    width: 100px;
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
    margin-bottom: 10px;
    margin-right: 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
    position: relative;
    overflow: hidden;
    &:nth-child(5n) {
      margin-right: 0;
    }

    &:hover {
      // transform: scale(1.1);
      background-color: rgba(155, 232, 203, 0.2);
      // .system-logo {
      //   background: #efefef;
      // }
      // .system-name {
      //   color: #06c261;
      // }
      .go-system {
        bottom: 0;
      }
    }
    .system-logo {
      transition: all 0.1s;
      width: 48px;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      border: 1px solid #f2f3f5;
      margin: 10px auto 8px;
      background-color: #ffffff;

      img {
        width: 80%;
        height: 80%;
      }
    }
    .system-name {
      line-height: 26px;
      height: 26px;
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .go-system {
      line-height: 26px;
      height: 26px;
      margin: 0;
      background: #00bf8a;
      border-radius: 0px 0px 4px 4px;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      position: absolute;
      bottom: -26px;
      transition: bottom ease-in 0.1s;
      left: 0;
      width: 100%;
    }
  }
}
</style>
<style lang="scss">
.system-link-popper {
  padding: 0 !important;
}
</style>
