<template>
  <div class="bi-log-dialog">
    <el-drawer
      custom-class="bi-log-drawer"
      title="日志"
      :visible.sync="drawer"
      direction="rtl"
      size="900px"
      destroy-on-close
      append-to-body
      @opened="handlerOpen"
    >
      <Log
        ref="biLog"
        class="bi-log-drawer-log"
        :log-id="logId"
        :log-model="logModel"
      />
    </el-drawer>

    <el-dialog
      custom-class="bi-log-rich-text-dialog"
      title="详情"
      :visible.sync="dialog"
      width="1354px"
      append-to-body
      top="80px"
    >
      <el-scrollbar>
        <div class="bi-log-rich-text-box">
          <div
            v-show="dialogData.old"
            class="bi-log-rich-text-item old"
          >
            <div v-html="dialogData.old"></div>
          </div>
          <div class="bi-log-rich-text-item new">
            <div v-html="dialogData.new"></div>
          </div>
        </div>
      </el-scrollbar>
      <div
        v-show="dialogData.old"
        class="arrow"
      >
        <img :src="arrowImg">
      </div>

    </el-dialog>

  </div>
</template>

<script>
import Log from '../../Log'
export default {
  name: 'BiLogDialog',
  components: { Log },
  props: {
    avatar: {
      type: String,
      default: ''
    }
  },
  provide() {
    return {
      BiLogDialog: this
    }
  },
  data() {
    return {
      drawer: false,
      logId: '',
      logModel: '',
      dialog: false,
      arrowImg: 'https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/Log/arrow.png',
      dialogData: {
        new: '',
        old: ''
      }
    }
  },

  mounted() {
    this.$root.$on('biLogEvent', (data) => {
      this.logId = data.id || ''
      this.logModel = data.model || ''
      this.drawer = true
    })
    this.$root.$on('biLogRichTextEvent', (data) => {
      this.dialogData.new = data.new || ''
      this.dialogData.old = data.old || ''
      this.dialog = true
    })
  },
  methods: {
    handlerOpen() {
      this.$refs.biLog && this.$refs.biLog.handlerOpen && this.$refs.biLog.handlerOpen()
    }
  }
}
</script>
<style lang="scss">
.bi-log-drawer {
  max-width: 80%;
}
.bi-log-rich-text-dialog {
  max-width: 80%;
  height: calc(100vh - 160px);
  .el-dialog__header {
    // line-height: 56px;
    height: 56px;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  }
  .el-dialog__body {
    padding: 0;
    height: calc(100vh - 160px - 56px);
    .bi-log-rich-text-box {
      height: calc(100vh - 160px - 56px);
      display: flex;
      position: relative;
      .bi-log-rich-text-item {
        width: 50%;
        flex-shrink: 0;
        flex-grow: 1;
        padding: 20px;

        & + .bi-log-rich-text-item {
          border-left: 1px solid rgba(0, 0, 0, 0.06);
          border-right: 1px solid rgba(0, 0, 0, 0.06);
        }
      }
    }
    .arrow {
      position: absolute;
      width: 40px;
      height: 40px;
      top: calc(50% - 20px);
      left: calc(50% - 20px);
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
