<template>
  <section class="approval-manage">
    <ai-list v-if="showList">
      <template slot="title">
        <ai-title title="审批管理" :isShowBottomBorder="false"></ai-title>
      </template>
      <template slot="tabs">
        <el-tabs class="tabs-page" v-model="currIndex">
          <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label" :name="String(i)">
            <component :is="tab.comp" v-if="currIndex==i" :ref="currIndex" :instance="instance" :dict="dict"
                       :permissions="permissions" :listType="tab.value" @goPage="goPage"/>
          </el-tab-pane>
        </el-tabs>
      </template>
    </ai-list>
    <component v-if="!showList" :is="currentPage" :instance="instance" :listType="currentTab.value" :dict="dict"
               :permissions="permissions" :detail="detail" @goBack="goBack"></component>
  </section>
</template>

<script>
import forMyApproval from "./components/forMyApproval";
import approvalDetail from "./components/approvalDetail";

export default {
  name: "AppApprovalManage",
  label: "审批管理(秀山)",
  components: {approvalDetail},
  provide() {
    return {
      approval: this
    }
  },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  data() {
    return {
      currIndex: '0',
      showList: true,
      currentPage: "",
      detail: {},
    }
  },
  computed: {
    tabs() {
      return [
        {
          label: "待我审批", name: "forMyApproval", value: "0", comp: forMyApproval, detail: approvalDetail,
          permission: ""
        },
        {
          label: "我已审批", name: "forMyApproval", value: "1", comp: forMyApproval, detail: approvalDetail,
          permission: ""
        },
        {
          label: "抄送我的", name: "forMyApproval", value: "3", comp: forMyApproval, detail: approvalDetail,
          permission: ""
        },
        {
          label: "超时督办", name: "forMyApproval", value: "4", comp: forMyApproval, detail: approvalDetail,
          permission: ""
        },
        {
          label: "全部审批", name: "forMyApproval", value: "5", comp: forMyApproval, detail: approvalDetail,
          permission: "zwsp_oaapprovalapplyinfo_detail_all"
        },
      ]
    },
    currentTab() {
      return this.tabs[this.currIndex] || {}
    }
  },
  methods: {
    goPage(obj) {
      this.currentPage = this.tabs[Number(this.currIndex)][obj.key];
      obj.row && (this.detail = obj.row)
      this.showList = false;
    },
    goBack() {
      this.showList = true;
      this.$nextTick(() => {
        this.$refs[this.currIndex][0].getList();
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.approval-manage {
  width: 100%;
  height: 100%;
  background-color: #F3F6F9;
}
</style>
