<template>
  <div class="log-list">
    <div v-for="l in logList" :key="l.id" class="log-item flex">
      <div class="log-item-icon">
        <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 setup lang="ts">
import { LogListData } from '@/types/api/order'
import { PropType } from 'vue'
import Icon from './Icon.vue'

defineProps({
  logList: {
    type: Array as PropType<LogListData[]>,
    default: () => [],
  },
})
</script>
<style lang="scss" 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>
