<template>
  <div>
    <div>
      <div class="noData" v-if="noData">暂无数据！</div>
      <el-timeline v-else>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="(index + 1).toString()"
          placement="top"
        >
          <p>{{ activity.content }}</p>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  props: ["caselogDataArr"],
  data() {
    return {
      activities: [],
      noData: false,
    };
  },
  created() {
    if (this.caselogDataArr && this.caselogDataArr.length > 0) {
      this.noData = false;
      this.activities = this.caselogDataArr;
      this.activities.forEach((item) => {
        item.content = item.content;
      });
    } else {
      this.noData = true;
    }
  },
  methods: {
    cancel() {
      this.$emit("cancelcaseLog");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 500px !important;
  overflow: auto !important;
}
::v-deep .el-dialog {
  width: 800px;
  background: #ffffff;
  border-radius: 20px;
}
.endbutton1 {
  width: 154px;
  height: 37px;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 19px;
  span {
    width: 31px;
    height: 13px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #959595;
  }
}
.loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-icon-loading {
    font-size: 50px;
  }
}
.noData {
  width: 100%;
  height: 400px;
  font-size: 30px;
  font-weight: 700;
  color: #959595;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>