<template>
  <section class="AppFinancingNeeds">
    <ai-list v-if="showList">
      <template slot="title">
        <ai-title slot="title" title="融资需求" :isShowBottomBorder="false" :isShowArea="currIndex == 1 && showList" v-model="areaId" :instance="instance" @change="changeArea"/>
      </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" :areaId="areaId"/>
          </el-tab-pane>
        </el-tabs>
      </template>
    </ai-list>
    <component v-if="!showList" :is="currentPage" :instance="instance" :dict="dict"
               :permissions="permissions" :row="detail" @goBack="goBack"></component>
  </section>
</template>

<script>
import {mapState} from "vuex";
import NeedsDetail from "./needsDetail";
import NeedsList from "./needsList";
import NeedsStatistics from "./needsStatistics";

export default {
  name: "AppFinancingNeeds",
  components: {NeedsList, NeedsDetail},
  label: "融资需求",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  provide() {
    return {
      need: this
    }
  },
  data() {
    return {
      currIndex: '0',
      showList: true,
      currentPage: "",
      detail: {},
      areaId: ''
    }
  },
  computed: {
    ...mapState(['user']),
    tabs() {
      return [
        {
          label: "融资需求", name: "NeedsList", value: "0", comp: NeedsList, detail: NeedsDetail,
          permission: ""
        },
        {
          label: "融资统计", name: "NeedsStatistics", value: "1", comp: NeedsStatistics,
          permission: ""
        }
      ]
    },
    currentTab() {
      return this.tabs[this.currIndex] || {}
    }
  },
  created() {
    console.log(this.user)
    this.dict.load("productRepaymentTimeline", "financialFundPurpose","financingDemandApplyType", "enterpriseType", "dishonestPersonSituation", "administrativeSanctionType")
    this.areaId = this.user.info.areaId || ''
  },
  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].getTableData();
      })
    },
    changeArea() {
      this.$refs[this.currIndex][0].getTableData();
    }
  }
}
</script>

<style lang="scss" scoped>
.AppFinancingNeeds {
  height: 100%;
}
</style>
