<template>
  <div class="app-container">
<el-row :gutter="24">
  <el-col :span="6" >
 <el-card >
    <div slot="header" class="clearfix">
    <span style="font-size: 16px;
    font-weight: 700;
">产品列表</span>
     </div>
      <el-table
        v-loading="listLoading"
        :data="materialList.results"
        border
        fit
        stripe
        highlight-current-row
        height="100"
        v-el-height-adaptive-table="{bottomOffset: 50}"
     @current-change="handleCurrentChange">
   
        <el-table-column type="index" width="50" />
         <el-table-column label="产品信息">
          <template slot-scope="scope">{{ scope.row.number }}-{{ scope.row.name }}</template>
       
        
        </el-table-column>

     
      </el-table>
    
    </el-card>

  </el-col>
  <el-col :span="18" >
 <el-card class="box-card">
 
      <el-descriptions class="margin-top" title="产品信息" :column="3"  border>
   
   
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        产品名称
      </template>
     {{products.name}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        产品编号
      </template>
      {{products.number}}
    </el-descriptions-item>
  
  </el-descriptions>
 
</el-card>
<el-card class="box-card">
       <div slot="header" class="clearfix">
    <span style="font-size: 16px;
    font-weight: 700;
">工艺流程</span>
     </div>
 <el-steps :active="values" spac="400px" align-center="" style="padding-top: 20px;">
 <el-step :title="item.name"  v-for="(item,index) in processoptions " :key="index" @click.native=stepclick(item.id)>

 </el-step>
 </el-steps>
</el-card>

  <el-tabs type="border-card">
  <el-tab-pane label="输入物料">
    <el-button type="primary" icon="el-icon-plus" @click="handleinputCreate"
        >新增</el-button>
       
         <el-table
       
        :data="inputtableData"
       border
        fit
        stripe
        style="width: 100%"
      >
        <el-table-column type="index" width="50" />
         <el-table-column label="物料编号" min-width="100">
          <template slot-scope="scope">{{scope.row.material_.number}}</template>
        </el-table-column>

       <el-table-column label="物料名称"  min-width="100">
          <template slot-scope="scope"> {{scope.row.material_.name}}</template>
        </el-table-column>
      
        <el-table-column label="计量单位"  min-width="100">
          <template slot-scope="scope">{{ scope.row.material_.unit }}</template>
        </el-table-column>
       
        <el-table-column label="单位消耗量"  min-width="100">
          <template slot-scope="scope">{{ scope.row.count }}</template>
        </el-table-column>
       
     

        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
           
            <el-link
              v-if="checkPermission(['material_update'])"
              @click="handleinputEdit(scope)"
              >编辑</el-link
            >
            <el-link
              v-if="checkPermission(['material_delete'])"
              type="danger"
              @click="handleinputDelete(scope)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
   
     <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? '编辑输入物料' : '新增输入物料'"
    >
      <el-form
        ref="Form"
        :model="inputmaterial"
        label-width="80px"
        label-position="right"
      >
       
        <el-form-item label="消耗量" prop="count">
          <el-input v-model="inputmaterial.count" placeholder="输入整数或小数" />
        </el-form-item>
          <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="inputmaterial.sort"
            :min="-2147483648"
            :max="2147483647"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="输入物料" prop="unit">
        <el-select  style="width: 100%" v-model="inputmaterial.material" placeholder="请选择">
             <el-option
                v-for="item in materialoptions"
                :key="item.value"
                :label="item.label"
               :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
      
         
        
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="inputconfirm('Form')">确认</el-button>
      </div>
    </el-dialog>
    </el-tab-pane>
  <el-tab-pane label="输出物料">
     <el-button type="primary" icon="el-icon-plus" @click="handleoutputCreate"
        >新增</el-button>
         <el-table
       
        :data="outputtableData"
        border
        fit
        stripe
      >
        <el-table-column type="index" width="50" />
         <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.material_.name}}</template>
        </el-table-column>
      
        <el-table-column label="计量单位">
          <template slot-scope="scope">{{ scope.row.material_.unit }}</template>
        </el-table-column>
       
        <el-table-column label="单位消耗量">
          <template slot-scope="scope">{{ scope.row.count }}</template>
        </el-table-column>
       
     

        <el-table-column
          align="center"
          label="操作"
          width="220px"
        >
          <template slot-scope="scope">
           
            <el-link
              v-if="checkPermission(['material_update'])"
              @click="handleoutputEdit(scope)"
              >编辑</el-link
            >
            <el-link
              v-if="checkPermission(['material_delete'])"
              type="danger"
              @click="handleoutputDelete(scope)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
   
     <el-dialog
      :visible.sync="dialogVisible1"
      :title="dialogType1 === 'edit' ? '编辑输出物料' : '新增输出物料'"
    >
      <el-form
        ref="Forms"
        :model="outputmaterial"
        label-width="80px"
        label-position="right"
      >
       
        <el-form-item label="产出量" prop="count">
          <el-input v-model="outputmaterial.count" placeholder="输入整数或小数" />
        </el-form-item>
          <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="outputmaterial.sort"
            :min="-2147483648"
            :max="2147483647"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="输出物料" prop="unit">
        <el-select  style="width: 100%" v-model="outputmaterial.material" placeholder="请选择">
             <el-option
                v-for="item in materialoptions"
                :key="item.value"
                :label="item.label"
               :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
      
         
        
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="outputconfirm('Forms')">确认</el-button>
      </div>
    </el-dialog>
  </el-tab-pane>
  <el-tab-pane label="子工序列表">
     <el-button type="primary" icon="el-icon-plus" @click="handleusedstepCreate"
        >新增</el-button>
          <el-table
       
        :data="usedsteptableData"
        border
        fit
        stripe
      >
        <el-table-column type="index" width="50" />
         

      
        <el-table-column label="子工序名称">
          <template slot-scope="scope">{{ scope.row.step_.name }}</template>
        </el-table-column >
       
        
        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
           
            <el-link
              type="primary"
              @click="handlesearch(scope)"
              >查看</el-link
            >
            <el-link
              v-if="checkPermission(['material_delete'])"
              type="danger"
              @click="handleusedstepDelete(scope)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
   
     <el-dialog
      :visible.sync="dialogVisibleusedstep"
      
    >
      <el-form
        ref="Formusedstep"
        :model="usedstep"
        label-width="80px"
        label-position="right"
      >
       
       
        <el-form-item label="子工序" prop="unit">
        <el-select  style="width: 100%" v-model="usedstep.step" placeholder="请选择">
             <el-option
                v-for="item in stepoptions"
                :key="item.value"
                :label="item.label"
               :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
      
         
        
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisibleusedstep = false">取消</el-button>
        <el-button type="primary" @click="usedstepconfirm('Formusedstep')">确认</el-button>
      </div>
    </el-dialog>
  </el-tab-pane>
  <el-tab-pane label="检验要求">
     <el-button type="primary" icon="el-icon-plus" 
        >新增</el-button>
  </el-tab-pane>
   <el-tab-pane label="技术文件">
      <el-button type="primary" icon="el-icon-plus" @click="handletechdocCreate"
        >新增</el-button>
         <el-table
        :data="techdoctableData"
        border
        fit
        stripe
        highlight-current-row
      >
        <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 align="center" label="文件">
          <template slot-scope="scope" v-if="scope.row.file_">
            <el-link :href="scope.row.file_.path" >{{scope.row.file_.name}}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="220px"
        >
          <template slot-scope="scope">
           
           
            <el-link
              v-if="checkPermission(['process_update'])"
              @click="handletechdocEdit(scope)"
              >编辑</el-link
            >
            <el-link
              v-if="checkPermission(['process_delete'])"
              type="danger"
              @click="handletechdocDelete(scope)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
         <el-dialog
      :visible.sync="dialogVisiblet"
      :title="dialogTypet === 'edit' ? '编辑文件' : '新增文件'"
    >
      <el-form
        ref="Formt"
        :model="techdoc"
        label-width="100px"
        label-position="right"
      
      >
        <el-form-item label="文件名称" prop="name">
          <el-input v-model="techdoc.name" placeholder="工序名称" />
        </el-form-item>
      
       <el-form-item label="内容" prop="content">
          <el-input  type="textarea"  :rows="6" v-model="techdoc.content" placeholder="内容" />
        </el-form-item>
         <el-form-item label="文件" prop="template" v-if="dialogVisiblet">
          <el-upload
          ref="upload"
          :action="upUrl"
          :on-preview="handlePreview"
          :on-success="handleUpSuccess"
          :on-remove="handleRemove"
          :headers="upHeaders"
          :file-list="fileList"
          :limit="1"
          accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx"
        >
          <el-button size="small" type="primary">上传文件</el-button>
        </el-upload>
        </el-form-item>
        
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisiblet = false">取消</el-button>
        <el-button type="primary" @click="techdocconfirm('Formt')">确认</el-button>
      </div>
    </el-dialog>
   </el-tab-pane>
