<template>
  <div class="app-container" v-loading="loading">
    <el-tabs :tab-position="tabPosition" stretch ref="tabsFirst" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="企业自填" name="1">
        <el-tabs type="border-card" v-if="entVisible">
          <el-tab-pane label="项目基本信息">
            <basic-info :projectOwner="'1'"></basic-info>
          </el-tab-pane>
          <el-tab-pane label="资料附件">
            <enclosure-info :projectOwner="'1'"></enclosure-info>
          </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="项目基本信息">
              <basic-info :projectOwner="'2'"></basic-info>
            </el-tab-pane>
            <el-tab-pane label="资料附件">
              <enclosure-info :projectOwner="'2'"></enclosure-info>
            </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="项目基本信息">
              <basic-info :projectOwner="'3'"></basic-info>
            </el-tab-pane>
            <el-tab-pane label="资料附件">
              <enclosure-info :projectOwner="'3'"></enclosure-info>
            </el-tab-pane>
            <el-tab-pane label="财务资料附件">
              <enclosure-info :projectOwner="'3'" :finOwner="'fin'"></enclosure-info>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>

import BasicInfo from './components/BasicInfo'
import EnclosureInfo from './components/EnclosureInfo'
export default {
  name: "First",
  computed: {
    userType() {
      return this.$store.state.user.userType
    },
  },
  components: {
    BasicInfo,
    EnclosureInfo
  },
  data() {
    return {
      activeName: '1',
      tabPosition: 'left',
      loading: false,
      entVisible: true,
      finVisible: false,
      techVisible: false
    };
  },
  created() {
  },
  methods: {
    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>
