<template>
  <el-card >
  <div slot="header" class="clearfix">
    <span>我的事项</span>
    <el-button style="float: right; padding: 3px 0;color: #202020;" type="text" @click="more">更多</el-button>
  </div>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="待办事项" name="first">
      <el-table :data="toListItem" style="width: 100%;" :header-cell-style="{background:'#eee',width:'100%'}">
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="fwtitle" label="标题"  align="left" >
          <template slot-scope="scope">
            <el-button type="text" @click="detern(scope.row)" style="color: black">{{scope.row.fwtitle}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="接收时间" width="180" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | format('yyyy-MM-dd hh:mm')}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="我的申请" name="second">
      <el-table :data="myApplication" style="width: 100%;" :header-cell-style="{background:'#eee',width:'100%'}">
             <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
             <el-table-column prop="fwtitle" label="标题"  align="left" >
               <template slot-scope="scope">
                 <el-button type="text" @click="myAppReturn(scope.row)" style="color: black">{{scope.row.fwtitle}}</el-button>
               </template>
             </el-table-column>
             <el-table-column prop="createTime" label="创建时间" width="180" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.createTime | format('yyyy-MM-dd hh:mm')}}</span>
                </template>
             </el-table-column>
      </el-table>
    </el-tab-pane>

  </el-tabs>
  </el-card>
</template>

<script>
  import { listInfo} from '@/api/system/meapply/meapply'
  import {toDoItemListInfo} from "@/api/activiti/form/fw";
  export default {
    data() {
      return {
        activeName: 'first',
        myApplication: [],
        toListItem: [],
        //参数
        lineParams: {
          pageNum: 1,
          pageSize: 5,
          orderByColumn: "createTime",
          isAsc:"desc",//排序方式
        },
      }
    },
    created() {
      this.getList();
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getList() {
        this.loading = true;
        //我的申请
        listInfo(this.lineParams).then(response => {
          this.myApplication = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        //待办请求
        toDoItemListInfo(this.queryParams).then(response => {
          this.toListItem = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      detern(row){
        const actkey = row.actkey
        const form = row || this.form
        this.$router.push({path:'/actwork/todo/tododetails',query: {bd:form,id:actkey }})
      },
      myAppReturn(row){
        const actkey = row.actkey
        const form = row || this.form
        this.$router.push({path:'/actwork/havedone/havedetails',query: {bd:form,id:actkey }})
      },
      more(){
        if(this.activeName=='first'){
          this.$router.replace('/meapply')
        }else {
          this.$router.replace('/todo')
        }

      },
    }
  };
</script>

<style lang="less" scoped>
  .clearfix{
    color:#1890ff;
  }
  body .el-table th.gutter{
    display: table-cell!important;
  }

  .el-table__header{
    width: 100% !important;
  }
  .el-table__thead{
    width: 100% !important;
  }
  .el-table__body{
    width: 100% !important;
  }

  /*.clearfix:before,*/
  /*.clearfix:after {*/
    /*display: table;*/
    /*content: "";*/
  /*}*/
  /*.clearfix:after {*/
    /*clear: both*/
  /*}*/
  .el-card__header{
    background: #f5f5f5;
    color:#1890ff;
  }
  .el-card__body {
    padding: 15px 20px 20px 20px;
    height: 354px;
  }
 .el-card__header{
   background: #f5f5f5;
 }
</style>
