<template>
  <div v-loading="dataLoading" class="right-list-toolbar editor-workspace-el-row">
    <el-toolbar>
      <el-button @click="restoreDocument" :disabled="selectedRows.length === 0" priv="ContentCore.EditWorkSpace.RecycleBin">
        <i class="fa  fa-refresh"></i>恢复
      </el-button>
      <el-button @click="deleteReally" :disabled="selectedRows.length === 0" priv="ContentCore.EditWorkSpace.RecycleBin">
        <i class="fa  fa-minus"></i>删除
      </el-button>
      <el-button @click="restoreCatalog" priv="ContentCore.EditWorkSpace.RecycleBin">
        <i class="fa  fa-refresh"></i>恢复子栏目
      </el-button>
      <el-button @click="deleteReallyCatalog" priv="ContentCore.EditWorkSpace.RecycleBin">
        <i class="fa  fa-remove"></i>删除栏目
      </el-button>
      <el-button @click="restoreRootCatalog" priv="ContentCore.EditWorkSpace.RecycleBin">
        <i class="fa  fa-refresh"></i>恢复栏目
      </el-button>
    </el-toolbar>
    <div>
      <div class="search-bar">
        <el-row type="flex" class="row-bg" align="middle">
          <el-col :span="8"></el-col>
          <el-col :span="9">
            <el-date-picker
              id="person-date-picker"
              class="layout-date-picker"
              v-model="dateInterval"
              type="datetimerange"
              start-placeholder="删除时间"
              @change="search" end-placeholder="删除时间"
              style="width:100%"
              :picker-options="selectDates">
            </el-date-picker>
          </el-col>
          <el-col :span="7">
            <el-input v-model="keyword" @keyup.enter.native="search" placeholder="请输入关键词" class="search-box-recyclebin">
              <el-button slot="append" title="查询" icon="search" @click="search"></el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div class="padding-vertical-max">
      <el-table :data="datas" 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="backupOperator" label="删除人" width="160"></el-table-column>
        <el-table-column prop="statusName" label="删除前状态" width="160"></el-table-column>
        <el-table-column prop="backupTime" label="删除时间" width="200">
          <template slot-scope="scope">
            {{scope.row.backupTime | fixDateTime}}
          </template>
        </el-table-column>
      </el-table>
      </div>
    </div>
    <recyclebin-catalog-dialog :show.sync="recycleBinCatalogModal" :catalogID="recycleCatalogId" :tree-level="treeLevel" :del-mode="delMode" :is-child-catalog="isChildCatalog"
      @callback="updateTree"></recyclebin-catalog-dialog>
    <imagegroup-recycleBin-list :show.sync="imageGroupModal" :catalogID="catalogId" :del-mode="delMode" item="ImageGroup" @callback="search"></imagegroup-recycleBin-list>
    <videogroup-recyclebin-list :show.sync="videoGroupModal" :catalogID="catalogId" :del-mode="delMode" item="VideoGroupContent"
      @callback="search"></videogroup-recyclebin-list>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import recycleBinCatalogDialog from './recycleBinCatalogDialog.vue'
import imageGroupRecycleBinList from '../media/components/ImageGroupRecycleBinList.vue'
import videoGroupRecycleBinList from '../media/components/VideoGroupRecycleBinList.vue'
export default {
  props: {
    catalogId: {
      type: [String, Number],
      required: true
    },
    treeLevel: {
      type: [String, Number],
      required: true
    },
    contentType: {
      type: String
    }
  },
  components: {
    'recyclebin-catalog-dialog': recycleBinCatalogDialog,
    'imagegroup-recycleBin-list': imageGroupRecycleBinList,
    'videogroup-recyclebin-list': videoGroupRecycleBinList
  },
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      videoGroupModal: false,
      imageGroupModal: false,
      keyword: '',
      dataLoading: false,
      datas: [],
      selectedRows: [],
      sortString: 'ID', // 排序字段
      sortFlag: 'desc', // 排序字段
      delMode: false,
      recycleBinCatalogModal: false,
      recycleCatalogId: '',
      isChildCatalog: false,
      dateInterval: '',
      selectDates: {
        shortcuts: [
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    catalogId(val) {
      this.recycleCatalogId = val
      this.search()
    }
  },
  methods: {
    updateTree() {
      location.reload()
    },
    restoreImageGroup() {
      this.delMode = false
      this.imageGroupModal = true
    },
    deleteReallyImageGroup() {
      this.delMode = true
      this.imageGroupModal = true
    },
    restoreVideoGroup() {
      this.delMode = false
      this.videoGroupModal = true
    },
    deleteReallyVideoGroup() {
      this.delMode = true
      this.videoGroupModal = true
    },
    async restoreDocument() {
      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/recyclebin/${rowIds.join(',')}/recovery`,
          { catalogID: this.catalogId }
        )
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.search()
        }
      } catch (e) {

      }
    },
    async deleteReally() {
      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.delete(
          `/ui/recyclebin/${rowIds.join(',')}?catalogID=` + this.catalogId
        )
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.search()
        }
      } catch (e) {

      }
    },
    restoreCatalog() {
      this.recycleCatalogId = this.catalogId
      this.delMode = false
      this.isChildCatalog = true
      this.recycleBinCatalogModal = true
    },
    restoreRootCatalog() {
      this.recycleCatalogId = 0
      this.delMode = false
      this.isChildCatalog = false
      this.recycleBinCatalogModal = true
    },
    deleteReallyCatalog() {
      this.delMode = true
      this.recycleBinCatalogModal = true
      this.isChildCatalog = false
    },
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    getData() {
      let params = {
        sortString: this.sortString,
        sortFlag: this.sortFlag,
        catalogID: this.catalogId,
        keyword: encodeURIComponent(this.keyword)
      }
      if (this.dateInterval) {
        params = Object.assign({}, params, {
          startDate: Date.parse(this.dateInterval[0]),
          endDate: Date.parse(this.dateInterval[1])
        })
      }
      return ['/ui/recyclebin', {params}]
    },
    search() {
      this.$refs.datatable.getData()
    }
  }
}
</script>
<style scoped>
  .search-box-recyclebin{
    width: 265px;
  }
  .search-bar {
    text-align: right;
    padding: 0;
  }
</style>
