<template>
  <div class="app-container">
  
    <el-card style="margin-top: 2px">
      <el-descriptions title="基本信息"  :column="4"  border>
  <el-descriptions-item label="订单编号">  {{orderdetail.number}}</el-descriptions-item>
  <el-descriptions-item label="产品名称" >  {{orderdetail.product_.name}}</el-descriptions-item>
  <el-descriptions-item label="产品型号"  >  {{orderdetail.product_.specification}}</el-descriptions-item>
  <el-descriptions-item label="产品数量" >  {{orderdetail.count}} </el-descriptions-item>
 <el-descriptions-item label="已交货数量" > {{orderdetail.delivered_count}}</el-descriptions-item>
  <el-descriptions-item label="已排产数量">  {{orderdetail.planed_count}}</el-descriptions-item>
  <el-descriptions-item label="交货日期" >  {{orderdetail.delivery_date}}</el-descriptions-item>


</el-descriptions>
 </el-card>
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>关联生产任务</span>
  </div>
 <el-table
        :data="productionplan"
       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_.contract_.number }}</template>
        </el-table-column>
        
         <el-table-column label="产品名称" width="150" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.product_.name }}</template>
        </el-table-column>
       <el-table-column label="产品型号" >
          <template slot-scope="scope">{{ scope.row.product_.specification }}</template>
        </el-table-column>
         <el-table-column label="产品单位">
          <template slot-scope="scope">{{ scope.row.product_.unit }}</template>
        </el-table-column>
         <el-table-column label="生产数量" >
          <template slot-scope="scope">{{ scope.row.count }}</template>
        </el-table-column>
         <el-table-column label="状态" width="110">
          <template slot-scope="scope">{{ state_[scope.row.state] }}</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" >
            <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="创建时间" width="160">
          <template slot-scope="scope">{{ scope.row.create_time }}</template>
        </el-table-column>
      
      </el-table>
</el-card>
  </div>
</template>
<script>
import {getOrder} from "@/api/sam";
import {getProductionplanList} from "@/api/pm";

import checkPermission from "@/utils/permission";


import { genTree } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  components: { Pagination },
  data() {
    return {
   
     productionplan:"",
     orderdetail:"",
      state_: {
          10: "制定中",
          20: "已下达",
          30: "已接受",
          40: "生产中",
          50: "已完成",
          60: "军检完成",
          70: "暂停",
          80: "终止",
        },
   
    };
  },
  computed: {},
  watch: {},
  created() {
     this.id = this.$route.params.id; 
    this.getdetail();
    this.getList();


  },
  methods: {
    checkPermission,
     getList() {
     getProductionplanList({order:this.id,page:0}).then((response) => {
        if (response.data) {
          this.productionplan = response.data;
        }
        
      })
    },
    //详情
    getdetail() {
     
      getOrder(this.id).then((response) => {
        if (response.data) {
          this.orderdetail = response.data;
        }
      
      })
    },
   
   
  },
};
</script>
