<template>
  <div class="page">
    <!-- <Tabs v-model="tabsValue" @on-click="changeTabs">
      <TabPane v-for="(item, index) in tabsData" :key="index" :label="item.label+'('+item.num+')'" :name="item.name"></TabPane>
    </Tabs>
    <tab custom-bar-width="50px" :scroll-threshold="3">
      <tab-item :selected="tabsValue=='name'+index"  v-for="(item, index) in tabsData" :key="index" @on-item-click="changeTabs">
        {{item.label}}
        <span v-show="item.num!==''">({{item.num}})</span>
    </tab-item>
    
    </tab> -->
    <van-tabs line-width="40" title-active-color="#2d8cf0" color="#2d8cf0" :ellipsis="false" v-model="tabsValue" @click="changeTabs">
      <van-tab v-for="(item, index) in tabsData" :key="index">
        <div slot="title">
           {{item.label}}
            <span v-show="item.num!==''">({{item.num}})</span>
        </div>
      </van-tab>
    </van-tabs>
    <div class="time-range">
      <div class="center">
        <!-- <p class="shiduan"> -->
          <span style="text-align: center;display:block;font-size: 14px;">申请时间:</span>
          
        <!-- </p> -->
      </div>
      <div class="shijian">
        <div class="left">
          <group class="weui-cells vux-no-group-title weui-cell__ft weui-cell_access  ">
            <datetime
              clear-text="请选择开始时间"
              v-model="tjTimeStart"
              format="YYYY-MM-DD"
              @on-cancel="cancel"
              @on-confirm="onConfirmDateStart"
              @on-hide=""
              ></datetime>
          </group>
        </div>
        
        <div class="right">
          <group class="weui-cells vux-no-group-title weui-cell__ft weui-cell_access">
            <datetime
              clear-text="请选择结束时间"
              v-model="tjTimeEnd"
              format="YYYY-MM-DD"
              @on-cancel="cancel"
              @on-confirm="onConfirmDateEnd"
              @on-hide=""
              ></datetime>
          </group>
        </div>
    </div>
  </div>
    <van-search
      v-model="searchKeyWord"
      placeholder="请输入关键词"
      show-action
      @search="searchPassport"
      @clear="cancelSearch"
    >
      <div slot="action" @click="searchPassport">搜索</div>
    </van-search>
    <div class="list-wrap">
      <!-- <scroller v-model="scrollerStatus" :lockX="true" :use-pulldown="true" :use-pullup="true" height="100%" :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新',loadingContent:'加载中'}" :pullup-config="{upContent: ' ',content:' ', downContent: ' ',  loadingContent:'加载中 '}" @on-pullup-loading="loadMoreData" @on-pulldown-loading="refreshData" ref="myApplyList">
        <div class="content-area" style="width:100%;">
          <data-list :listData="listData" :state="state"></data-list>
          <div class="common-content-no-more-data-tip" v-if="hasMoreData">{{noMoreDataTips}}</div>
        </div>
      </scroller> -->
      <!-- <van-pull-refresh pulling-text="下拉刷新"  v-model="refreshLoading" @refresh="refreshData">
      <van-list
        v-model="loading"
        :finished="hasMoreData"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="loadMoreData"
      >
          <data-list :listData="listData" :state="state"></data-list>
      </van-list>
      </van-pull-refresh> -->
      <vue-better-scroll  ref="scroll"
      @pulling-down="refreshData"
      @pulling-up="loadMoreData"
      :pullDownRefresh="pullDownRefreshObj"
      :pullUpLoad="pullUpLoadObj"
      >
          <data-list :listData="listData" :state="state"></data-list>
          <div class="nodata" v-if="showNodata">暂无数据</div>
      </vue-better-scroll>

    </div>
  </div>
</template>
<script>
  // localStorage.setItem('memberId','2052615'); //2052616  2052615
  // localStorage.setItem('userAccount','crmtest01');
  // localStorage.setItem('userName','crmtest01');
  // localStorage.setItem('companyId','234');
  
  // localStorage.setItem('memberId','2052392');
  // localStorage.setItem('userAccount','金茂物业管理员');
  // localStorage.setItem('userName','金茂物业管理员');
import Vue from 'vue';
import moment from 'moment';
import { Search } from 'vant';

Vue.use(Search);
import { Tab, TabItem,Datetime, Group,Flexbox, FlexboxItem, Divider,XInput } from 'vux'