</el-tabs>
  </el-col>
</el-row>
 </div>
</template>
<script>
import { getMaterialList,getMaterial,getInputmaterialList,createInputmaterial,updateInputmaterial
,deleteInputmaterial,getOutputmaterialList,createOutputmaterial,updateOutputmaterial,deleteOutputmaterial,
getUsedstepList,createUsedstep,deleteUsedstep,getStepList,gettechdocList,createtechdoc,updatetechdoc,deletetechdoc } from "@/api/mtm";

import { upUrl, upHeaders } from "@/api/file";
import checkPermission from "@/utils/permission";
import { genTree } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
const defaultinputmaterial = {
 
};
const defaultoutputmaterial = {
 
};
const defaultusedstep = {
 
};
const defaulttechdoc = {

};

export default {
  components: { Pagination },
  
  data() {
    return {
     materialoptions:[],
     inputtableData:"",
      techdoc: defaulttechdoc,
       inputmaterial: defaultinputmaterial,
       techdoctableData:"",
        outputtableData:"",
      outputmaterial: defaultoutputmaterial,
     usedsteptableData:"",
      usedstep: defaultusedstep,
      materialList: {
        count: 0,
      },
        upHeaders: upHeaders(),
      upUrl: upUrl(),
      fileList:[],
      stepoptions:[],
      processoptions:[],
      listQuery: {
        page: 1,
        page_size: 20,
      },
      listQueryinput: {
        page: 0,
      },
        listQueryoutput: {
        page: 0,
      },
       listQueryusedstep: {
        page: 0,
      },
      listQuerytechdoc:{
        page: 0,
      },
      values:7,
      products:"",
      dialogType: "new",
      dialogVisible:false,
        dialogType1: "new",
      dialogVisible1:false,
        dialogTypeusedstep: "new",
      dialogVisibleusedstep:false,
       dialogTypet: "new",
      dialogVisiblet:false,
      listLoading: true,
   
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
  
   
  },
  methods: {
    checkPermission,
    //产品列表
    getList() {
      this.listLoading = true;
      this.listQuery.type=1;
      getMaterialList(this.listQuery).then((response) => {
        if (response.data) {
          this.materialList = response.data;
        }
        this.listLoading = false;
      });
    },
    //物料
    getmaterialList() {
      this.listLoading = true;
      getMaterialList().then((response) => {
        if (response.data) {
          this.materialoptions = genTree(response.data.results);
        }
        this.listLoading = false;
      });
    },
   
    //获取产品，工艺
    getMaterial(){
      getMaterial(this.product).then((response) => {
        if (response.data) {
          this.products = response.data;//产品信息
          this.processoptions =  response.data.processes_;//产品工艺
        }
      })
    },
    //点击对应的产品弹出信息
    handleCurrentChange(row){
     this.product=row.id;
     this.getMaterial();
    },
     
    //工艺点击信息
   
     stepclick(id)
     {
        this.process = id;
      //  alert(this.process)
        this.getInputmaterialLists();
      
        this.getmaterialList();
         this.getOutputmaterialLists();
          this.getstepList();
          this. getUsedstepLists();
           this.gettechdocLists();
        
     },




     //输入物料列表
     
      getInputmaterialLists(){
      
        this.listQueryinput.process=this.process;
         this.listQueryinput.product=this.product
         //this.listQueryinput.page=0;
      getInputmaterialList(this.listQueryinput).then((response) => {
        if (response.data) {
           
          this.inputtableData = response.data;//产品信息
         
        }
      })
    },
     //输入物料
      handleinputCreate() {
      this.inputmaterial = Object.assign({}, defaultinputmaterial);
      this.dialogType = "new";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["Form"].clearValidate();
      });
    },
    handleinputEdit(scope) {
      this.inputmaterial = Object.assign({}, scope.row); // copy obj
      this.dialogType = "edit";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["Form"].clearValidate();
      });
    },
    handleDelete(scope) {
      this.$confirm("确认删除?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          await deleteInputmaterial(scope.row.id);
          this.getInputmaterialLists()
          this.$message.success("成功");
        })
        .catch((err) => {
          console.error(err);
        });
    },
  async inputconfirm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const isEdit = this.dialogType === "edit";
          if (isEdit) {
            this.inputmaterial.process=this.process;
             this.inputmaterial.product=this.product;
            updateInputmaterial(this.inputmaterial.id, this.inputmaterial).then((res) => {
              if (res.code >= 200) {
                this.getInputmaterialLists()
                this.dialogVisible = false;
                this.$message.success("成功");
              }
            });
          } else {
            this.inputmaterial.process=this.process;
             this.inputmaterial.product=this.product;
            createInputmaterial(this.inputmaterial).then((res) => {
              if (res.code >= 200) {
               this.getInputmaterialLists()
                 this.dialogVisible = false;
                this.$message.success("成功");
              }
            });
          }
        } else {
          return false;
        }
      });
    },




     //输出物料列表
     
      getOutputmaterialLists(){
       
        this.listQueryoutput.process=this.process;
         this.listQueryoutput.product=this.product
        //  this.listQueryoutput.page=0;
      getOutputmaterialList(this.listQueryoutput).then((response) => {
        if (response.data) {
           
          this.outputtableData = response.data;//产品信息
         
        }
      })
    },


     //输出物料
      handleoutputCreate() {
      this.outputmaterial = Object.assign({}, defaultoutputmaterial);
      this.dialogType1 = "new";
      this.dialogVisible1 = true;
      this.$nextTick(() => {
        this.$refs["Forms"].clearValidate();
      });
    },
    handleoutputEdit(scope) {
      this.outputmaterial = Object.assign({}, scope.row); // copy obj
      this.dialogType1 = "edit";
      this.dialogVisible1 = true;
      this.$nextTick(() => {
        this.$refs["Forms"].clearValidate();
      });
    },
    handleoutputDelete(scope) {
      this.$confirm("确认删除?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          await deleteOutputmaterial(scope.row.id);
          this.getOutputmaterialLists()
          this.$message.success("成功");
        })
        .catch((err) => {
          console.error(err);
        });
    },
  async outputconfirm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const isEdit = this.dialogType1 === "edit";
          if (isEdit) {
            this.outputmaterial.process=this.process;
             this.outputmaterial.product=this.product;
            updateOutputmaterial(this.outputmaterial.id, this.outputmaterial).then((res) => {
              if (res.code >= 200) {
                this.getOutputmaterialLists()
                this.dialogVisible1 = false;
                this.$message.success("成功");
              }
            });
          } else {
            this.outputmaterial.process=this.process;
             this.outputmaterial.product=this.product;
             console.log(this.outputmaterial);
            createOutputmaterial(this.outputmaterial).then((res) => {
              if (res.code >= 200) {
               this.getOutputmaterialLists()
                 this.dialogVisible1 = false;
                this.$message.success("成功");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
     //子工序列表
     
      getUsedstepLists(){
       
        this.listQueryusedstep.process=this.process;
         this.listQueryusedstep.product=this.product
      //   this.listQueryusedstep.page=0;
      getUsedstepList(this.listQueryusedstep).then((response) => {
        if (response.data) {
           
          this.usedsteptableData = response.data;//产品信息
         
        }
      })
    },

     getstepList() {
     
      getStepList(this.process).then((response) => {
        if (response.data) {
          this.stepoptions = genTree(response.data);
        }
        
      });
    },

     handlesearch(scope) {

    this.$router.push({name: "Step", params: { id: scope.row.step_.id }, })

   },

    //子工序列表
    handleusedstepCreate(){
      this.usedstep = Object.assign({}, defaultusedstep);
      this.dialogTypeusedstep = "new";
      this.dialogVisibleusedstep = true;
      this.$nextTick(() => {
        this.$refs["Formusedstep"].clearValidate();
      });
    },

   
     handleusedstepEdit(scope) {
      this.outputmaterial = Object.assign({}, scope.row); // copy obj
      this.dialogType1 = "edit";
      this.dialogVisible1 = true;
      this.$nextTick(() => {
        this.$refs["Forms"].clearValidate();
      });
    },
    handleusedstepDelete(scope) {
      this.$confirm("确认删除?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          await deleteUsedstep(scope.row.id);
          this.getUsedstepLists()
          this.$message.success("成功");
        })
        .catch((err) => {
          console.error(err);
        });
    },
  async usedstepconfirm(form) {
     
            this.usedstep.process=this.process;
             this.usedstep.product=this.product;
             console.log(this.usedstep);
            createUsedstep(this.usedstep).then((res) => {
              if (res.code >= 200) {
               this.getUsedstepLists()
                 this.dialogVisibleusedstep = false;
                this.$message.success("成功");
              }
            });
          },
     //技术文件
     gettechdocLists(){
       this.listQuerytechdoc.process=this.process;
         this.listQuerytechdoc.product=this.product;
          //  this.listQuerytechdoc.page=0;
      gettechdocList(this.listQuerytechdoc).then((response) => {
        if (response.data) {
          
          this.techdoctableData = response.data;//技术文件
         
        }
      })
     },
      handletechdocCreate(){
      this.techdoc = Object.assign({}, defaulttechdoc);
      this.dialogTypet = "new";
      this.dialogVisiblet = true;
        this.fileList=[];
      this.$nextTick(() => {
        this.$refs["Formt"].clearValidate();
      });
    },
    handlePreview(file) {
      if ("url" in file) {
        window.open(file.url);
      } else {
        window.open(file.response.data.path);
      }
    },
    handleUpSuccess(res, file, filelist) {
      this.techdoc.file = res.data.id;
    },
    handleRemove(file, filelist){
      this.techdoc.file = null;
    },
  
    handletechdocEdit(scope) {
      this.techdoc = Object.assign({}, scope.row); // copy obj
      this.dialogTypet = "edit";
      this.dialogVisiblet = true;
       if (this.techdoc.file) {
        this.fileList = [
          {
            name:this.techdoc.file_.name,
            url: this.techdoc.file_.path,
          },
        ];
      }
      this.$nextTick(() => {
        this.$refs["Formt"].clearValidate();
      });
    },
    handletechdocDelete(scope) {
      this.$confirm("确认删除?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          await deletetechdoc(scope.row.id);
          this.gettechdocLists();
          this.$message.success("成功");
        })
        .catch((err) => {
          console.error(err);
        });
    },
   
    async techdocconfirm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const isEdit = this.dialogTypet === "edit";
           
          if (isEdit) {
            updatetechdoc(this.techdoc.id, this.techdoc).then((res) => {
              if (res.code >= 200) {
                this.gettechdocLists();
                this.dialogVisiblet = false;
                this.$message.success("成功");
              }
            });
          } else {
             this.techdoc.process=this.process;
             this.techdoc.product=this.product;
            createtechdoc(this.techdoc).then((res) => {
              if (res.code >= 200) {
                this.gettechdocLists();
                 this.dialogVisiblet = false;
                this.$message.success("成功");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
