<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 = sorter.order == 'ascend' ? 'asc' : 'desc'
            }
            this.ipagination = pagination
            // this.loadData();
        },
        // 去处理按钮
        toDealWith () {
            this.$router.push({ path: '/activiti/todoManage' })
        }
    }
}
</script>