import dataList from '../components/dataList'
import {
  getApproveListByAuditUserId, //获取指定人可以审批的审批项列表
  getApproveDetailById, //根据审批项ID获取详情
  getApproveListByCopyUserId, //获取抄送我的审批项列表
  getApproveComment,
  listFormFeeItem,
  getApproveListByLaunchUserId,
  getApproveListByAuditUserIdCount
} from "../service/getData.js"

export default {
  components: {
    "data-list": dataList,
    Tab,
    TabItem,
    Datetime,
    Group,
    Flexbox,
    FlexboxItem,
    XInput,
    Divider
  },
  name: 'submitByMy',

  data() {
    return {
      showNodata:false,
      refreshLoading:false,
      scrollerStatus: {
          pullupStatus: 'default'
      },
      dataListHeight: '', //列表数据的高度
      searchKeyWord: '',
      pageSize: 20, // 每页数量
      pageIndex: 1, // 页码
      hasMoreData: false,
      noMoreDataTips: '已无更多数据',
      loading: false,
      qrcodePopup: false,
      currQrcodeValue: '',
      listData: [], //列表数据
      tabsValue: 0,
      tabsData: [
        /*{ label: '待处理', num: '', name: 'name0' },
        { label: '已处理', num: '', name: 'name1' },
        { label: '抄送我', num: '', name: 'name2' },
        { label: '我发起的', num: '', name: 'name3' },*/
      ],
      state: '',
      date:'',
      dateStart:'',
      dateEnd:'',
      totalPages: -1,
      scrollbarObj: {
                fade: true
              },
       pullDownRefreshObj: {
                 threshold: 90,
                 stop: 40
               },
               pullUpLoadObj: {
                 threshold: 0,
                 txt: {
                   more: '加载更多...',
                   noMore: '没有更多数据了'
                 }
               },
               tjTimeEnd:'',
               tjTimeStart:''

    }
  },

  created() {
    this.getDate()
    this.util.title("流程管理");
    this.getApproveListByAuditUserIdCount();
    this.getData("0");
    this.$vux.loading.show({
      text:'正在加载中'
    })
    /*this.$nextTick(() => {
        this.$refs.myApplyList.reset()
    })*/
    // this.dataListHeight = (window.innerHeight - 70) + 'px';
  },

  methods: {
    getDate(){
        this.tjTimeEnd = moment(new Date()).format("YYYY-MM-DD");
        this.tjTimeStart = moment(new Date())
      .subtract(2, "months")
      .format("YYYY-MM-DD");
    },
    onConfirmDateStart(val){
      this.tjTimeStart = val
    },
    onConfirmDateEnd(val){
      this.tjTimeEnd = val
    },
    cancel(){},
    getApproveListByAuditUserIdCount(){
      getApproveListByAuditUserIdCount({
        approveUserId:localStorage.getItem('memberId'),
        tjTimeStart:this.tjTimeStart,
        tjTimeEnd:this.tjTimeEnd,
        timeConditionType: 4
      }).then(res => {
        if(res.status == 200){
          let data = res.data[0] || {};
          // this.$set(this.tabsData[0],'num',data.notDoneCount);
          this.tabsData = [
            { label: '待处理', num: data.notDoneCount, name: 'name0' },
            { label: '已处理', num: '', name: 'name1' },
            { label: '抄送我', num: '', name: 'name2' },
            { label: '我发起的', num: '', name: 'name3' },
          ]
        }else{
          this.tabsData = [
            { label: '待处理', num: '', name: 'name0' },
            { label: '已处理', num: '', name: 'name1' },
            { label: '抄送我', num: '', name: 'name2' },
            { label: '我发起的', num: '', name: 'name3' },
          ]
        }
      }).catch(()=>{
        this.tabsData = [
            { label: '待处理', num:'', name: 'name0' },
            { label: '已处理', num: '', name: 'name1' },
            { label: '抄送我', num: '', name: 'name2' },
            { label: '我发起的', num: '', name: 'name3' }
          ]
      })
    },
    cancelSearch() {
      this.searchKeyWord = '';
      this.changeTabs();
    },
    searchPassport() {
      this.changeTabs();
    },
    changeTabs(tabIndex) { //切换tab列表
      var self = this;
      self.pageIndex = 1;
      self.listData = [];
      this.$vux.loading.show({
          text:'正在加载中'
      }
      )
      self.hasMoreData = false;
      /*if(tabIndex !==undefined){
        self.tabsValue = tabIndex;
      }*/
      this.showNodata = false;
      this.$refs.scroll.scrollTo(0, 0);
      switch (self.tabsValue) {
        case 0: //待处理
          self.state = '';
          self.getData("0");
          break;
        case 1: //已处理
          self.state = '0';
          self.getData("1");
          break;
        case 2: //抄送我
          self.state = '1';
          self.getApproveListByCopyUserId()
          break;
        case 3: //我发起的
          self.state = '2';
          self.getApproveListByLaunchUserId()
          break;
        default:
          break;
      }
    },
    loadMoreData() {
      var self = this;
      self.pageIndex += 1;
      this.showNodata = false;
      switch (self.tabsValue) {
        case 0: //待处理
          self.getData("0");
          break;
        case 1: //已处理
          self.getData("1");
          break;
        case 2: //抄送我
          self.getApproveListByCopyUserId()
          break;
        case 3: //我发起的
          self.getApproveListByLaunchUserId()
          break;
        default:
          break;
      }
    },
    refreshData() {
      var self = this;
      self.pageIndex = 1;
      self.listData = [];
      self.hasMoreData = false;
      switch (self.tabsValue) {
        case 0: //待处理
          self.getData("0",true);
          break;
        case 1: //已处理
          self.getData("1",true);
          break;
        case 2: //抄送我
          self.getApproveListByCopyUserId()
          break;
        case 3: //我发起的
          self.getApproveListByLaunchUserId()
          break;
        default:
          break;
      }
    },
    /*donePulldown() {
      this.$refs.myApplyList.donePulldown()
      this.$refs.myApplyList.reset();
    },

    donePullup() {
      this.$refs.myApplyList.donePullup()
      this.$refs.myApplyList.reset()
    },*/
    //  获取指定人可以审批的审批项列表
    getData(doneOrNotDone,isRefresh) {
      var self = this;
      // if (self.totalPages != -1 && self.totalPages < self.pageIndex) {
      //   return;
      // }
      // self.hasMoreData = false
      if(self.hasMoreData) return;
      var searchForm = {
        approveUserId :localStorage.getItem('memberId'),//审批任务的代办人ID
        doneOrNotDone: doneOrNotDone, // 代办or已办(0:代办;1：已办;)
        pageIndex: self.pageIndex,
        pageSize: self.pageSize,
        tjTimeStart:this.tjTimeStart,
        tjTimeEnd:this.tjTimeEnd,
        timeConditionType: 4
      }
      searchForm.keyword = self.searchKeyWord;
      self.loading = true;
      getApproveListByAuditUserId(searchForm).then(res => {
        self.$vux.loading.hide()
        if (res.status == 200) {
          self.loading = false;
          self.listData = self.listData.concat(res.data.records);
          self.totalPages = res.data.pages;
          self.state = doneOrNotDone;
          if(self.totalPages <= self.pageIndex){
            self.hasMoreData = true;
            self.$refs.scroll.forceUpdate(false)
            if(!self.listData.length){
              self.showNodata = true;
            }
          }else{
             self.$refs.scroll.forceUpdate(true)
          }
          //doneOrNotDone==2不可以进行操作
          /* if (self.pageIndex == 1) {
            self.refreshLoading = false;
            self.$refs.scroll.forceUpdate(false)
          } else {

          } */

        } else {
          self.loading = false;
          self.refreshLoading = false;
          self.$Message.error(res.message)
        }

      })
    },


    // 获取抄送我的审批项列表
    getApproveListByCopyUserId(isRefresh) {
      var self = this;
      if(self.hasMoreData) {
        return;
      }
      var searchForm = {
        //copyUserId  :localStorage.user_id,//抄送人ID
        copyUserId:localStorage.getItem('memberId'),
        // copyUserId: "2052392", //抄送人ID 测试用
        pageIndex: self.pageIndex,
        pageSize: self.pageSize,
        tjTimeStart:this.tjTimeStart,
        tjTimeEnd:this.tjTimeEnd,
        timeConditionType: 4
      }
      searchForm.keyword = self.searchKeyWord;
      self.loading = true;

      getApproveListByCopyUserId(searchForm).then(res => {
        self.$vux.loading.hide()
        if (res.status == 200) {
          self.listData = self.listData.concat(res.data.records);
          self.loading = false;
          self.totalPages = res.data.pages;
          if(self.totalPages <= self.pageIndex){
            self.hasMoreData = true;
            self.$refs.scroll.forceUpdate(false)
            if(!self.listData.length){
              self.showNodata = true;
            }
          }else{
             self.$refs.scroll.forceUpdate(true)
          }
          /* if (self.pageIndex == 1) {
            self.refreshLoading = false;
            self.$refs.scroll.forceUpdate(true)
          } else {

          } */
        } else {
          self.loading = false;
          self.refreshLoading = false;
          self.$Message.error(res.message)
        }
      })
    },


    getApproveListByLaunchUserId(isRefresh) {
      var self = this;
      if(self.hasMoreData) return;
      var searchForm = {
        launchUserId :localStorage.getItem('memberId'),//审批任务的发起人ID
        // launchUserId: "2052392", //审批任务的发起人ID 测试用
        pageIndex: self.pageIndex,
        pageSize: self.pageSize,
        tjTimeStart:this.tjTimeStart,
        tjTimeEnd:this.tjTimeEnd,
        timeConditionType: 4
      }
      searchForm.keyword = self.searchKeyWord
      self.loading = true;
      getApproveListByLaunchUserId(searchForm).then(res => {
        self.$vux.loading.hide()
        if (res.status == 200) {
          self.listData = self.listData.concat(res.data.records);
          self.loading = false;
          self.totalPages = res.data.pages;
          if(self.totalPages <= self.pageIndex){
            self.hasMoreData = true;
            self.$refs.scroll.forceUpdate(false)
            if(!self.listData.length){
              self.showNodata = true;
            }
          }else{
            self.$refs.scroll.forceUpdate(true)
          }
          /* if (self.pageIndex == 1) {
            this.refreshLoading = false;
            self.$refs.scroll.forceUpdate(true)
          } else {

          } */
        } else {
          this.loading = false
          this.refreshLoading = false
          self.$Message.error(res.message)
        }
      })
    },

  },

  watch: {
    searchKeyWord: function(newVal) {
      this.util.debugLog(newVal)
    },
  },
  beforeDestroy() {
    try {
      EbeiPlugins.setBackButtonAction('');
    } catch (e) {

    }
  },
}

