<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: ""
          },
        ]
      },
      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>
