<template>
  <el-card class="box-card-component" style="margin-left:8px;">

    <el-container>
      <el-aside class="avatar-side" width="200px">
        <pan-thumb :image="person.avatar || 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'" />
      </el-aside>
      <el-container>
        <el-header>
          <h3>{{ person.name }}</h3>
        </el-header>
        <el-main class="skillbars">
          <div style="position:relative;">
            <div v-for="skill in sortSkills(person.skills)" :key="skill.name" class="progress-item">
              <span>{{ skill.name }}</span>
              <el-progress :percentage="skill.strength" />
            </div>
            <div>
              <el-button type="primary">Kontaktieren</el-button>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>

  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'

export default {
  components: { PanThumb },
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    person: {
      type: Object,
      default: () => { return { name: 'Max Mustermann' } }
    }
  },
  data() {
    return {
      statisticsData: {
        article_count: 1024,
        pageviews_count: 1024
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  methods: {
    sortSkills(skills) {
      return skills.sort((a, b) => (a.strength > b.strength) ? -1 : 1)
    }
  }}
</script>

<style lang="scss" >
.box-card-component{
  .el-card__header {
    padding: 0px!important;
  }
}
</style>

<style lang="scss" scoped>
.box-card-component {
  .box-card-header {
    position: relative;
    height: 50px;
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }

  .avatar-side{
background-color: transparent;
  }
  .skillbars {
    padding-top:0;
  }

  .progress-item {
    margin-bottom: 10px;
    font-size: 14px;
  }
  @media only screen and (max-width: 1510px){
    .mallki-text{
      display: none;
    }
  }
}
</style>
