<template>
  <div>
    <el-container>
      <el-header style="height: 37px;" class="header">
        <el-button type="primary" size="small" icon="fa fa-align-justify" @click="onlyDiff" v-if="onlyDiffFlag">显示所有行</el-button>
        <el-button type="primary" size="small" icon="fa fa-align-justify" @click="onlyDiff" v-else>只显示差异行</el-button>
        <span style="float: right;">左&nbsp;({{date1}})&nbsp;对比&nbsp;右&nbsp;({{date2}})</span>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="12">
            <table class="diff-table">
              <tr v-for="(item, index) in list1" :key="index">
                <td align="center" width="40" class="diff-rowno">{{item.rowNo}}</td>
                <td class="diff-line" :style="item.style">{{item.line}}</td>
              </tr>
            </table>
          </el-col>
          <el-col :span="12">
            <table class="diff-table">
              <tr v-for="(item, index) in list2" :key="index">
                <td align="center" width="40" class="diff-rowno">{{item.rowNo}}</td>
                <td class="diff-line" :style="item.style">{{item.line}}</td>
              </tr>
            </table>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {
      date1: '',
      date2: '',
      onlyDiffFlag: false,
      list1: [],
      list2: [],
      platformID: '',
      ID1: '',
      ID2: '',
      backupNo1: '',
      backupNo2: '',
      fileName: ''
    }
  },
  methods: {
    onlyDiff() {
      this.onlyDiffFlag = !this.onlyDiffFlag
      this.getDiffList()
    },
    initURL() {
      this.platformID = util.getQueryString('platformID')
      this.backupNo1 = util.getQueryString('backupNo1')
      this.backupNo2 = util.getQueryString('backupNo2')
      this.fileName = util.getQueryString('fileName')
      this.ID1 = util.getQueryString('ID1')
      this.ID2 = util.getQueryString('ID2')
    },
    async getDiffList() {
      this.initURL()
      let onlyDiff = this.onlyDiffFlag ? 'Y' : 'N'
      let res = await axios.get(`/ui/contentcore/templates/${this.ID1}/diff`,
        {
          params: {
            ID2: this.ID2,
            backupNo1: this.backupNo1,
            backupNo2: this.backupNo2,
            fileName: this.fileName,
            platformID: this.platformID,
            onlyDiff
          }
        }
      )
      this.date1 = res.data.date1
      this.date2 = res.data.date2
      this.list1 = res.data.data.list1
      this.list2 = res.data.data.list2
    }
  },
  created() {
    this.getDiffList()
  }
}
</script>
<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);
  width: 100%;
}
.diff-rowno {
  background-color: #ddd;
}
.diff-line {
  padding: 4px 7px 4px 6px;
}
</style>
