<template>
  <div class="page-container iotHardware-hardwareFeature">
    <!--进度条-->
    <div class="schedule-box">
      <div class="schedule-min-box">
        <p :style="'width:'+scheduleData.schedule+'%;'"></p>
      </div>
      <div class="schedule-title-box">
        <p v-if="scheduleData.featureType > 0">{{scheduleData.featureType == 3 ? '诊断完成' : '诊断中...'}}</p>
      </div>
    </div>
    <!--诊断列表-->
    <div class="feature-box scrollbar-box">
      <div class="feature-for-max-box" v-for="(item,index) in featureDataList" :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?'正常':item.responseMsg)}}
          </p>
        </div>
        <div class="copy-box">
          <p class="el-icon-tickets"
             @click="lockInfo(item.response)"
             v-if="item.featureType != 0"></p>
        </div>
      </div>
    </div>
    <div class="button-box">
      <p></p>
      <p @click="resetButton" v-if="scheduleData.featureType == 3">重新诊断</p>
      <p></p>
    </div>
    <!--查看结果-->
    <public-log-dialog ref="publicLogDialog"></public-log-dialog>
  </div>
</template>

<script>
  import { iotDeviceCheckConnect,iotDeviceCheckOnline,iotDeviceCheckState } from "@/api/commonality/debugPermission";
  import publicLogDialog from '@/components/publicLogDialog/publicLogDialog.vue'
  export default {
    name: 'hardwareFeature',
    components: {
      publicLogDialog
    },
    data(){
      return{
        //进度条数据
        scheduleData:{
          featureType:0,
          schedule:0,
        },
        //诊断数据
        featureDataList:[
          {
            name:"设备状态",
            remark:"诊断设备状态是否正常，禁用状态会导致诊断失败",
            type:'state',
            featureType:0,
            response:'',
          },
          {
            name:"在线状态",
            remark:"诊断设备在线入网状态是否正常，禁用会导致设备连接失败",
            type:'online',
            featureType:0,
            response:'',
          },
          {
            name:"通信状态",
            remark:"诊断设备在通信状态是否正常，禁用和配置错误会导致设备连接失败",
            type:'connect',
            featureType:0,
            response:'',
          },
        ],
      }
    },
    created(){

    },
    mounted(){
      this.initialize();
    },
    methods:{
      //初始化诊断(顺序执行)
      initialize(){
        this.iotDeviceCheckState().then(res=>{
          this.iotDeviceCheckOnline().then(res=>{
            this.iotDeviceCheckConnect();
          })
        })
      },
      //诊断
      iotDeviceCheckState(){
        return new Promise(resolve=>{
          iotDeviceCheckState({id:this.$parent.propsData.id}).then(response => {
            this.$set(this.scheduleData,'featureType',this.scheduleData.featureType+1);
            this.$set(this.scheduleData,'schedule',this.scheduleData.schedule+33);
            this.$set(this.featureDataList[0],'response',JSON.stringify(response));
            this.$set(this.featureDataList[0],'responseMsg',response.message);
            if(response.data){
              this.$set(this.featureDataList[0],'featureType',1);
            }else{
              this.$set(this.featureDataList[0],'featureType',2);
            }
            resolve()
          });
        })
      },
      iotDeviceCheckOnline(){
        return new Promise(resolve=>{
          iotDeviceCheckOnline({id:this.$parent.propsData.id}).then(response => {
            this.$set(this.scheduleData,'featureType',this.scheduleData.featureType+1);
            this.$set(this.scheduleData,'schedule',this.scheduleData.schedule+33);
            this.$set(this.featureDataList[1],'response',JSON.stringify(response));
            this.$set(this.featureDataList[1],'responseMsg',response.message);
            if(response.data){
              this.$set(this.featureDataList[1],'featureType',1);
              this.$set(this.$parent.newData,'online',true);
            }else{
              this.$set(this.featureDataList[1],'featureType',2);
              this.$set(this.$parent.newData,'online',false);
            }
            resolve()
          });
        })
      },
      iotDeviceCheckConnect(){
        return new Promise(resolve=>{
          iotDeviceCheckConnect({id:this.$parent.propsData.id}).then(response => {
            this.$set(this.scheduleData,'featureType',this.scheduleData.featureType+1);
            this.$set(this.scheduleData,'schedule',this.scheduleData.schedule+34);
            this.$set(this.featureDataList[2],'response',JSON.stringify(response));
            this.$set(this.featureDataList[2],'responseMsg',response.message);
            if(response.data){
              this.$set(this.featureDataList[2],'featureType',1);
            }else{
              this.$set(this.featureDataList[2],'featureType',2);
            }
          });
        })
      },
      //重置
      resetButton(){
        let self = this;
        this.$set(this,'scheduleData',{
          featureType:0,
          schedule:0,
        });
        this.$set(this.featureDataList[0],'featureType',0);
        this.$set(this.featureDataList[1],'featureType',0);
        this.$set(this.featureDataList[2],'featureType',0);
        setTimeout(() => {
          self.initialize();
        }, 100);
      },
      //查看结果
      lockInfo(response){
        this.$refs.publicLogDialog.publicLogDialogOpen(response);
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotHardware-hardwareFeature{
    flex:1;
    display: flex;
    flex-direction: column;
    padding-bottom:20px;
    .schedule-box{
      .schedule-min-box{
        border:1px solid #999;
        padding:2px;
        border-radius:20px;
        height:20px;
        margin:40px 40px 0 50px;
        p{
          height:14px;
          border-radius:20px;
          background-color: #00a0e9;
        }
      }
      .schedule-title-box{
        height:30px;
        line-height:30px;
        text-align: center;
        font-size:14px;
      }
    }
    .feature-box{
      overflow-x: hidden;
      flex:1;
      padding:20px 0 0 20px;
      .feature-for-max-box:nth-child(1){
        border-top:1px solid #dedede;
      }
      .feature-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:90px;
          p{
            margin:15px 30px;
            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;
        }
      }
    }
    .button-box{
      display: flex;
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(2){
        height:30px;
        line-height:30px;
        font-size:14px;
        width:100px;
        text-align: center;
        cursor: pointer;
        border-radius:4px;
        border:1px solid #0183FA;
        background-color: #0183FA;
        color:#fff;
      }
      p:nth-child(2):hover{
        border:1px solid #0183FA;
        background-color: #fff;
        color:#0183FA;
      }
      p:nth-child(3){
        flex:1;
      }
    }
  }
</style>
<style lang="scss">
  .iotHardware-hardwareFeature-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>
