<template>
  <div>
    <el-dialog :title="'区块历史记录'" :visible.sync="isShow" @open="dialogOpen" :close-on-click-modal="false" :width="dialogWidth" class="block-version-dlg">
      <!-- 工具条start -->
      <el-toolbar>
        <el-button @click="restoreClick" :disabled="selectedRows.length !== 1">
          <i class="fa fa-repeat" aria-hidden="true"></i>恢复</el-button>
      </el-toolbar>
      <!-- 工具条end -->
      <el-row>
        <!-- 左侧 -->
        <el-col :span="10" style="margin-right: 10px;">
          <!-- 表格start -->
          <el-table ref="dataTable" :data="historyList" tooltip-effect="dark" v-loading="dataLoading" @cell-click="onCellClick" @selection-change="onSelectionChange">
            <el-table-column type="selection" width="30" align="center"></el-table-column>
            <el-table-column prop="backupOperator" label="操作人员" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="backupTime" label="保存时间" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" align="right" width="80">
               <template slot-scope="scope">
                  <el-button @click.stop="deleteClick(scope.row)" type="text" title="删除">
                      <i class="fa fa-remove f16"></i></el-button>
                </template>
            </el-table-column>
          </el-table>
          <!-- 表格end -->
          <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper"></el-pagination> -->
        </el-col>
        <!-- 详细内容start -->
        <el-col :span="13" :offset="1" class="manual-block-div" style="margin-left:10px;">
          <el-table :data="dataList" class="table-con" v-if="cententType==='table'">
            <el-table-column width="50" align="center">
              <template slot-scope="scope">
                {{scope.$index+1}}
              </template>
            </el-table-column>
            <el-table-column label="标题" class="title-box">
              <template slot-scope="props">
                <div class="row-item" :draggable="true">
                  <el-form label-position="left" inline class="con-form">
                    <el-form-item>
                      <span class="con-box" v-for="con in props.row.items" :key="con.title">
                        <span class="con con-item" :style="con.titleStyle">
                          {{ con.title }}
                        </span>
                      </span>
                    </el-form-item>
                  </el-form>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <span v-if="cententType==='text'" v-html="selectedRow.content"></span>
          <div v-if="cententType===''"></div>
        </el-col>
        <!-- 详细内容end -->
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="isShow = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  props: { show: Boolean, blockID: [Number, String] },

  data() {
    return {
      clientHeight: '',
      clientWidth: '',
      historyList: [],
      dataLoading: true,
      currentPage: 1, // 当前页
      pageSizes: [5, 10, 15, 20], // 可选页面大小
      pageSize: 10, // 当前页面大小
      total: 0, // 数据总条数
      selectedRow: {},
      selectedRows: [],
      dataList: [],
      cententType: '', // text;table
      editorConfig: {
        // 编辑器配置
        toolbar: [],
        height: this.clientHeight * 0.4
      }
    }
  },
  methods: {
    onCellClick(row) {
      if (row.content) {
        if (row.content.startsWith('<')) {
          this.cententType = 'text'
        } else {
          let items = JSON.parse(row.content).items
          if (items && items.length) {
            this.cententType = 'table'
            this.dataList = []
            for (let i = 0; i < items.length; i++) {
              this.dataList.push({ items: items[i] })
            }
          }
        }
      }
    },

    onSelectionChange(selection) {
      // 选择行改变//选择行改变
      this.selectedRows = selection
      if (selection[0]) {
        this.selectedRow = JSON.parse(JSON.stringify(selection[0]))
      }
    },

    // 改变选择表格大小
    handleSizeChange(val) {
      this.pageSize = val
      this.loadHistoryList()
    },

    // 改变选择表格当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadHistoryList()
    },

    async restoreClick() {
      // 点击恢复
      let data = await axios.put(`/ui/blocklist/restore/${this.blockID}`, { backupNo: this.selectedRow.backupNo })
      if (data.data.status === 1) {
        this.$emit('clickRestore', this.selectedRow)
        this.isShow = false
      }
      util.showResponseMessage(data.data)
    },

    async deleteClick(row) {
      // 点击删除
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let rowIDs = [row.backupNo]
      let data = await axios.delete(`/ui/blocklist/delhistory/${rowIDs}`)
      // this.selectedRows = [];
      if (data.data.status === 1) {
        this.historyList.splice(this.historyList.indexOf(row), 1)
        this.total = this.total - 1
      }
      util.showResponseMessage(data.data)
    },

    async loadHistoryList() {
      let pageIndex = this.currentPage - 1
      let data = await axios.get(`/ui/blocklist/history/${this.blockID}`, {params: { pageSize: this.pageSize, pageIndex: pageIndex }})
      this.historyList = data.data.data
      this.total = data.data.total
      this.dataLoading = false
    },

    dialogOpen() {
      this.loadHistoryList()
      this.cententType = ''
    }
  },
  created() {
    if (document.documentElement.clientWidth >= 1920) {
      this.dialogWidth = '60%'
    } else {
      this.dialogWidth = '70%'
    }
    this.clientHeight = document.documentElement.clientHeight
    this.clientWidth = document.documentElement.clientWidth
  }
}
</script>

<style>
.block-version-dlg  .manual-block-div .table-con {
    margin-top: 0px;
  }
</style>
