<template>

  <el-dialog :close-on-click-modal="false" :title="$t('operating_log.info')" :visible.sync="infoVisible" width="900px" :destroy-on-close="true"
             @close="handleClose" append-to-body>
    <div style="height: 700px;overflow: auto">
      <div v-if="detail.createUser">
        <p class="tip">{{ this.$t('report.user_name') }} ：{{ detail.createUser }}</p>
      </div>
      <div>
        <p class="tip">{{ this.$t('operating_log.time') }} ：{{ detail.operTime | datetimeFormat }}</p>
      </div>
      <div style="overflow: auto">
        <p class="tip">{{ this.$t('report.test_log_details') }} </p>
        <el-row>
          <pre v-html="getDiff(detail.originalValue,detail.newValue)"></pre>
          <!--</el-col>-->
        </el-row>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import * as jsondiffpatch from 'jsondiffpatch';

const formattersHtml = jsondiffpatch.formatters.html;
export default {
  name: "MsHistoryDetail",
  components: {},
  props: {
    title: String,
  },
  data() {
    return {
      infoVisible: false,
      detail: {},
      formatData: ["loadConfiguration", "advancedConfiguration", "config", "variables", "tags", "customFields", "steps", "scenarioDefinition", "request", "response"],
    }
  },
  methods: {
    getDiff(v1, v2) {
      if (this.detail.columnName === 'request' && v1 && v2) {
        let delta = jsondiffpatch.diff(JSON.parse(JSON.stringify(v1)), JSON.parse(JSON.stringify(v2)));
        return formattersHtml.format(delta, JSON.parse(JSON.stringify(v1)));
      }
      let delta = jsondiffpatch.diff(v1, v2);
      return formattersHtml.format(delta, v1);
    },
    handleClose() {
      this.infoVisible = false;
    },
    open(value) {
      this.infoVisible = true;
      this.detail = value;
    },
    getType(type) {
      return this.LOG_TYPE_MAP.get(type);
    },
  }
}
</script>

<style scoped>
@import "~jsondiffpatch/dist/formatters-styles/html.css";
@import "~jsondiffpatch/dist/formatters-styles/annotated.css";
</style>
