<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" prop="material"/> 
            <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-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </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-row>
        <el-checkbox-group v-model="materialId" :max="1">
          <el-col :span="8" v-for="(item,index) in materialList" :key="index" >
            <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
          </el-col>
        </el-checkbox-group>        
      </el-row>
      <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:[],
      machineState:null,
      // 总条数
      total: 0,
      currentPage:1,
      pageSize:10
    };
  },
  created() {
   
  },
	watch: {
	},
  methods: {
    //弹出机器页面
    handleComDiaLog(row){
      this.comDiaLog=true;
      this.machineId=row.id;
      this.activeName="first"; 
      this.machineState=row.state
      this.getComponentList();
    },
    handleSizeChange(val){
      this.currentPage=1;
      this.pageSize=val;
      this.getComponentList();
    },
    handleCurrentChange(val){
      this.currentPage=val;
      //this.pageSize=1;
      this.getComponentList();
    },
    getComponentList(){
      this.loading = true;
      getComponentList(this.machineId,this.currentPage,this.pageSize).then((response) => {
        if(response.code==0){
          this.componentList = response.data.data;
          this.total=response.data.count;
          this.loading = false;
        }       
      });
    },
    comDiaLogCancel(){
      this.comDiaLog=false
    },
    //弹出添加原料页面
    handleMaterialDialog(row){
      let b=checkPermi(['machine:machineDetails:material']);
      if(!b){
        this.$message.error('暂无添加原料操作的权限!');
        return;
      }
      if(row.material_id && row.material_id!=0){
        this.materialId.push(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(){
      if(this.machineState!=3 && this.machineState!=7){
        this.$message.error('只有状态为待运营测试或运维中才能修改!');
        return;
      }
      let materialName="";
      let materId="";
      for(let i=0;i<this.materialList.length;i++){
        if(this.materialId==this.materialList[i].id){
          materialName=this.materialList[i].name;
          materId=this.materialId[0]
        }
      }
      let obj={
        "machine_id":this.machineId ,  
        "ros_code": this.ros_code,  
        "component_name": this.component_name,  
        "material_id": materId,  
        "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>