<template>
  <div class="page">
    <Tabs v-model="tabsValue" @on-click="changeTabs">
      <TabPane v-for="(item, index) in tabsData" :key="index" :label="item.label" :name="item.name"></TabPane>
    </Tabs>
    <search v-model="searchKeyWord"
            cancel-text="确定"
            :auto-fixed="false"
            @on-cancel="searchPassport"
            @on-submit="searchPassport"
    >
    </search>
   <scroller :lockX="true" :use-pulldown="true" :use-pullup="true"
      height="-44"
      :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}"
      :pullup-config="{upContent: '上拉加载更多', downContent: '释放后加载'}"
      @on-pullup-loading="loadMoreData"
      @on-pulldown-loading="refreshData"
      ref="myApplyList">
      <div class="content-area">
        <data-list :listData="listData"></data-list>
        <div class="common-content-no-more-data-tip" v-if="!hasMoreData">{{noMoreDataTips}}</div>
      </div>
    </scroller>
    <loading v-model="loading" text="加载中"></loading>
  </div>
</template>

<script>
import dataList from '../components/dataList'
import{
    getApproveListByLaunchUserId,//获取指定人发起的审批项列表

} from "../service/getData.js"

export default {
    components: {
        "data-list":dataList
    },
    name: 'submitByMy',

    data () {
        return {
          tabsValue: 'name0',
				    tabsData: [
              {label: '待处理', num: 0, name: 'name0' }, 
              { label: '已处理', num: 0, name: 'name1'},
              { label: '抄送我', num: 0, name: 'name2'}
            ],
            searchKeyWord: '',
            pageSize: 10, // 每页数量
            pageIndex: 1, // 页码
            getData:{},
            hasMoreData: true,
            noMoreDataTips: '已无更多数据',
            loading: false,
            qrcodePopup: false,
            currQrcodeValue: '',
            listData:[],//列表数据
        }
    },

  created () {
    this.util.title("流程管理");
	  this.getApproveListByLaunchUserId();
    
  },

  methods: {
    searchPassport () {
	    this.getApproveListByLaunchUserId();
    },
    loadMoreData () {
        var self = this;
        self.pageIndex += 1
        self.getApproveListByLaunchUserId();
        self.donePullup()
    },
    refreshData () {
        var self=this;
        self.pageIndex = 1;
        self.getApproveListByLaunchUserId();
        self.donePulldown()
    },
    donePulldown() {
      this.$refs.myApplyList.donePulldown()
      this.$refs.myApplyList.reset({ top: 0 });
    },

    donePullup() {
      this.$refs.myApplyList.donePullup()
      this.$refs.myApplyList.reset()
    },
     // 获取指定人发起的审批项列表
    getApproveListByLaunchUserId(){
        var self=this;
        var searchForm={
            launchUserId :localStorage.getItem('memberId'),//审批任务的发起人ID
            // launchUserId :"2052392",//审批任务的发起人ID 测试用
            pageIndex :self.pageIndex,
            pageSize:self.pageSize
        }
        if(self.keyword && self.keyword !=""){
            searchForm.keyword=self.keyword
        }
        getApproveListByLaunchUserId(searchForm).then(res=>{
            if(res.status==200){
                self.listData=res.data.records;
                
                
            }else{
                self.$Message.error(res.message)
            }
            
        })
    },


  },

  watch: {
    hasMoreData: function (newVal) {
      if (newVal) {
        this.$refs.myApplyList.enablePullup()
      } else {
        this.$refs.myApplyList.disablePullup()
      }
    },

    searchKeyWord: function (newVal) {
      this.util.debugLog(newVal)
    },
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
}

.content-area {
  width: 100%;
  min-height: calc(100vh - 44px);
}

.popup {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width:100%;
  height:100%;
}

.qr-code-bg {
  background-color: rgba($color: #000000, $alpha: 0.3)
}

.qrcode-btn {
  height: 28px;
  width: 28px;
  margin-right: 10px;
//   background: url('./../../assets/images/DecorationPassport/icon_scan.png') center no-repeat;
  background-size: 100%;
}
</style>
