<template>
  <div>
    <el-dialog title="组件管理" :visible.sync="comDiaLog" width="700px" append-to-body >
      <el-tabs v-model="activeName" >
        <el-tab-pane label="组件信息" name="first" >          
          <el-table v-loading="loading" :data="componentList"> 
            <el-table-column label="组件类型" align="center" prop="type_desc" />
            <el-table-column label="组件名称" align="center" prop="component_name" />
            <el-table-column label="组件编码" align="center" prop="ros_code" />
            <el-table-column label="备注说明" align="center"  prop=""/>
            <el-table-column label="组件状态" align="center"  prop="state_desc"/>
            <el-table-column label="原料" align="center">
              <template slot-scope="scope">
                <a @click="handleMaterialDialog(scope.row)" style="color: blue">添加原料</a>
              </template> 
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="comDiaLogCancel" >确定</el-button>
        <el-button @click="comDiaLogCancel">退出</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加原料" :visible.sync="materialDiaLog" width="600px" append-to-body>
      <el-radio-group v-model="materialId" class="radioClass">        
        <el-radio v-for="item in materialList" :key="item.id" :label="item.id">{{item.name}}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="submitMaterial" >确定</el-button>
        <el-button @click="cancelMaterial">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {getComponentList,addMaterial} from "@/api/machine/machineDetails";
import {listMaterial} from "@/api/system/material";
import {checkPermi} from "@/utils/permission.js";
export default { 
  data() {
    return {
      // 遮罩层
      loading: true,
      comDiaLog:false,
      activeName:"first",
      machineId:null,
      componentList:[],
      materialDiaLog:false,
      materialList:[],
      ros_code:"",
      component_name:"",
      materialId:""
    };
  },
  created() {
   
  },
	watch: {
	},
  methods: {
    //弹出机器页面
    handleComDiaLog(row){
      this.comDiaLog=true;
      this.machineId=row.id;
      this.activeName="first"; 
      this.getComponentList();
    },
    getComponentList(){
      this.loading = true;
      getComponentList(this.machineId).then((response) => {
        if(response.code==0){
          this.componentList = response.data;
          this.loading = false;
        }       
      });
    },
    comDiaLogCancel(){
      this.comDiaLog=false
    },
    //弹出添加原料页面
    handleMaterialDialog(row){
      let b=checkPermi(['machine:machineDetails:material']);
      if(!b){
        this.$message.error('暂无添加原料操作的权限!');
        return;
      } 
      this.materialId=row.material_id;
      this.ros_code=row.ros_code;
      this.component_name=row.component_name;
      this.materialDiaLog=true;
      this.getMaterialList();
    },
    /** 原料列表 */
    getMaterialList() {      
      listMaterial({pageNum:1,pageSize:100000,state:1}).then(response => {
        this.materialList = response.rows; 
      });
    },
    //提交原料
    submitMaterial(){
      let materialName="";
      for(let i=0;i<this.materialList.length;i++){
        if(this.materialId==this.materialList[i].id){
          materialName=this.materialList[i].name;
        }
      }
      let obj={
        "machine_id":this.machineId ,  
        "ros_code": this.ros_code,  
        "component_name": this.component_name,  
        "material_id": this.materialId,  
        "material": materialName 
      }
      addMaterial(obj).then(response => {
        if(response.code==0){
          this.$modal.msgSuccess("添加原料成功!");
          this.getComponentList();          
          this.materialDiaLog=false;
        }         
      });      
    },
    //关闭原料页面
    cancelMaterial(){
      this.materialDiaLog=false
    },
  }
};
</script>

<style lang="scss">
.radioClass .el-radio{
  width: 200px;
}
</style>