<template>
  <div class="app-container">
    <div class="filter-container blue-top-border">
      <el-input v-model="listQuery.type" placeholder="分类" class="filter-item" clearable @change="handleFilter" />
      <el-input v-model="listQuery.content" placeholder="待办内容" class="filter-item" clearable @change="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
    </div>
    <div class="content-container">
      <el-table v-loading="listLoading" row-key="id" :data="list" border fit highlight-current-row style="width: 100%;">
        <el-table-column label="序号" type="index" align="center" width="80" />
        <!-- <el-table-column label="功能模块" prop="applicationName" align="center" width="140" /> -->
        <el-table-column label="分类" prop="type" align="center" width="140" />
        <el-table-column label="待办内容" prop="content" align="center" />
        <el-table-column label="备注" prop="remark" align="center" />
        <el-table-column label="处理状态" prop="isComplete" align="center" width="100">
          <template slot-scope="{ row }">
            <el-tag v-if="row.isComplete" size="mini" type="success">已完成</el-tag>
            <el-tag v-else size="mini" type="danger">未完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="creationTime" align="center" width="140">
          <template slot-scope="{ row }">{{ row.creationTime | datetime }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <el-button v-show="!row.isComplete" size="mini" type="primary" @click="handleTask(row)">进入处理</el-button>
            <el-button v-show="!row.isComplete" type="success" size="mini" @click="markAsDone(row)">标记为已完成</el-button>
            <el-button v-show="row.isComplete" size="mini" type="danger" @click="markAsUnDone(row)">标记为未完成</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :skip-count.sync="listQuery.skipCount" :max-result-count.sync="listQuery.maxResultCount" @pagination="getList" />
    </div>
  </div>
</template>

<script>
// import * as projectApi from "@/api/project";
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

import { mapGetters } from 'vuex'
import { getToDoList, markAsComplete, markAsUnComplete } from '@/api/backbone/todo'

export default {
  name: 'Todo',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        applicationCode: process.env.VUE_APP_MODULE_CODE,
        skipCount: 0,
        maxResultCount: 20
      }
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  watch: {
    $route(to) {
      if (to.name === 'todo') {
        this.getList()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      this.listQuery.userId = this.userId
      getToDoList(this.listQuery).then(res => {
        this.list = res.items
        this.total = res.totalCount
        this.listLoading = false
      })
    },
    handleTask(row) {
      window.open(row.completePageUrl)
    },
    handleFilter() {
      this.listQuery.skipCount = 0
      this.getList()
    },
    markAsDone(row) {
      this.listLoading = true
      markAsComplete(row.id).then(() => {
        this.getList()
        this.listLoading = false
      })
    },
    markAsUnDone(row) {
      this.listLoading = true
      markAsUnComplete(row.id).then(() => {
        this.getList()
        this.listLoading = false
      })
    }
  }
}
</script>
