<template>
  <div class="app-container">
    <el-form ref="searchArr" :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="用戶名">
        <el-input v-model="search.nickname" clearable />
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="search.pushTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="推送类型">
        <el-select v-model="search.type" clearable>
          <el-option
            v-for="item in [{key: 'game', value: 1}, {key: 'scale', value: 2}]"
            :key="item.value"
            :label="item.key"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="nextPage()">搜素</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="download()">下載</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="deleteC()">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="back()">返回</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="gamelog"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @sort-change="sortChange"
    >
      <el-table-column
        type="selection"
        align="center"
        width="40"
      />
      <el-table-column align="center" label="ID" width="55">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column sortable prop="nickname" align="center" label="用戶">
        <template slot-scope="scope">
          {{ scope.row.nickname }}
        </template>
      </el-table-column>
      <el-table-column sortable prop="pushTime" align="center" label="推送日期">
        <template slot-scope="scope">
          {{ scope.row.pushTime.split(' ')[0] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="推送時間">
        <template slot-scope="scope">
          {{ scope.row.pushTime.split(' ')[1] }}
        </template>
      </el-table-column>
      <el-table-column sortable prop="status" align="center" label="推送狀態">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? 'delay' : scope.row.status === 2 ? 'expired' : 'enter' }}
        </template>
      </el-table-column>
      <el-table-column sortable prop="type" align="center" label="推送類型">
        <template slot-scope="scope">
          {{ scope.row.type === 1 ? 'game' : 'scale' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="260">
        <template slot-scope="{row}">
          <el-button v-if="checkPermission(['admin'])" size="mini" @click="openDel(row)">
            删除
          </el-button>
<!--          <el-button v-if="checkPermission(['admin'])" size="mini" @click="openDetail(row)">-->
<!--            查看詳情-->
<!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="page.total"
      :page.sync="page.pageNum"
      :limit.sync="page.size"
      @pagination="nextPage"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
import checkPermission from '@/utils/permission'
import PushApi from '@/api/push'

export default {
  name: 'List',
  components: { Pagination },
  data() {
    return {
      list: [],
      search: {},
      order: {},
      detail: [],
      page: { total: 0, size: 0, pageNum: 0 },
      listLoading: false,
      gameVisible: false
    }
  },
  created() {
    this.nextPage()
  },
  mounted() {

  },
  methods: {
    checkPermission,
    openDel(r) {
      this.$confirm('此操作将永久id爲 ' + r.id + '的遊戲記錄, 是否继续?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delGameLog(r)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delGameLog(r) {
      PushApi.del({ id: r.id }).then(response => {
        Message({
          message: '刪除成功',
          type: 'success',
          duration: 2 * 1000
        })
        if (response.code === 200) {
          this.nextPage()
        }
      })
    },
    openDetail(r) {
      PushApi.detail({ id: r.id }).then(response => {
        if (response.code === 200) {
          this.detail = response.data
          this.gameVisible = true
        }
      })
    },
    nextPage() {
      this.listLoading = true
      PushApi.getList({ page: this.page.pageNum, search: JSON.stringify(this.search), order: JSON.stringify(this.order) }).then(response => {
        this.list = response.data.list
        this.page.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      })
    },
    sortChange(column) {
      this.order[column.prop] = column.order
      this.nextPage()
    },
    download() {
      PushApi.download({ search: JSON.stringify(this.search), order: JSON.stringify(this.order) }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', response.headers['filename'])
        document.body.appendChild(link)
        link.click()
      })
    },
    deleteC() {
      const ids = this.$refs.gamelog.selection.map(function(elem, index) {
        return elem.id
      }).join(',')

      PushApi.deleteIds({ ids: ids }).then(response => {
        this.nextPage()
      })
    },
    back() {
      this.search = {}
      this.order = {}
      this.nextPage()
    }
  }
}
</script>

<style scoped>

</style>
