<template>
  <div class="app-container" v-loading="loading">
    <el-tabs :tab-position="tabPosition" stretch v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="企业自填" name="1">
        <el-tabs type="border-card" v-if="entVisible">
          <el-tab-pane label="项目基本信息">
            <ent-basic></ent-basic>
          </el-tab-pane>
          <el-tab-pane label="资料附件">
            <ent-enclosure></ent-enclosure>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="企业技术" name="2">
        <el-tabs type="border-card" v-if="techVisible">
          <el-tab-pane label="项目基本信息">
            <tech-basic></tech-basic>
          </el-tab-pane>
          <el-tab-pane label="资料附件">
            <tech-enclosure></tech-enclosure>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="企业财务" name="3">
        <el-tabs type="border-card" v-if="finVisible">
          <el-tab-pane label="项目基本信息">
            <fin-basic></fin-basic>
          </el-tab-pane>
          <el-tab-pane label="资料附件">
            <fin-enclosure></fin-enclosure>
          </el-tab-pane>
          <el-tab-pane label="财务资料附件">
            <fin-data-enclosure></fin-data-enclosure>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import EntBasic from './components/EntBasic'
import TechBasic from './components/TechBasic'
import FinBasic from './components/FinBasic'
import {getProjectInfoApi} from '@/api/enterprise/project/project'
import EntEnclosure from './components/EntEnclosure'
import FinEnclosure from './components/FinEnclosure'
import TechEnclosure from './components/TechEnclosure'
import FinDataEnclosure from './components/FinDataEnclosure'

import first from './edit/first'
import second from './edit/second'
import third from './edit/third'
export default {
  name: "First",
  computed: {
    userType() {
      return this.$store.state.user.userType
    },
  },
  components: {
    EntBasic,
    TechBasic,
    FinBasic,
    EntEnclosure,
    FinEnclosure,
    TechEnclosure,
    FinDataEnclosure,
    first,
    second,
    third
  },
  data() {
    return {
      tabPosition: 'left',
      activeName: '1',
      loading: false,
      id: undefined,
      entVisible: true,
      finVisible: false,
      techVisible: false
    };
  },
  created() {
    this.id = this.$route.query.id || undefined;
  },
  methods: {
    getEntData() {
      listEntUserApi().then(res => {
        this.form.entName = res.data.entName
      })
    },
    handleClick(tab,event) {
      if(tab.name == '1') {
        this.entVisible = true
        this.techVisible = false
        this.finVisible = false
      }else if(tab.name == '2') {
        this.techVisible = true
        this.entVisible = false
        this.finVisible = false
      }else if(tab.name == '3') {
        this.finVisible = true
        this.entVisible = false
        this.techVisible = false
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
  .el-tabs__nav {
    width: 96px
  }
</style>
