<template>
  <div class="block" style="cursor: pointer">
    <el-image
      style="width: 80px; height: 80px; border-radius: 50%"
      :src="ensureUserAvatar()"
    ></el-image>
    <div class="mt10">
      {{ name }}
    </div>
    <div v-if="state" class="evaluation-card-stateGroup">
      <span
        class="evaluation-card-state-item"
        v-for="opt in stateOptions"
        :key="opt"
        :class="{ 'evaluation-card-stateActive': isStateActive(state, opt) }"
        >{{ opt }}</span
      >
    </div>
  </div>
</template>
<script>
export default {
  props: {
    avatar: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
    stateOptions: {
      type: Array,
      default: () => [],
    },
    state: {
      type: String,
      default: "",
    },
    stateMatchFunc: {
      type: Function,
      default: (state, option) => state == option,
    },
  },
  data() {
    return {
      defaultAvatar:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    };
  },
  methods: {
    ensureUserAvatar: function () {
        return this.avatar || this.defaultAvatar;
    },
    isStateActive: function (state, option) {
      return this.stateMatchFunc(state, option);
    },
  },
};
</script>
<style scoped>
.evaluation-card-stateGroup {
  padding: 10px;
  font-size: 14px;
  color: #cccccc;
  text-align: center;
}
.evaluation-card-state-item {
  margin: 0 5px;
}
.evaluation-card-stateActive {
  color: #30b08f;
}
</style>