<template>
  <div class='mu-card-project'>
    <div class="project-container">
      <div class="project-content" @click="handleListClick">
        <div class="project-title" v-html="title"></div>
        <div class="project-rectangle">
          <span class="rectangle-container">
            <span class="rectangle-inner" ref="rectangleInner"></span>
          </span>
          <span class="rectangle-percent">{{percent}}</span>
        </div>
        <div class="project-time">
          <span class="project-start-time">{{startTime}} - </span>
          <span class="project-end-time">{{endTime}}</span>
        </div>
      </div>
      <div class="project-avatar">
        <mu-avatar :isimg="avatarObj && avatarObj.isImg" :avatarcolor="avatarObj && avatarObj.color" :avatarname="avatarObj && avatarObj.aName" :avatarurl="avatarObj && avatarObj.aUrl"
         size=32 @click='handleAvatarClick($event)'></mu-avatar>
      </div>
    </div>
  </div>
</template>
<script>
  import avatar from '../avatar';
  export default {
    name: 'mu-card-project',
    props:{
      'title':{
        type: String
      },
      'percent':{
        type: String
      },
      'startTime':{
        type: String
      },
      'endTime':{
        type: String
      },
      'avatar-obj':{
        type: Object,
      },
    },
    mounted () {
      var self = this;
      this.$refs.rectangleInner ? this.$refs.rectangleInner.style.width = self.percent : 0;
    },
    methods:{
      handleAvatarClick(e) {
        e.stopPropagation();
        this.$emit('handle-avatar-click');
      },
      handleListClick() {
         this.$emit('handle-list-click');
      },
      handleRightIcon(){
        this.$emit('handle-right-icon');
      }
    },
    components:{
      'mu-avatar': avatar
    },
  };
</script>

<style lang="less">
.mu-card-project {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius:3px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  color: #212121;
  background-color: #fff;
  position: relative;
  min-height: 2.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding-top: 12px;
}
.project-container{
  position: relative;
}
.project-title{
  width: 89%;
  color:#3A4247;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3a4247;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
}
.project-content{

}
.rectangle-container{
  width: 130px;
  height: 6px;
  background: #E6E7E8;
  display: inline-block;
  border-radius: 10px;
  position: relative;
  //margin: 6px 0;
  margin-bottom: 2px;
}
.rectangle-percent{
  color: #4DD0E1;
  font-size: 12px;
  margin-right: 8px;
}
.project-time{
  color:#9DA1A3;
  font-size: 12px;
  margin-bottom: 12px;
  margin-top: 4px;
}
.rectangle-inner{
  height: 6px;
  background: #4DD0E1;
  display: inline-block;
  border-radius: 10%;
  position: absolute;
  border-radius: 10px;
}
.project-avatar{
  position: absolute;
  right: 0;
  top: 0;
}
</style>
