<template>
  <!-- 详情 -->
  <div class="height_100">
      <el-container>
        <el-header class="basic_header">
            <el-tabs v-model="activeName" @tab-click="handleClick" type="card"  style="width:100%">
              <el-tab-pane v-for="item in menu" :key='item.path' :label="item.label" :name="item.path"></el-tab-pane>
            </el-tabs>
        </el-header>
        <el-main>
            <component :is='activeName' :id="id" @grandson="handleGrandson" :processId="processId"></component>
        </el-main>
      </el-container>
    </div>
</template>

<script>
import BasicMessage from './basicMessage.vue'
// import ExcavateTaskIndex from '../excavateTask/excavateTask.vue'
import ExcavateTaskIndex from '../excavateTask/index.vue'
import FileMessage from '../fileMessage.vue'
export default {
  components: {
    BasicMessage,
    ExcavateTaskIndex,
    FileMessage,
  },
  data() {
    return {
      activeName: 'basicMessage',
      menu:[
        {
          label:'基本信息',
          path:'basicMessage'
        },
        {
          label:'任务清单',
          path:'ExcavateTaskIndex'
        },
        {
          label:'文件列表',
          path:'FileMessage'
        },
      ],
      processId:null,
    };
  },
  watch: {
  },
  computed: {
    id() {
      return this.$route.query.id
    },
  },
  mounted() {

  },
  methods: {
    // 项目流程孙传祖的值，用于跳转文件列表
    handleGrandson(val) {
      if (val) {
        if (val.type == '任务') {
          this.activeName = 'ExcavateTaskIndex'
        } else {
          this.activeName = 'FileMessage'
        }
        this.processId=val.pathId
      }
    },
    handleClick(tab, event) {
        this.$nextTick(() => {
          this.processId=null
        })
    }
  }
};
</script>

<style lang="scss" scoped>
.basic_header{
  padding: 0 !important;
  width: 100%;
  align-items: end;
  border-bottom:0 ;
}
</style>
<style lang="scss">
  .basic_header{
      .el-tabs__header{
          margin: 0;
      }
  }
</style>