<template>
  <div class="app-container">
    <el-row>
  <el-col :span="12">
      <el-card  >
     <div slot="header" class="clearfix">
    <span>合同订单列表</span>
  
  </div>
   <el-button type="primary"  @click="handlecount"
        >计算物料</el-button>
         <el-table
        :data="orderList.results"
        ref="multipleTable"
       border
        fit
        stripe
        highlight-current-row
       height="100"
        v-el-height-adaptive-table="{bottomOffset: 50}"
    >
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
        
        
        <el-table-column label="订单编号" width="110">
          <template slot-scope="scope">{{ scope.row.number }}</template>
        </el-table-column>
        
         <el-table-column label="所需产品" show-overflow-tooltip width="150">
          <template slot-scope="scope">{{ scope.row.product_.name }}</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.planed_count }}</template>
        </el-table-column>
       
          <el-table-column label="产品型号">
          <template slot-scope="scope">{{ scope.row.product_.specification }}</template>
        </el-table-column>
         <el-table-column label="客户名称"  show-overflow-tooltip width="150">
          <template slot-scope="scope">{{ scope.row.customer_.name }}</template>
        </el-table-column>
          <el-table-column label="合同编号"  show-overflow-tooltip width="150">
          <template slot-scope="scope">{{ scope.row.contract_.number }}</template>
        </el-table-column>
          <el-table-column label="合同名称"  show-overflow-tooltip width="150">
          <template slot-scope="scope">{{ scope.row.contract_.name }}</template>
        </el-table-column>
         <el-table-column label="交货日期" width="110">
          <template slot-scope="scope">{{ scope.row.delivery_date }}</template>
        </el-table-column>
  <el-table-column label="创建时间" width="110">
          <template slot-scope="scope">{{ scope.row.create_time }}</template>
        </el-table-column>
        <el-table-column label="计划生产数" width="150px" fixed="right">
          <template slot-scope="scope" >
            <el-form :model="scope.row">
              <el-form-item size="mini">
          <el-input-number v-model="scope.row.pgcount" :min="0" :value="0"></el-input-number>
            </el-form-item>
             </el-form>
            </template>
        </el-table-column>
      </el-table>
      
    <pagination
        v-show="orderList.count > 0"
        :total="orderList.count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getorderList"
      />
   
    </el-card>
  </el-col>
  <el-col :span="12">
    <el-row>
      <el-col :span="24">
         <el-card  >
     <div slot="header" class="clearfix">
    <span>物料配置</span>
  
  </div>
         <el-table
        :data="materialpzTable"
       border
        fit
        stripe
        style="width: 100%"
        height="320"
    
      >
        <el-table-column type="index" width="50" />
        
        <el-table-column label="物料名称">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="物料类型">
          <template slot-scope="scope"> {{options_[scope.row.type]}}</template>
        </el-table-column>
          <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.count }}</template>
        </el-table-column>
         <el-table-column label="库存量">
          <template slot-scope="scope">{{ scope.row.inv_count }}</template>
        </el-table-column>
        
      
      </el-table>
   
   
    </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
         <el-card  >
     <div slot="header" class="clearfix">
    <span>设备配置</span>
  
  </div>
         <el-table
        :data="equipmentTable"
       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.name }}</template>
        </el-table-column>
          <el-table-column label="设备状态">
           <template slot-scope="scope"> {{state_[scope.row.state]}}</template>
        </el-table-column>
          <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.model}}</template>
        </el-table-column>
        
         
      </el-table>
    <pagination
        v-show="equipmentTable.count > 0"
        :total="equipmentTable.count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getorderList"
      />
   
    </el-card>
      </el-col>
    </el-row>
    </el-col>
</el-row>
  
  </div>
</template>
  <script>
  import { getordertoplan } from "@/api/sam";
  import { createProductionplan,getProductionplanList,createresource,createequip} from "@/api/pm";
import { getMaterialList } from "@/api/mtm";
import checkPermission from "@/utils/permission";


import { genTree } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
const defaulteorderplan = {
};
export default {
  components: { Pagination },
  data() {
    return {
       
     orderplan: defaulteorderplan,
      orderList: {
        count: 0,
      },
        options_:{
        
        "1":'成品',
        "2":'半成品',
        "3":'主要原料',
        "4":'辅助原料',
         "5":'加工工具',
        "6":'辅助工具',
       
      },
       state_:{
        0:'完好',
        1:'限用',
        2:'在修',
        3:'禁用',
      },
      listQuery: {
        page: 1,
        page_size: 20,
      },
       materialpzTable:"",
      mutipID:[],
      equipmentTable:[],
      listLoading: true,
      dialogVisible: false,
      dialogType: "new",
      rule1: {
        number: [{ required: true, message: "请输入", trigger: "blur" }],
       
      },
    };
  },
  computed: {},
  watch: {},
  created() {
     
    this.getorderList();
    
  },
  methods: {
    checkPermission,
  //订单列表
    getorderList() {
      this.listLoading = true;
      getordertoplan(this.listQuery).then((response) => {
        if (response.data) {
          this.orderList = response.data;
        }
        this.listLoading = false;
      });
    },
    
      //物料计算
  handlecount()
  {
    
     let _this=this
        _this.mutipID=[]
        this.$refs.multipleTable.selection.forEach((item) => {
          _this.mutipID.push({
    "id":item.product_.id,
    "count": item.pgcount
        });
     
      });
    
        createresource(this.mutipID).then((res) => {
              if (res.code >= 200) {
                this.materialpzTable=res.data;
                this.$message.success("物料计算成功");
              }
            });
            createequip(this.mutipID).then((res) => {
              if (res.code >= 200) {
               this.equipmentTable=res.data;
                this.$message.success("成功");
              }
            });
  },
     handleclick(scope){
      this.orderID =  scope.row.id;
     
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["Form"].clearValidate();
      });

    },
    async confirm(form) {
    
       this.orderplan.start_date = this.value1[0];
        this.orderplan.end_date  = this.value1[1];
         this.orderplan.order  = this.orderID
      createProductionplan(this.orderplan).then((res) => {
              if (res.code >= 200) {
                this.getorderList();
                 this.getplanList();
                 this.dialogVisible = false;
                this.$message.success("成功");
              }
            });
    },
  },
};
    
  </script>