<template>
  <el-button :disabled="!contentId" @click="open = true" :type="buttonType" :priv="'com.zving.cms.Catalog.Content.Edit.'+catalogId">
    <i class="fa fa-file-text-o"></i>版本

  <el-dialog title="历史版本" :visible.sync="open" :append-to-body="true" class="pop-dialog">
    <el-toolbar>
       <el-button  @click="add">
         <i class="fa fa-save"></i>保存为新版本
       </el-button>
       <el-button @click="update('restore')" :disabled="selectedVersionRows.length !== 1">
         <i class="fa fa-refresh"></i>恢复
       </el-button>
       <el-button @click="del" :disabled="selectedVersionRows.length === 0">
         <i class="fa fa-remove"></i>删除
       </el-button>
       <el-button v-if="contentType==='Article'"  @click="compareVersionClickHandler()" :disabled="selectedVersionRows.length !== 2">
         <i class="fa fa-search"></i>对比
       </el-button>
       <el-button v-if="contentType==='Article'"  @click="compareToCurrentVersionClickHandler()"
         :disabled="selectedVersionRows.length !== 1">
         <i class="fa fa-search"></i>和当前版本对比
       </el-button>
     </el-toolbar>

    <div class="content-table sort-el-table">
      <el-table ref="dataTable1" :data-read-url="getVersions" tooltip-effect="dark" :page-size="10" @selection-change="handleSelectionChange">
        <el-table-column width="65" align="center">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column type="selection" width="65" align="center"></el-table-column>
        <el-table-column prop="backupNo" label="版本号"></el-table-column>
        <el-table-column prop="backupOperator" label="操作人员"></el-table-column>
        <el-table-column prop="backupTime" label="发布时间">
          <template slot-scope="scope">
              {{scope.row.backupTime | fixDateTime}}
            </template>
        </el-table-column>
      </el-table>
    </div>

    <div slot="footer">
      <el-button type="primary" @click="open = false">关 闭</el-button>
    </div>
  </el-dialog>
  <article-history :show.sync="articleHistory.show" :type="articleHistory.type" :articleID="articleHistory.articleID" :backupNo="articleHistory.backupNo" :backupNoa="articleHistory.backupNo1" :backupNob="articleHistory.backupNo2"></article-history>
 </el-button>
</template>
<script>
import util from '@src/common/util.js'
import articleHistory from '../../article/articleHistory.vue'
export default {
  components: {
    articleHistory
  },
  props: {
    contentId: {
      type: [String, Number]
    },
    buttonType: {
      type: String,
      default: ''
    },
    catalogId: {
      type: [Number, String]
    },
    contentType: {
      type: String,
      default: 'Article'
    }
  },
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  watch: {
    open(val) {
      if (val === true) {
        this.$nextTick(() => {
          this.$refs.dataTable1 && this.$refs.dataTable1.getData()
        })
      } else {
        this.$refs.dataTable1.selectedRows = []
      }
    }
  },
  data() {
    return {
      selectedVersionRows: [],
      articleHistory: {
        show: false,
        type: '',
        articleID: '',
        backupNo: '',
        backupNo1: '',
        backupNo2: ''
      },
      open: false
    }
  },
  methods: {
    getVersions() {
      return [`/ui/contentcore/contents/${this.contentId}/v`, {}]
    },
    addVersionClickHandler(val) {
    },
    async add() {
      let resp = await axios.post(`/ui/contentcore/contents/${this.contentId}/v`)
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.$refs.dataTable1.getData()
      }
    },
    async del() {
      let backupNos = this.getIds()
      if (backupNos.length === 0) {
        this.$alert('请选择记录')
        return
      }
      let resp = await axios.delete(`/ui/contentcore/contents/${this.contentId}/v/${backupNos.join(',')}`)
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.$refs.dataTable1.clearSelection()
        this.$refs.dataTable1.getData()
      }
    },
    async update(val) {
      let ids = this.getIds()
      if (ids.length !== 1) {
        this.$alert('请先选中一条记录')
        return
      }
      let params = {
        type: val,
        backupNo: ids[0]
      }
      let resp = await axios.put(`/ui/contentcore/contents/${this.contentId}/v/${ids.join(',')}`, params)
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.open = false
        this.$refs.dataTable1.clearSelection()
        this.$emit('refresh-content', true)
      }
    },
    getIds() {
      let rowIds = []
      this.selectedVersionRows.forEach(function(row) {
        !!row.backupNo && rowIds.push(row.backupNo)
      })
      return rowIds
    },
    handleSelectionChange(val) {
      this.selectedVersionRows = val
    },
    compareVersionClickHandler() {
      this.articleHistory = {
        show: true,
        type: 'Compare',
        articleID: this.contentId,
        backupNo1: this.selectedVersionRows[0].backupNo,
        backupNo2: this.selectedVersionRows[1].backupNo
      }
    },
    compareToCurrentVersionClickHandler() {
      this.articleHistory = {
        show: true,
        type: 'CompareToCurrent',
        articleID: this.contentId,
        backupNo: this.selectedVersionRows[0].backupNo
      }
    }
  }
}
</script>

 <style>
 .pop-dialog .el-dialog {
   width: 720px;
 }
 @media (max-width: 480px) {
   .pop-dialog .el-dialog {
     width: 96%;
   }
 }
 </style>
