<template>
  <div class="header">
    <div class="logo_part" @click="backDefault">
      <p>
        <img src="../assets/img/logo.png" alt />
      </p>
      <p>河北住建厅GIS元数据管理平台</p>
    </div>
    <div class="func">
      <el-button type="text" @click="jumpLog">日志</el-button>
      <el-dropdown placement="bottom" @command="download">
        <span class="el-dropdown-link">
          插件下载
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <!-- @click="download(item)" -->
          <el-dropdown-item v-for="(item, index) in pluginArr" :key="index" :command="item">
            {{ item.name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- <UserLogin :class="'userlogin'"></UserLogin> -->
  </div>
</template>

<script>
// import UserLogin from "@/components/UserLogin";

export default {
  props: {
    jump: {
      type: Function,
    }
  },
  data() {
    return {
      pluginArr: systemConfig.plugins
    };
  },
  // components: {
  //   UserLogin,
  // },
  methods: {
    backDefault() {
      this.jump(0)
    },
    jumpLog() {
      this.jump(4)
    },
    download(item) {
      const elink = document.createElement('a')
      elink.href = item.src;
      elink.setAttribute('download', item.name)
      elink.style.display = 'none'
      document.body.appendChild(elink)
      setTimeout(() => {
        elink.click()
        document.body.removeChild(elink)
      }, 66)
    }
  },
};
</script>

<style lang='less' scoped>
.header {
  height: 100%;
  line-height: @header_height;
  padding-left: 30px;
  color: #1fdefe;
  background: #001e3b;

  .func {
    float: right;
    margin-right: 30px;

    >.el-button--text {
      color: #ffffff;
    }

    >.el-button--text:hover {
      color: #409eff;
    }

    .el-dropdown-link {
      cursor: pointer;
      color: #ffffff;
      margin-left: 20px;

      &:hover {
        color: #409eff;
      }
    }

  }

  .logo_part {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    position: relative;
    cursor: pointer;

    >p {
      display: inline-block;
      vertical-align: top;

      img {
        padding: 25px 15px 25px 0px;
        width: 30px;
        height: 30px;
      }
    }

    >p:nth-child(2) {
      font-size: 24px;
      font-weight: bold;
    }
  }

  >span {
    font-family: @font_family;
    font-size: 20px;
    letter-spacing: 3px;
  }

  .userlogin {
    float: right;
  }
}
</style>
