<template>
  <div>
    <el-dialog :title="delMode ? '删除视频集':'恢复视频集'" :visible.sync="isShow" @open="dialogOpen" class="videogroup-recyclebin-dialog">
      <div class="search-bar">
        列出：从
        <el-date-picker id="vgrbl-date-picker1" v-model="startDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" class="search-bar-item">
        </el-date-picker>
        至
        <el-date-picker id="vgrbl-date-picker2" v-model="endDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" class="search-bar-item">
        </el-date-picker>
        关键词:
        <el-input v-model="keyword" @keyup.enter.native="search" class="search-bar-item"></el-input>
        <el-button type="primary" @click="search">查询</el-button>
      </div>

      <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" align="center" width="40"></el-table-column>
        <el-table-column prop="title" label="标题!!" show-overflow-tooltip></el-table-column>
        <el-table-column prop="backupOperator" label="删除人" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="statusName" label="删除前状态" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="backupTime" label="删除时间" width="120" show-overflow-tooltip></el-table-column>
      </el-table>
      <!-- 底部确认按钮 -->
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      selectedRows: [],
      startDate: '',
      endDate: '',
      keyword: '',
      datas: [],
      sortString: 'ID', // 排序字段
      sortFlag: 'desc' // 排序字段
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    dialogOpen() {
      this.selectedRows = []
      this.startDate = ''
      this.endDate = ''
      this.keyword = ''
      this.datas = []
      this.$nextTick(() => {
        this.search()
      })
    },
    search() {
      this.$refs.datatable.getData()
    },
    getData() {
      return [
        '/ui/recyclebin',
        {
          params: {
            item: this.item,
            catalogID: this.catalogID,
            startDate: this.startDate,
            endDate: this.endDate,
            keyword: this.keyword,
            sortString: this.sortString,
            sortFlag: this.sortFlag
          }
        }
      ]
    },
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    async confirm() {
      if (this.selectedRows.length === 0) {
        this.$alert('请先选择视频集', '提示', {
          type: 'info'
        })
        return
      }
      let rowIds = []
      this.selectedRows.forEach(function (row) {
        rowIds.push(row.ID)
      })
      let res
      if (this.delMode) {
        try {
          await this.$confirm('彻底删除后将不可恢复，确认彻底删除选中的视频集吗？？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          res = await axios.delete(
            `/ui/recyclebin/${rowIds.join(',')}?item=VideoGroupContent&catalogID=` + this.catalogID
          )
        } catch (e) {
          return
        }
      } else {
        res = await axios.put(
          `/ui/recyclebin/${rowIds.join(',')}/recovery`,
          { catalogID: this.catalogID, item: 'VideoGroupContent' }
        )
      }
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.isShow = false
        this.$emit('callback')
      }
    }
  },
  props: {
    show: {
      type: Boolean,
      required: true
    },
    delMode: {
      type: Boolean,
      default: false
    },
    item: {
      type: String,
      default: 'VideoGroupContent'
    },
    catalogID: {
      type: [String, Number],
      required: true
    }
  }
}
</script>
<style>
  /* 在一般情况下dialog宽为850像素，在逻辑分辨率480像素以下dialog宽为96% */

  .videogroup-recyclebin-dialog .el-dialog {
    width: 850px;
  }

  @media (max-width: 480px) {
    .videogroup-recyclebin-dialog .el-dialog {
      width: 96%;
    }
  }
</style>
<style scoped>
  .search-bar {
    text-align: right;
  }

  .search-bar-item {
    width: 140px;
  }
</style>
