<template>
  <div>
    <TraceHeader :type="'team'" />
    <div
      id="trace-content"
      class="container-fluid"
    >
      <div class="boxes">
        <div
          v-for="user in userList"
          :key="user.id"
          class="col-xs-6 col-sm-4 col-md-3 col-lg-2"
        >
          <a
            class="box"
            @click="openUserNotFinishedTrace(user)"
          >
            <span>&nbsp;</span>
            <span class="box__statistics box__statistics--upcoming">
              <span>{{ user.name.substring(user.name.length-1,user.name.length) }}</span>
            </span>
            <p class="box__title">{{ user.name }}</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var Common = require('../common/Common.js');
var Uuid = require('pc-component-v3').default.Uuid;
var Navbar = require('pc-component-v3').default.Navbar;
import TraceHeader from './TraceHeader.vue';
export default {
  components: {
    Common, Uuid, Navbar, TraceHeader,
  },
  data: function () {
    return {
      userList: [],
    };
  },
  mounted: function () {
    this.initData();
  },
  methods: {

    /**
         * 初始化用户
         * @author ZhangTeng 20190221
         */
    initData: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('userResource/listByClientId'),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.userList = data;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 打开用户未完成的任务
         * @author ZhangTeng 20190221
         */
    openUserNotFinishedTrace: function (user) {
      this.$router.push({
        path: '/trace/userNotFinishedTrace/' + user.id,
        query: {
          userName : user.name,
        },
      });
    },

  },
};
</script>

<style scoped>
.boxes .box {
    display: block;
    /* width: 90px; */
    height: 235px;
    border-radius: 4px;
    text-align: center;
    color: #000;
    cursor: pointer;
}
.boxes .box__statistics {
    display: block;
    width: 90px;
    height: 90px;
    padding: 10px;
    margin: 15px auto 0;
    border-radius: 50%;
    color: #fff;
    font-size: 46px;
}
.boxes .box__statistics--upcoming {
    background-color: #f6aa39;
}
a {
    text-decoration: none;
    margin: 10px;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
.boxes .box__title {
    margin-top: 25px;
    font-size: 24px;
}
.boxes .box__title__weeks {
    font-size: 18px;
}
.box:hover {
    background-color: ghostwhite;
    /* width: 90px; */
    height: 235px;
}
.row {
    height: 200px;
    margin-bottom: 10px;
}
.dashboard-header {
    cursor: pointer;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-weight: bold;
    font-size: 1.1em;
}
</style>s