<template>
  <div>
    <el-dialog title="机器日志" :visible.sync="logDiaLog" width="700px" append-to-body >
      <el-tabs v-model="activeName" >
        <el-tab-pane label="出厂日志" name="first" >          
          <div v-for="item in machineLogData" :key="item.id">
            <b><span>{{item.created_at}} {{item.message}}</span></b>                    
          </div>         
        </el-tab-pane>
        <el-tab-pane label="硬件日志" name="second">
          <div v-for="item in machineComLogData" :key="item.id">
            <b><span>{{item.created_at}} {{item.message}}</span></b>                    
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer" >
        <el-button v-show="contentTag" type="primary" @click="onClickContent" >主动上报内容</el-button>
        <el-button @click="logDialogCancel">退出</el-button>
      </div>
    </el-dialog>
    <el-dialog title="主动上报日志" :visible.sync="logContentDiaLog" width="500px" append-to-body >
      <el-input  type="textarea"  :rows="10" placeholder="请输入上报日志内容"  v-model="message"/>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="submitLogContent" >确定</el-button>
        <el-button @click="contentDialogCancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getMachineLog,getMachineComLog,addMachineLog} from "@/api/machine/machineDetails";
export default { 
  data() {
    return {
      logDiaLog:false,
      activeName:"first",
      machineLogData:[],
      machineComLogData:[],
      machineId:null,
      contentTag:true,
      logContentDiaLog:false,
      message:'',
      machineCode:''
    };
  },
  created() {
   
  },
	watch: {
		activeName(value) {
      if(value=="first"){
        this.contentTag=true;
        this.getMachineLog();
      }else if(value=="second"){
        this.contentTag=false;
        this.getMachineComLog();
      }
		}
	},
  methods: {
    //弹出机器页面
    handleLogDialog(row){
      this.activeName="first";
      this.machineId=row.id;
      this.machineCode=row.code;
      this.logDiaLog=true;
      this.getMachineLog();
    },
    onClickContent(){
      this.logContentDiaLog=true;
    },
    logDialogCancel(){
      this.logDiaLog=false;
    },
    //提交主动上报日志
    submitLogContent(){
      let obj={
        "machine_id": this.machineId,
        "machine_code": this.machineCode,  
        "message": this.message 
      }
      addMachineLog(obj).then((response)=>{
        if(response.code==0){
          this.$modal.msgSuccess("主动上报内容成功!");
          this.logContentDiaLog=false;
          this.getMachineLog();
        }
      })
    },
    contentDialogCancel(){
      this.logContentDiaLog=false;
    },

    //出厂日志
    getMachineLog(){
      getMachineLog(this.machineId).then((response) => {
        if(response.code==0){
          this.machineLogData = response.data;
        }       
      });
    },
    //硬件日志
    getMachineComLog(){
      getMachineComLog(this.machineId).then((response) => {
        if(response.code==0){
          this.machineComLogData = response.data;
        }       
      });
    }


  }
};
</script>