<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-tab-pane
          label="生产详情表"
          name="productionDetail"
          v-if="clientEnvironmentId == 4"
        >
          <productionDetail
            :planId="infoData.productionPlan && infoData.productionPlan.id"
          />
        </el-tab-pane>
        <!-- <el-tab-pane label="生产信息" name="prod"> <prod /></el-tab-pane>
        <el-tab-pane label="甘特图" name="gant">
          <gant />
        </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 productionDetail from './components/detail/productionDetail.vue';
// import prod from './components/detail/prod.vue';
import { getProductPlanDetail } from '@/api/productionPlan/index';
export default {
  components: { plan, material, productionDetail },
  data() {
    return {
      activeName: 'plan',
      infoData: {}
    };
  },
  created() {
    this.getDetail();
  },
  computed: {
    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    }
  },
  methods: {
    async getDetail() {
      const data = await getProductPlanDetail(this.$route.params.id);

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

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