<template>
  <div class="pane-up-wrap right-detail-toolbar" v-loading="tabsDataLoading">
    <el-toolbar>
      <el-button @click="revisionCompare" :disabled="selectedRows.length!=2" priv="ContentCore.TemplateMenu">
        <i class="fa fa-search" aria-hidden="true"></i>修订版本对比
      </el-button>
    </el-toolbar>
    <div>
    <el-table :data="template.historyRevision" tooltip-effect="dark" ref="versionTable" style="width: 100%" @selection-change="selectionChange">
      <el-table-column type="selection" align="center" width="50"></el-table-column>
      <el-table-column prop="backupNo" label="模板版本号" width="120"></el-table-column>
      <el-table-column prop="lastModified" label="修订时间" width="160"></el-table-column>
      <el-table-column prop="fileName" label="文件名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="modifyUser" label="修订人" width="100"></el-table-column>
      <el-table-column prop="fileSizeName" label="文件大小" width="80"></el-table-column>
      <el-table-column label="操作" align="right" width="80">
        <template slot-scope="scope">
          <el-button @click.stop="viewTemplateContent(scope.row)" priv="ContentCore.TemplateMenu" type="text" title="查看内容">
            <i class="fa fa-search f16"></i>
          </el-button>
          <el-button @click.stop="restoreTempalte(scope.row)" type="text" priv="ContentCore.TemplateMenu.Restore" title="恢复模板">
            <i class="fa fa-refresh f16"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

  <!--查看模板内容Dialog-->
  <el-dialog title="查看模板修订版本" :visible.sync="dialogVisible">
    <div style="" v-loading="textareaLoading">
      <el-input type="textarea" :rows="15" placeholder="" v-model="templateContent" readonly>
      </el-input>
    </div>
  </el-dialog>

  </div>
</template>

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

export default {
  data() {
    return {
      currentTemplateParam: {
        fileName: '',
        siteID: 0,
        platformID: 0
      },
      currentRowData: {}, // 当前模板修订历史临时数据
      tabsDataLoading: false, // tabs数据加载状态
      restoreTempalteBtnLoading: false, // 恢复模板按钮Loading状态
      dialogVisible: false, // 查看模板修订版本内容Dialog状态
      textareaLoading: false, // 查看模板修订版本内容加载状态
      templateContent: '', // 模板内容
      template: {
        historyRevision: []
      }, // 右侧模板基本信息以及修订历史
      selectedRows: []
    }
  },
  methods: {
    // 加载模板修订历史信息
    async loadTableData(inputParams) {
      this.template.historyRevision = []
      !util.isEmptyObject(inputParams) && Object.assign(this.currentTemplateParam, inputParams)
      let params = {
        fileName: this.currentTemplateParam.fileName,
        siteID: this.currentTemplateParam.siteID,
        platformID: this.currentTemplateParam.platformID
      }
      if (!params.fileName) {
        return
      }
      this.tabsDataLoading = true

      let res = await axios.get(`/ui/template/history`, { params: params })
      let data = res.data
      if (data.status === 1) {
        this.template.historyRevision = data.data
      // console.log(data.data)
      }
      this.tabsDataLoading = false
    },

    // 查看模板内容
    viewTemplateContent(row) {
      this.dialogVisible = true
      this.loadTemplateContent(row)
    },

    // 加载模板内容
    async loadTemplateContent(row) {
      !!row && row.ID && Object.assign(this.currentRowData, row)
      this.templateContent = ''
      let param = {
        platformID: this.currentTemplateParam.platformID,
        fileName: this.currentRowData.fileName,
        ID: this.currentRowData.ID,
        siteID: this.currentTemplateParam.siteID,
        backupNo: this.currentRowData.backupNo
      }

      this.textareaLoading = true

      let res = await axios.get(`/ui/template/initcontent`, { params: param })
      let data = res.data
      if (data.status === 1 && data.data.content) {
        this.templateContent = data.data.content
      } else {
        this.$alert(data.message)
      }
      this.textareaLoading = false
    },

    // 恢复模板
    async restoreTempalte(row) {
      !!row && row.ID && Object.assign(this.currentRowData, row)
      let param = {
        platformID: this.currentTemplateParam.platformID,
        fileName: this.currentRowData.fileName,
        ID: this.currentRowData.ID,
        backupNo: this.currentRowData.backupNo
      }
      this.restoreTempalteBtnLoading = true

      let res = await axios.put('/ui/template/restore', param)
      let data = res.data
      this.restoreTempalteBtnLoading = false
      this.loadTableData()
      this.selectedRows = []
      !!data.message && util.showResponseMessage(data)
    },

    // 修订版本对比
    revisionCompare() {
      if (!this.selectedRows.length && this.selectedRows.length !== 2) {
        this.$alert('请选择两条记录！')
        return
      }
      let platformID = this.currentTemplateParam.platformID
      let backupNo1 = this.selectedRows[0].backupNo
      let backupNo2 = this.selectedRows[1].backupNo
      let fileName = this.currentTemplateParam.fileName
      let ID1 = this.selectedRows[0].ID
      let ID2 = this.selectedRows[1].ID
      window.open(
        `./templateDiff.html?platformID=${platformID}&backupNo1=${backupNo1}&backupNo2=${backupNo2}&fileName=${fileName}&ID1=${ID1}&ID2=${ID2}`
      )
    },

    // // 修订历史表格行双击事件
    // versionTableDBlclick(row) {
    // // console.log(row)
    //   this.selectedRows = [row]
    //    this.currentRowData = this.selectedRows.length ? Object.assign({} this.selectedRows[0]) : {}
    //   this.viewTemplateContent()
    //  }

    // 修订历史表格行选中事件
    selectionChange(selection) {
      this.selectedRows = selection
      this.currentRowData = this.selectedRows.length ? Object.assign({}, this.selectedRows[0]) : {}
    // console.log(this.selectedRows)
    // console.log(this.currentRowData)
    }
  }
}
</script>
