<template>
  <div class="log-detail">
    <div class="log-box-new">
      <div
        v-if="data.operates"
        class="log-box-ul"
      >
        <div
          v-for="(item,index) in data.operates"
          :key="index"
          class="log-box-li"
        >

          <span class="operates-name">{{ item.name }}:</span>
          <div
            v-if="item.type ==='rich_text'"
            class="operates-info"
          >
            <el-button
              class="new"
              type="text"
              size="medium"
              @click="handleRichTextLog(item)"
            >点击查看</el-button>

          </div>
          <div
            v-else
            class="operates-info"
          >
            <span class="old">{{ item.old }}</span>
            <img
              v-show="item.old"
              :src="arrowImg"
            >
            <span class="new">{{ item.new }}</span>

          </div>
        </div>
      </div>
      <div v-else>
        {{ data.content }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      arrowImg: 'https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/Log/detail-arrow.png',
      dialogVisible: false,
      dialogData: {}
    }
  },
  methods: {
    handleClose() {},
    handleRichTextLog(item) {
      this.$root.$emit('biLogRichTextEvent', item)
    }
  }
}
</script>
<style lang="scss" scoped>
.log-box-li {
  display: flex;
  line-height: 23px;
  .operates-name {
    // flex: 0;
    flex-shrink: 0;
    flex-grow: 0;
    color: #999999;
    padding-right: 10px;
  }
  .operates-info {
    flex: 1;
    // display: flex;
    align-items: center;

    img {
      width: 14px;
      height: 7px;
      margin: 0 10px;
    }
    .old,
    .new {
      padding: 0;
      flex-shrink: 0;
    }
  }
}
</style>
