<template>
  <div class="app-container">
    <el-card>
     <el-card >
 <el-descriptions title="物料基本信息" direction="vertical" :column="8" border>
  <el-descriptions-item label="物料编号">  {{materialdetail.number}}</el-descriptions-item>
  <el-descriptions-item label="物料名称">  {{materialdetail.name}}</el-descriptions-item>
  <el-descriptions-item label="规格型号" :span="2">  {{materialdetail.specification}}</el-descriptions-item>
  <el-descriptions-item label="计量单位">  {{materialdetail.unit}} </el-descriptions-item>
  <el-descriptions-item label="数量"> {{materialdetail.count}}</el-descriptions-item>
</el-descriptions>
   
 
</el-card>
    <el-tabs v-model="activeName" type="card" >
         <el-tab-pane label="对应的批次" name="3">

 <el-table
        v-loading="listLoading"
        :data="InventoryList"
        border
        fit
        stripe
        highlight-current-row
       
      >
        <el-table-column type="index" width="50" />
        <el-table-column label="物料批次">
          <template slot-scope="scope">{{ scope.row.batch }}</template>
        </el-table-column>
        <el-table-column label="物料名称">
          <template slot-scope="scope">{{ scope.row.material_.name }}</template>
        </el-table-column>
           <el-table-column label="规格型号">
          <template slot-scope="scope">{{ scope.row.material_.specification }}</template>
        </el-table-column>
      
        <el-table-column label="物料编号">
          <template slot-scope="scope">{{
            scope.row.material_.number
          }}</template>
        </el-table-column>
        <el-table-column label="仓库名称">
          <template slot-scope="scope">{{
            scope.row.warehouse_.name
          }}</template>
        </el-table-column>
        <el-table-column label="仓库编号">
          <template slot-scope="scope">{{
            scope.row.warehouse_.number
          }}</template>
        </el-table-column>
        <el-table-column label="物料总存量">
          <template slot-scope="scope">{{ scope.row.count }}</template>
        </el-table-column>
      </el-table>

    </el-tab-pane>
  
    <el-tab-pane label="关联的订单" name="1">
 <el-table
        v-loading="listLoading"
        :data="orderlist"
        border
        fit
        stripe
        highlight-current-row
       height="100"
        v-el-height-adaptive-table="{bottomOffset: 50}"
      >
        <el-table-column type="index" width="50" />
        
        <el-table-column label="订单编号"  show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.number }}</template>
        </el-table-column>
         <el-table-column label="客户"  show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.customer_.name }}</template>
        </el-table-column>
          <el-table-column label="所属合同"  show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.contract_.name }}</template>
        </el-table-column>
         <el-table-column label="产品名称"  show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.product_.name }}</template>
        </el-table-column>
          <el-table-column label="产品型号"   show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.product_.specification }}</template>
        </el-table-column>
       <el-table-column label="产品数量"  >
          <template slot-scope="scope">{{ scope.row.count }}</template>
        </el-table-column>
         <el-table-column label="交货日期"   >
          <template slot-scope="scope">{{ scope.row.delivery_date }}</template>
        </el-table-column>
        <el-table-column label="创建时间"   >
          <template slot-scope="scope">{{ scope.row.create_time }}</template>
        </el-table-column>
       
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="关联的计划" name="2">
  <el-table
        :data="productionplanList"
       border
        fit
        stripe
        style="width: 100%"
         height="300"
         
      >
        <el-table-column type="index" width="50" />
        
      
        
         <el-table-column label="任务编号" > 
          <template slot-scope="scope">{{ scope.row.number }}</template>
        </el-table-column>
         <el-table-column label="订单编号" >
          <template slot-scope="scope">{{ scope.row.order_.number }}</template>
        </el-table-column>
         <el-table-column label="合同编号" >
          <template slot-scope="scope">{{ scope.row.order_.contract_.number }}</template>
        </el-table-column>
        
        
         <el-table-column label="生产数量" >
          <template slot-scope="scope">{{ scope.row.count }}</template>
        </el-table-column>
         <el-table-column label="计划开工时间">
          <template slot-scope="scope">{{ scope.row.start_date }}</template>
        </el-table-column>
         <el-table-column label="计划完工时间" > 
          <template slot-scope="scope">{{ scope.row.end_date }}</template>
        </el-table-column>
         <el-table-column label="交付截止时间" >
          <template slot-scope="scope">{{ scope.row.order_.delivery_date }}</template>
        </el-table-column>
        
          <el-table-column label="是否生成子计划" >
          <template slot-scope="scope" >
            <el-tag v-if="scope.row.is_planed==false">否</el-tag>
             <el-tag  v-if="scope.row.is_planed==true">是</el-tag>
            </template>
        </el-table-column>
  <el-table-column label="创建时间">
          <template slot-scope="scope">{{ scope.row.create_time }}</template>
        </el-table-column>
       
      </el-table>
    </el-tab-pane>
 
  </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import checkPermission from "@/utils/permission";
  import vueJsonEditor from "vue-json-editor";
  import {upUrl, upHeaders} from "@/api/file";
 import {getProductionplanList } from "@/api/pm";
  import {getmaterialbatchList} from "@/api/inm";
  import {getOrderList } from "@/api/sam";
  import {getMaterial  } from "@/api/mtm";
  import { upFile } from "@/api/file";
  import {genTree} from "@/utils";
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    components: {Pagination, vueJsonEditor, Treeselect},
    data() {
      return {
       materialdetail:"",
       orderlist:"",
       productionplanList:"",
       InventoryList:"",
       activeName:'3',
      };
    },
    computed: {},
    watch: {},
    created() {
      this.material = this.$route.params.id;
      this.getMaterial();
      this.getOrderList();
      this.getplanList();
      this.getmaterialbatchList();
      
    },
    methods: {
     
getMaterial(){
      getMaterial(this.material).then((response) => {
        if (response.data) {
          this.materialdetail = response.data;//物料基本信息
         
        }
      })
    },
     getOrderList(){
       getOrderList({product:this.material,page:0}).then((response) => {
        if (response.data) {
          this.orderlist = response.data;//物料关联的订单
         
        }
      })
     },
       getplanList() {
      getProductionplanList({product:this.material,page:0}).then((response) => {
        if (response.data) {
          this.productionplanList = response.data;//物料关联计划
        }
      });
    },

     getmaterialbatchList() {
     

      getmaterialbatchList({material:this.material,page:0}).then((response) => {
        if (response.data) {
          this.InventoryList = response.data;
        }
       
      });
    },

    },
  };
</script>
