<template>
  <div class="log-list">
    <div v-for="l in logList" :key="l.id" class="log-item flex">
      <div class="log-item-icon">
        <el-icon name="a-2labadianji3x" />
      </div>
      <div class="log-item-time">
        <span>{{ l.local && `${l.local}：` }}{{ l.createTime }}</span>
      </div>
      <div v-if="l.employeeName" class="log-item-name">
        <span>{{ l.employeeName }}</span>
      </div>
      <div class="log-item-content" :title="l.description">
        <span>{{ l.description }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LogList",
  props: {
    logList: {
      default: () => [],
      type: Array
    }
  }
};
</script>
<style lang="less" scoped>
.log-list {
  height: 500px;
  overflow: auto;
  font-size: 14px;
}
.log-item {
  line-height: 26px;
  white-space: pre-wrap;
  word-break: break-all;
}
.log-item div:not(:last-child) {
  margin-right: 6px;
}

.log-item-time {
  // width: 220px;
}

.log-item-name {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-item-content {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  // white-space: nowrap;
}
</style>
