<template>
  <div>
    <ul class="nav nav-tabs m-row ul-box">
      <li
        role="presentation"
        :class="{'active': functionType==1}"
        @click="selectPage(1)"
      >
        <a>{{ $t("lang.Approve.initiateApply") }}</a>
      </li>
      <li
        role="presentation"
        :class="{'active': functionType==2}"
        @click="selectPage(2)"
      >
        <a>{{ $t("lang.Approve.pending") }}<span class="badge">{{ myTaskCount }}</span></a>
      </li>
      <li
        role="presentation"
        :class="{'active': functionType==3}"
        @click="selectPage(3)"
      >
        <a>{{ $t("lang.Approve.approved") }}</a>
      </li>
      <li
        role="presentation"
        :class="{'active': functionType==4}"
        @click="selectPage(4)"
      >
        <a>{{ $t("lang.Approve.myApply") }}</a>
      </li>
      <li
        role="presentation"
        :class="{'active': functionType==5}"
        @click="selectPage(5)"
      >
        <a>{{ $t("lang.Approve.ccMy") }}
          <span class="badge">{{ copyCount }}</span></a>
      </li>
      <li
        role="presentation"
        :class="{'active': functionType==6}"
        @click="selectPage(6)"
      >
        <a>{{ $t("lang.Approve.rejected") }}</a>
      </li>
    </ul>

    <div v-if="functionType==1">
      <CreateWorkflow />
    </div>
    <div v-if="functionType==2">
      <NeedApproveWorkflow @refresh-stastic-count="getStasticCount" />
    </div>
    <div v-if="functionType==3">
      <ApprovedWorkflow @refresh-stastic-count="getStasticCount" />
    </div>
    <div v-if="functionType==4">
      <MyApplyWorkflow />
    </div>
    <div v-if="functionType==5">
      <CopyTaskWorkflow @refresh-stastic-count="getStasticCount" />
    </div>
    <div v-if="functionType==6">
      <NotApproveWorkflow @refresh-stastic-count="getStasticCount" />
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../common/Common.js';
import CreateWorkflow from '../workflow/CreateWorkflow.vue';
import NeedApproveWorkflow from '../workflow/NeedApproveWorkflow.vue';
import NotApproveWorkflow from '../workflow/NotApproveWorkflow.vue';
import ApprovedWorkflow from '../workflow/ApprovedWorkflow.vue';
import MyApplyWorkflow from '../workflow/MyApplyWorkflow.vue';
import CopyTaskWorkflow from '../workflow/CopyTaskWorkflow.vue';


export default {
  components: {
    CreateWorkflow,
    NeedApproveWorkflow,
    ApprovedWorkflow,
    MyApplyWorkflow,
    CopyTaskWorkflow,
    NotApproveWorkflow,
  },
  data: function () {
    return {
      'pageNo': '1',
      'copyCount': 0,
      'myTaskCount': 0,
      'functionType': '',
      loading: false,
    };
  },

  // watch: {
  //   $route: function () {
  //     var functionType = this.$route.query.functionType;
  //     if (functionType) {
  //       this.functionType = functionType;
  //     }
  //     this.initQueryParamter();
  //   },
  // },

  mounted: function () {
    var _self = this;

    _self.init();

    _self.getStasticCount();

    _self.stasticTimer = setInterval(function () {
      _self.getStasticCount();
    }, 60 * 1000);

    var functionType = _self.$route.query.functionType;
    if (functionType) {
      _self.functionType = functionType;
    }
    _self.initQueryParamter();
  },


  beforeUnmount: function () {
    var _self = this;
    clearInterval(_self.stasticTimer);
  },
  methods: {
    init: function () {
      var _self = this;
      $('#btn-group :button').click(function () {
        $('#btn-group :button').removeClass('active');
        $(this).addClass('active');
      });
    },

    selectPage: function (pageNo) {
      var _self = this;
      _self.pageNo = pageNo;       //发起审批 
      _self.functionType = pageNo;
      _self.initQueryParamter();
    },

    /**
         * 获取工作流统计数据
         */
    getStasticCount: function () {
      var _self = this;
      _self.loading=true;
      $.ajax({
        url: Common.getApiURL('WorkflowResource/StasticCount'),
        type: 'get',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.loading=false;
          _self.copyCount = data.viewerCount;
          _self.myTaskCount = data.taskNeedApproveCount;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },


    initQueryParamter: function () {
      var _self = this;
      var url = window.location.href;
      var index = url.lastIndexOf('?');
      if (index > 0) {
        url = url.substring(0, index);
      }
      url = url + '?functionType=' + _self.functionType;
      // window.location.href = url;
      this.$router.push('/desktop/approve?functionType=' + _self.functionType);
    },

  },
};
</script>
<style scoped>
.ul-box{
  cursor: pointer;
}
</style>