</script>
<style lang="less" scoped>
@import url('~@/assets/css/1px.less');
.page {
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
}

.page /deep/ .ivu-tabs-bar {
  border-bottom: 0px solid #dcdee2;
  margin-bottom: 0px
}
/deep/ .van-search__action{
  padding:0 12px;
}
.time-range{
  padding: 5px;
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  background-color: white;
  // height: 44px;
  overflow: hidden;
  .vux-1px-b;
}
.center{
  // height: 44px;
  display: flex;
  background-color: white;
  width: 80px;
  align-content:center;
  justify-content: center ;
  align-items:center;
  
}
.shijian{
  width: 100%;
  display:flex !important;
  flex-direction:row !important;
  justify-content:space-between !important;

}
.shijian > div{
  flex:1;
}
.shijian > div.left{
  border-right: solid 1px #eee;
}
/deep/ .weui-cell__ft{
  text-align: left;
}
.shijian /deep/ .weui-cells{
  font-size: 13px;
}
.shijian /deep/ .vux-cell-value{
  font-size: 13px;
}
/deep/ .weui-cell__ft:after{
  display:none !important;
}
/deep/ .weui-cells:before{
  display:none !important;
}
.shijian /deep/ .weui-cells:after{
  display:none !important;
}


.list-wrap {
  // height: calc(~"100% - 88px");
  position: absolute;
  width: 100%;
  top:146px;
  bottom:0;
  overflow: hidden;
}
/deep/ .weui-cells{
  margin-top:0;
}
/deep/ .weui-cell__ft:after{
  display:none !important;
}
/deep/ .weui-cell_access{
  /* height: 0;
  width: 0;
  border-color:white; */
}
.shiduan{
  /* display:inline-block; */
  font-size:14px;
  width: 100%;
  height: 100%;
  display: flex;
  align-content:center;
  
  align-items:center;
  text-align: center;
}
.content-area{
  display: flex;
  flex-direction: column;
}
.common-content-no-more-data-tip{
  text-align: center;
  padding: 10px;
}
/* /deep/ .van-pull-refresh,/deep/ .van-pull-refresh__track {
    height: calc(~"100vh - 95px");
} */
/deep/ .van-pull-refresh__track {
    min-height: calc(~"100vh - 110px");
}
/deep/ .van-pull-refresh__head .van-loading{
  display: none;
}
.nodata{
  padding: 20px;
  text-align: center;
}
</style>
