<template>
  <div class="log-list">
    <table>
      <thead>
        <tr>
          <th class="is-finish"></th>
          <th v-for="item in columns" :key="item.key" :width="item.width">{{ item.label }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td class="is-finish">
            <div class="log-list__icon"></div>
          </td>
          <td v-for="columnsKey in columns" :key="columnsKey.key" :width="item.width">{{
            item[columnsKey.key]
          }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
// @yunjidoc 布局组件 - 日志表格
export default {
  componentName: 'LogList',
  props: {
    /**
     * @prop {Array} list 数组数据
     */
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    color: {
      type: String,
      default: ''
    },
    /**
     * @prop {Array} columns 表格列对象 默认: [{label: '操作人',key: 'name'},{label: '操作时间',key: 'time',width: 200},{label: '操作内容',key: 'text'}]
     */
    columns: {
      type: Array,
      default: () => {
        return [
          {
            label: '操作人',
            key: 'name'
          },
          {
            label: '操作时间',
            key: 'time',
            width: 200
          },
          {
            label: '操作内容',
            key: 'text'
          }
        ]
      }
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
@import '~styles/var';
.log-list {
  text-align: left;
  table {
    border-collapse: collapse;
  }
  th,
  td {
    min-width: 50px;
    height: 38px;
    vertical-align: top;
    &:first-child {
      width: 30px !important;
      min-width: 30px;
    }
  }
  td {
    &.is-finish {
      position: relative;
      padding: 0;
      &::after {
        content: '';
        width: 2px;
        top: 0;
        bottom: 0;
        left: 6px;
        z-index: 0;
        position: absolute;
        background-color: #eeeeee;
      }
    }
  }
  tr:last-child {
    td.is-finish::after {
      display: none;
    }
  }
  &__icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    background: @color-primary;
    z-index: 1;
    &::after {
      float: left;
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      transform: translate(50%, 50%);
      background: #fff;
    }
  }
}
</style>
