<template>
  <div>
    <div class="right-list-toolbar">
      <el-toolbar>
      <div class="search-bar">
        最后修改时间：从
        <el-date-picker id="lock-date-picker1" v-model="startDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        至
        <el-date-picker id="lock-date-picker2" v-model="endDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <el-input v-model="lockUser" @keyup.enter.native="getLockedContent" placeholder="请输入锁定人" class="search-box-lockedcontent">
          <el-button slot="append" title="查询" icon="search" @click="getLockedContent"></el-button>
        </el-input>
      </div>
      </el-toolbar>
      <div class="">
      <el-table :data="lockContentData" ref="datatable" :data-read-url="getData" :page-size="20" tooltip-effect="dark" @selection-change="onSelectionChange">
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column type="selection" width="36"></el-table-column>
        <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
        <el-table-column prop="lockUser" label="锁定人" width="160"></el-table-column>
        <el-table-column prop="statusName" label="状态" width="160"></el-table-column>
        <el-table-column prop="modifyTime" label="最后修改时间" width="200">
          <template slot-scope="scope">
            {{scope.row.modifyTime | fixDateTime}}
          </template>
        </el-table-column>
        <el-table-column width="60">
          <template slot-scope="scope">
            <el-button type="text" @click="releaseLock(scope.row.ID)" :priv="'com.zving.cms.Catalog.Content.Edit.'+catalogId">
              <i class="fa fa-unlock-alt f16" style="color:#f1a001;" title="解锁" ></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      keyword: '',
      lockUser: '',
      startDate: '',
      endDate: '',
      lockContentData: [],
      selectedRows: []
    }
  },
  watch: {
    catalogId(val) {
      this.getLockedContent()
    }
  },
  methods: {
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    async releaseLock(ID) {
      let res = await axios.put(`/ui/releaselockcontent/${ID}/releaselock`)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.getLockedContent()
      }
    },
    async releaseMoreLock() {
      if (this.selectedRows.length < 1) {
        this.$alert('请先选择一条记录', '提示', {
          type: 'info'
        })
        return
      }
      let rowIds = []
      this.selectedRows.forEach(function (row) {
        rowIds.push(row.ID)
      })
      try {
        await this.$confirm('确定解锁选中的记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.put(
          `/ui/releaselockcontent/${rowIds.join(',')}/releasemorelock`
        )
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.getLockedContent()
        }
      } catch (e) {

      }
    },
    getData() {
      return [
        '/ui/releaselockcontent', {
          params: {
            catalogID: this.catalogId,
            lockUser: encodeURIComponent(this.lockUser),
            startDate: this.startDate,
            endDate: this.endDate
          }
        }
      ]
    },
    async getLockedContent() {
      this.$refs.datatable.getData()
    }
  },
  props: ['catalogId']
}
</script>
<style scoped>
  .search-bar {
    text-align: right;
    padding: 0;
    width: 100%;
  }
  .search-box-lockedcontent {
    width:230px;
    margin-left:10px;
  }
</style>
