<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
        <a-card title="我的待办" :bordered="false">
          <a-row :gutter="24">
            <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
              <a-table
                :scroll="scroll"
                bordered
                :loading="loading"
                rowKey="id"
                :dataSource="data"
                :pagination="ipagination"
                @change="handleTableChange"
                ref="table"
                size="small"
              >
                <a-table-column title="#" :width="50">
                  <template slot-scope="t,r,i">
                    <span>{{i+1}}</span>
                  </template>
                </a-table-column>
                <a-table-column title="任务名称" data-index="name" :width="150" align="center">
                  <template slot-scope="t">
                    <span>{{t}}</span>
                  </template>
                </a-table-column>
                <a-table-column title="所属流程" data-index="processName" :width="150" align="center">
                  <template slot-scope="t">
                    <span>{{t}}</span>
                  </template>
                </a-table-column>
                <a-table-column title="委托代办人" data-index="owner" align="center" :width="150">
                  <template slot-scope="t">
                    <span>{{t}}</span>
                  </template>
                </a-table-column>
                <a-table-column title="流程发起人" data-index="applyer" :width="150" align="center">
                  <template slot-scope="t">
                    <span>{{t}}</span>
                  </template>
                </a-table-column>
                <a-table-column
                  title="优先级"
                  data-index="priority"
                  :width="110"
                  align="center"
                  key="so"
                  :sorter="(a,b)=>a.priority - b.priority"
                >
                  <template slot-scope="t">
                    <span v-if="t==0" style="color: green;">普通</span>
                    <span v-else-if="t==1" style="color: orange;">重要</span>
                    <span v-else-if="t==2" style="color: red;">紧急</span>
                    <span v-else style="color: #999;">无</span>
                  </template>
                </a-table-column>
                <a-table-column
                  title="状态"
                  data-index="isSuspended"
                  :width="100"
                  align="center"
                  key="z"
                  :sorter="(a,b)=>Boolean(a.isSuspended)?0:1 - Boolean(b.isSuspended)?0:1"
                >
                  <template slot-scope="t">
                    <span v-if="!Boolean(t)" style="color: green;">已激活</span>
                    <span v-if="Boolean(t)" style="color: orange;">已挂起</span>
                  </template>
                </a-table-column>
                <a-table-column title="创建时间" data-index="createTime" :width="200" align="center">
                  <template slot-scope="t">
                    <span>{{t}}</span>
                  </template>
                </a-table-column>
                <a-table-column title="操作" data-index align="center" :width="100">
                  <!-- <template slot-scope="t,r,i">
              <a href="javascript:void(0);" @click="detail(r)" style="color: blue">申请详情</a>
              <a-divider type="vertical" />
              <span v-if="Boolean(r.isSuspended)" style="cursor: no-drop;color: #999999;" title="流程已被挂起，无法操作！">
                通过 <a-divider type="vertical" />
                驳回 <a-divider type="vertical" />
                委托 <a-divider type="vertical" />
              </span>
              <span v-else>
                <a href="javascript:void(0);" @click="passTask(r)" style="color: green">通过</a>
                <a-divider type="vertical" />
                <a href="javascript:void(0);" @click="backTask(r)" style="color: orange">驳回</a>
                <a-divider type="vertical" />
                <a href="javascript:void(0);" @click="delegateTask(r)" style="color: #00A0E9">委托</a>
                <a-divider type="vertical" />
              </span>
              <a href="javascript:void(0);" @click="history(r)" style="color: #217dbb">历史</a>
                  </template>-->
                  <template slot-scope="t,r,i">
                    <a href="javascript:void(0);" @click="toDealWith()" style="color: blue">去处理</a>
                  </template>
                </a-table-column>
              </a-table>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
export default {
  name: 'MyToDo',
  data() {
    return {
      data: [], // 表单数据
      total: 0, // 表单数据总数
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      }
    }
  },
  created() {
    this.getDataList()
  },
  computed: {
    scroll: function() {
      var width = window.innerWidth
      //ant-table
      let $antTable = window.document.getElementsByClassName('ant-table')
      if ($antTable[0]) {
        width = $antTable[0].clientWidth
      }
      console.log('$antTable', $antTable)
      return {
        // x:'max-content',
        x: 1160,
        y: window.innerHeight / 2
      }
    },
    innerHeight: function() {
      var innerHeight = window.innerHeight
      return innerHeight
    }
  },
  methods: {
    getDataList() {
      this.loading = true
      this.postFormAction('/actTask/todoList', {}).then(res => {
        this.loading = false
        if (res.success) {
          this.data = res.result || []
          this.total = this.data.leading
        }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      // this.loadData();
    },
    //去处理按钮
    toDealWith() {
      this.$router.push({ path: '/activiti/todoManage' })
    }
  }
}
</script>