<template>
  <div>
    <a-tabs 
      v-model:activeKey="functionType"
    >
      <!-- 发起申请 -->
      <a-tab-pane key="1" :tab="$t('lang.Approve.initiateApply')">
        <template #tab>
          <span class="tab-label">{{ $t("lang.Approve.initiateApply") }}</span>
        </template>
      </a-tab-pane>

      <!-- 待我审批 -->
      <a-tab-pane key="2">
        <template #tab>
          <a-badge 
            :count="myTaskCount" 
            :number-style="{ 
              boxShadow: '0 0 0 1px #fff',
              backgroundColor: '#999'
            }"
            :offset="[12, -5]"
          >
            <span class="tab-label">{{ $t("lang.Approve.pending") }}</span>
          </a-badge>
        </template>
      </a-tab-pane>

      <!-- 已审批 -->
      <a-tab-pane key="3" :tab="$t('lang.Approve.approved')">
        <template #tab>
          <span class="tab-label">{{ $t("lang.Approve.approved") }}</span>
        </template>
      </a-tab-pane>

      <!-- 我的申请 -->
      <a-tab-pane key="4" :tab="$t('lang.Approve.myApply')">
        <template #tab>
          <span class="tab-label">{{ $t("lang.Approve.myApply") }}</span>
        </template>
      </a-tab-pane>

      <!-- 抄送我的 -->
      <a-tab-pane key="5">
        <template #tab>
          <a-badge 
            :count="copyCount" 
            :number-style="{ 
              boxShadow: '0 0 0 1px #fff',
              backgroundColor: '#999'
            }"
            :offset="[12, -5]"
          >
            <span class="tab-label">{{ $t("lang.Approve.ccMy") }}</span>
          </a-badge>
        </template>
      </a-tab-pane>

      <!-- 已驳回 -->
      <a-tab-pane key="6" :tab="$t('lang.Approve.rejected')">
        <template #tab>
          <span class="tab-label">{{ $t("lang.Approve.rejected") }}</span>
        </template>
      </a-tab-pane>
    </a-tabs>

    <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>