<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="page-title">
        <el-page-header @back="$router.go(-1)" content="计划详情">
        </el-page-header>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="计划信息" name="plan">
          <plan :infoData="infoData" />
        </el-tab-pane>
        <el-tab-pane label="物料信息表" name="material">
          <material
            :planId="infoData.productionPlan && infoData.productionPlan.id"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import plan from './components/detail/plan.vue';
  import material from './components/detail/material.vue';
  import { getPlanInfoById } from '@/api/materialPlan/index';
  export default {
    components: { plan, material },
    data() {
      return {
        activeName: 'plan',
        infoData: {}
      };
    },
    created() {
      this.getDetail();
    },
    methods: {
      async getDetail() {
        const data = await getPlanInfoById(this.$route.params.id);

        this.infoData = data;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .pane-box {
    padding: 20px 0;
  }
</style>
