<template>
  <div :class="{'line': row === 1, 'lines': row > 1}"
       :title="hoverTip ? content: null"
       :style="{'--row':row}">
    <slot name="pre"></slot>
    <div style="display: flex;">
      <div v-for="(user,index) in userInfo" :key="index" class="avatar_name">
          <el-avatar size="large"
                     :src="user.avatar"></el-avatar>
          <div v-if="user.icon"
               class="el-timeline-item__node" :style="{
                      backgroundColor: user.color
                    }">
            <i v-if="user.icon"
               class="el-timeline-item__icon"
               :class="user.icon"
            ></i>
          </div>
          <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
            <span class="item_name">{{ user.name }}</span>
          </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AvatarEllipsis",
  install(Vue) {
    Vue.component('avatarEllipsis', this)
  },
  components: {},
  props: {
    row: {
      type: Number,
      default: 1
    },
    hoverTip: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Array,
      default: []
    }
  },
  created() {
    this.init()
  },
  data() {
    return {}
  },
  methods: {
    init() {
      for (let user of this.userInfo) {
        this.initUser(user)
      }
    },
    initUser(user) {
      let state = user.state
      //创建节点
      if (state === 'CREATE') {
        this.$set(user, "icon", "el-icon-check")
        this.$set(user, "color", "#0bbd87")
      }
      //审批通过
      if (state === 'AGREE' || state === 'AUTO_PASS') {
        this.$set(user, "icon", "el-icon-check")
        this.$set(user, "color", "#0bbd87")
      }
      //审批处理中
      if (state === 'RUNNING') {
        this.$set(user, "icon", "el-icon-loading")
        this.$set(user, "color", "#f78f5f")
      }
      //拒绝后评论
      if (state === 'REFUSE' || state === 'AUTO_REFUSE') {
        this.$set(user, "icon", "el-icon-close")
        this.$set(user, "color", "#f56c6c")
      }
      if (state === 'PASS') {
        this.$set(user, "icon", "el-icon-more")
        this.$set(user, "color", "#c0c4cc")
      }
      return user;
    },
  }
}
</script>

<style scoped>
.avatar_name {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 5px;
  /*width: 45px;*/
}
.item_name{
  width: 45px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}
</style>
