<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-input v-model="search.sign" clearable/>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="search.eventDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="完成度">
        <el-input v-model="search.schedule" clearable/>
      </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="scalelog"
      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 align="center" prop="nickname" label="用戶名">
        <template slot-scope="scope" >
          {{ scope.row.nickname }}
        </template>
      </el-table-column>
      <el-table-column sortable align="center" prop="sign" label="序號">
        <template slot-scope="scope">
          {{ scope.row.sign }}
        </template>
      </el-table-column>
      <el-table-column sortable align="center" prop="eventDate" label="量表日期">
        <template slot-scope="scope">
          {{ scope.row.eventDate !=null ? scope.row.eventDate.substring(0,10) : '无' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="填寫日期">
        <template slot-scope="scope">
          {{ scope.row.startDate.split(" ")[0] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="开始時間">
        <template slot-scope="scope">
          {{ scope.row.startDate.split(" ")[1] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="完成時間">
        <template slot-scope="scope">
          {{ scope.row.createDate.split(" ")[1] }}
        </template>
      </el-table-column>
      <el-table-column sortable align="center" prop="schedule" label="完成度">
        <template slot-scope="scope">
          {{ scope.row.schedule*100 }}%
        </template>
      </el-table-column>
      <el-table-column align="center" label="起床">
        <template slot-scope="scope">
          {{ scope.row.getUp }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="接觸">
        <template slot-scope="scope">
          {{ scope.row.contact }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="工作">
        <template slot-scope="scope">
          {{ scope.row.work }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="晚飯">
        <template slot-scope="scope">
          {{ scope.row.dinner }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="睡覺">
        <template slot-scope="scope">
          {{ scope.row.sleep }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="設備號">
        <template slot-scope="scope">
          {{ scope.row.deviceId }}
        </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"
    />
    <el-dialog title="量表詳情" :visible.sync="gameVisible" width="300" center>
      <table border="1" cellspacing="0" style="width: 100%">
        <tr>
          <th>起床</th>
          <th>接觸</th>
          <th>工作</th>
          <th>晚飯</th>
          <th>睡覺</th>
        </tr>
        <tr>
          <td align="center">{{detail.getUp}}</td>
          <td align="center">{{detail.contact}}</td>
          <td align="center">{{detail.work}}</td>
          <td align="center">{{detail.dinner}}</td>
          <td align="center">{{detail.sleep}}</td>
        </tr>
      </table>
    </el-dialog>
  </div>
</template>

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

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) {
      ScaleApi.del({ id: r.id }).then(response => {
        Message({
          message: '刪除成功',
          type: 'success',
          duration: 2 * 1000
        })
        if (response.code === 200) {
          this.nextPage()
        }
      })
    },
    openDetail(r) {
      this.detail = r
      this.gameVisible = true
    },
    sortChange(column) {
      this.order[column.prop] = column.order
      this.nextPage()
    },
    nextPage() {
      this.listLoading = true
      ScaleApi.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)
      })
    },
    download() {
      ScaleApi.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.scalelog.selection.map(function(elem, index) {
        return elem.id
      }).join(',')

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

<style scoped>

</style>
