<template>
  <div class="page-container hardwareEquipment-hardwareDebug">
    <!--调试列表-->
    <div class="debug-box scrollbar-box">
      <div class="debug-for-max-box" v-for="(item,index) in debugDataList" :key="index">
        <div class="type-icon-box">
          <p :class="item.featureType === 0?'el-icon-warning colorC':(item.featureType === 1?'el-icon-success colorA':'el-icon-error colorB')"></p>
        </div>
        <div class="name-text-box">
          <p>{{item.name}}</p>
          <p>{{item.remark}}</p>
        </div>
        <div class="type-text-box">
          <p :class="item.featureType === 0?'colorC':(item.featureType === 1?'colorA':'colorB')">
            {{item.featureType === 0?'':(item.featureType === 1?'正常':'异常')}}
          </p>
        </div>
        <div class="copy-box">
          <p class="el-icon-tickets"
             @click="lockInfo(item.response)"
             v-if="item.featureType != 0"></p>
        </div>
        <div class="button-box">
          <p :class="item.featureType === 0 ? 'buttonTypeA' : 'buttonTypeB'"
             @click="debugButton(item,index)">
            {{item.featureType === 0 ? '调试' : '复位'}}
          </p>
        </div>
      </div>
    </div>
    <p class="hardwareDebug-null-p" v-if="!debugDataList[0]">未配置调试功能</p>
    <!--查看结果-->
    <public-log-dialog ref="publicLogDialog"></public-log-dialog>
  </div>
</template>

<script>
  import { iotHardwareFunctionDropList } from "@/api/iotDevice/index";
  import { iotDebugFunctionGet,iotDebugFunctionPost } from "@/api/commonality/debugPermission";
  import publicLogDialog from '@/components/publicLogDialog/publicLogDialog.vue'
  export default {
    name: 'hardwareDebug',
    components: {
      publicLogDialog
    },
    data(){
      return{
        //进度条数据
        scheduleData:{
          type:1,//0隐藏1诊断2调试
          featureType:false,
          debugType:false,
          schedule:100,
        },
        //调试数据
        debugDataList:[],
        //调试方法数据
        debugIndex:null,
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      //初始化
      initialize(){
        iotHardwareFunctionDropList({typeId:this.$parent.propsData.hardwareTypeId}).then(response => {
          for(let i=0;i<response.data.length;i++){
            response.data[i].featureType = 0;
          }
          this.$set(this,'debugDataList',response.data);
        });
      },
      //调试功能接口
      debugButton(item,index){
        if(item.featureType === 0){
          this.$set(this,'debugIndex',index);
          let url = item.reqApi
          let dataList = JSON.parse(item.reqParams);
          let obj = {}
          for(let i=0;i<dataList.length;i++){
            if(dataList[i].keyType == 'data'){
              obj[dataList[i].keyName] = this.$parent.propsData[dataList[i].keyName];
            }else if(dataList[i].keyType == 'argument'){
              obj[dataList[i].keyName] = dataList[i].keyArgument;
            }else if(dataList[i].keyType == 'file'){
              obj[dataList[i].keyName] = localStorage.getItem('fileBrowseEnvironment') + dataList[i].keyFile;
            }
          }
          if(item.reqMethod == 'POST'){
            iotDebugFunctionPost(url,obj).then(response => {
              this.$set(this.debugDataList[this.debugIndex],'response',JSON.stringify(response));
              if(response.code == 200){
                this.$set(this.debugDataList[this.debugIndex],'featureType',1);
              }else{
                this.$set(this.debugDataList[this.debugIndex],'featureType',2);
              }
              this.$parent.iotHardwareDetail();
            });
          }else if(item.reqMethod == 'GET'){
            iotDebugFunctionGet(url,obj).then(response => {
              this.$set(this.debugDataList[this.debugIndex],'response',JSON.stringify(response));
              if(response.code == 200){
                this.$set(this.debugDataList[this.debugIndex],'featureType',1);
              }else{
                this.$set(this.debugDataList[this.debugIndex],'featureType',2);
              }
              this.$parent.iotHardwareDetail();
            });
          }
        }else{
          this.$set(this.debugDataList[index],'response','');
          this.$set(this.debugDataList[index],'featureType',0);
          this.$set(this,'debugIndex',null);
        }
      },
      //查看结果
      lockInfo(response){
        this.$refs.publicLogDialog.publicLogDialogOpen(response);
      },
    },
  }
</script>

<style scoped lang="scss">
  .hardwareEquipment-hardwareDebug{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .debug-box{
      padding:20px 20px;
      .debug-for-max-box:nth-child(1){
        border-top:1px solid #dedede;
      }
      .debug-for-max-box{
        border:1px solid #dedede;
        border-top:none;
        display: flex;
        .type-icon-box{
          p{
            text-align: center;
            line-height:60px;
            font-size:40px;
            margin:0 30px;
            width:60px;
            height:60px;
          }
        }
        .name-text-box{
          flex:1;
          padding:10px 0;
          p:nth-child(1){
            line-height:24px;
            font-size:16px;
            font-weight:700;
          }
          p:nth-child(2){
            line-height:16px;
            font-size:14px;
          }
        }
        .type-text-box{
          p{
            font-size:18px;
            width:200px;
            line-height:60px;
            font-weight:700;
          }
        }
        .copy-box{
          width:130px;
          p{
            margin:15px 50px;
            height:30px;
            line-height:30px;
            font-size:24px;
            width:30px;
            text-align: center;
            cursor: pointer;
            border-radius:4px;
            color:#999;
          }
        }
        .button-box{
          p{
            margin:15px 20px;
            height:30px;
            line-height:30px;
            font-size:14px;
            width:100px;
            text-align: center;
            cursor: pointer;
            border-radius:4px;
          }
          .buttonTypeA{
            border:1px solid #0183FA;
            background-color: #0183FA;
            color:#fff;
          }
          .buttonTypeA:hover{
            border:1px solid #0183FA;
            background-color: #fff;
            color:#0183FA;
          }
          .buttonTypeB{
            border:1px solid #999999;
            background-color: #999999;
            color:#fff;
          }
          .buttonTypeB:hover{
            border:1px solid #999999;
            background-color: #fff;
            color:#999999;
          }
        }
        .colorA{
          color:#24B276;
        }
        .colorB{
          color:#FF6666;
        }
        .colorC{
          color:#FF9000;
        }
      }
    }
    .hardwareDebug-null-p{
      text-align: center;
      color:#999;
      font-size:18px;
      line-height:400px;
    }
  }
</style>
<style lang="scss">
  .hardwareEquipment-hardwareDebug-dialog{
    .el-textarea.is-disabled .el-textarea__inner{
      cursor: auto;
      color:#666;
    }
    .copy-box{
      margin-bottom:20px;
      position:relative;
      .copy-p{
        position: absolute;
        bottom:20px;
        right:30px;
        color:#999;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        padding:0;
        font-size:24px;
      }
    }
  }
</style>
