<template>
  <div>
    <el-dialog title="版本对比" :visible.sync="isShow" @open="dialogOpen" append-to-body :close-on-click-modal="false" class="article-history-dialog">
      <div class="toolbar-div">
        <el-button type="text" @click="showDiff('Y')" v-if="onlyDiff === 'N'"><i class="fa fa-file-code-o fa-fw" style="color:#eb8605;"></i>只显示差异行</el-button>
        <el-button type="text" @click="showDiff('N')" v-if="onlyDiff === 'Y'"><i class="fa fa-file-code-o fa-fw" style="color:#eb8605;"></i>显示所有行</el-button>
        <span style="float:right; margin-right:10px;">左({{date1}})&nbsp;对比&nbsp;右({{date2}})</span>
      </div>
      <el-row>
        <el-col :span="12">
          <table class="diff-table">
            <tr v-for="(item, index) in content1" :key="index">
              <td align="center" width="40" class="diff-rowno">{{item.rowNo}}</td>
              <td class="diff-line" :style="item.style" v-html="item.line"></td>
            </tr>
          </table>
        </el-col>
        <el-col :span="12">
          <table class="diff-table">
            <tr v-for="(item, index) in content2" :key="index">
              <td align="center" width="40" class="diff-rowno">{{item.rowNo}}</td>
              <td class="diff-line" :style="item.style" v-html="item.line"></td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button @click="isShow = false" type="primary">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      date1: '',
      date2: '',
      onlyDiff: 'N',
      content1: [],
      content2: []
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    async dialogOpen() {
      this.onlyDiff = 'N'
      this.getContent()
    },
    showDiff(val) {
      this.onlyDiff = val
      this.getContent()
    },
    async getContent() {
      let res = await axios.get('/ui/articlehistory/historyview', {
        params: {
          type: this.type,
          articleID: this.articleID,
          backupNo: this.backupNo,
          backupNo1: this.backupNoa,
          backupNo2: this.backupNob,
          onlyDiff: this.onlyDiff
        }
      })
      this.date1 = res.data.data.date1
      this.date2 = res.data.data.date2
      this.content1 = res.data.data.list1
      this.content2 = res.data.data.list2
    }
  },
  props: ['show', 'type', 'articleID', 'backupNo', 'backupNoa', 'backupNob']
}
</script>
<style>
.article-history-dialog .el-dialog {
  width: 1200px;
}

@media (max-width: 480px) {
  .article-history-dialog .el-dialog {
    width: 96%;
  }
}
</style>
<style scoped>
.toolbar-div{
  line-height: 48px;
  background-color: #f5f5f5;
  border-bottom: 2px solid #4098f3;
}
.content-body {
  background-color: #ddd;
}
.line-col {
  background-color: #fff;
}
.rowno-col {
  text-align: center;
}
</style>
<style scoped>
.header{
  line-height: 37px;
  vertical-align: middle;
  border-bottom:1px solid #a6cedd;
  background-color: #fcfcfc;
  position: fixed;
  width: 100%;
  z-index: 1;
}
.el-main{
  margin-top: 37px;
  padding:0px;
}
.diff-table {
  table-layout: fixed;
  word-wrap: break-word;
  background-color:rgb(252, 252, 252);
}
.diff-rowno {
  background-color: #ddd;
}
.diff-line {
  padding: 4px 7px 4px 6px;
}
</style>
