<template>
  <div class="comment-list ant-list ant-list-split" style=" margin-bottom:8px ;">
    <div class="ant-spin-nested-loading">
      <div class="ant-spin-container">
        <ul class="ant-list-items">
          <li class="ant-list-item" v-for="(item, index) in dataSource" :key="'comment' + index">
            <div class="ant-comment" name="1">
              <div class="ant-comment-inner">
                <div class="ant-comment-avatar"> <a-icon type="snippets" /></div>
                <div class="ant-comment-content">
                  <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">{{item.auditUnitName}}</span><span class="ant-comment-content-author-time"><span class="">{{item.auditDate}}</span></span></div>
                  <div class="ant-comment-content-detail">
                    <p> {{ item.auditContent }}</p>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "EComment",
  data() {
    return {
      auditList: [{ auditContent: '', auditUnitName: '', auditDate: '', photo: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', },
      ],
    };
  },
  props: {
    dataSource: {
      type: Array,
      default: () => {
        return [...this.auditList]
      }
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {
    }
  },
};
</script>
<style lang="less" scoped>
.ant-list * {
  outline: none;
}
.ant-list {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
}
.ant-spin-nested-loading {
  position: relative;
}
.ant-spin-container {
  position: relative;
  transition: opacity 0.3s;
}
.ant-list-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ant-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.ant-list-split .ant-list-item {
    border-bottom: 1px solid #e8e8e8;
}
.ant-comment {
    position: relative;
}
.ant-comment-inner {
    display: flex;
    padding: 16px 0;
}
.ant-comment-avatar {
    position: relative;
    flex-shrink: 0;
    margin-right: 12px;
    cursor: pointer;
}
.ant-comment-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.ant-comment-content {
    position: relative;
    flex: 1 1 auto;
    min-width: 1px;
    font-size: 14px;
    word-wrap: break-word;
}
.ant-comment-content-author {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 4px;
    font-size: 14px;
}
.ant-comment-content-author > a, .ant-comment-content-author > span {
    padding-right: 8px;
    font-size: 12px;
    line-height: 18px;
}
.ant-comment-content-author-name {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    transition: color 0.3s;
}
.ant-comment-content-author-time {
    color: #ccc;
    white-space: nowrap;
    cursor: auto;
}
</style>