<template>
  <div>
    <el-drawer title="任务及文件信息" :visible.sync="drawer" direction="rtl" :before-close="handleClose" size="1000px">
      <el-container>
        <el-header class="basic_header">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick" 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" :processId="processId"></component>
        </el-main>
      </el-container>
    </el-drawer>
  </div>
</template>

<script>
import ExcavateTaskIndex from '../../excavateTask/index.vue'
import FileMessage from '../../fileMessage.vue'
export default {
  props: ['id'],
  components: {
    ExcavateTaskIndex,
    FileMessage,
  },
  data() {
    return {
      drawer: false,
      activeName: 'ExcavateTaskIndex',
      menu: [
        {
          label: '任务清单',
          path: 'ExcavateTaskIndex'
        },
        {
          label: '文件列表',
          path: 'FileMessage'
        },
      ],
      processId:null,
    }
  },
  mounted() {

  },
  methods: {
    // 打开
    open(data) {
      this.processId=data.pathId
      this.drawer = true
    },
    // 关闭
    handleClose() {
      this.processId = null
      this.activeName = 'ExcavateTaskIndex'
      this.$emit('drawerClose','关闭')
      this.drawer = false
    },
  },
}
</script>

<style lang="scss" scoped></style>