<template>
  <a-modal
    :visible.sync="isModalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="730"
    :body-style="{ padding: '0px' }"
  >
    <template slot="title">
      <div class="risk-title">
        360设备健康卫士
      </div>
    </template>
<!--    title="360设备健康卫士"-->
    <a-progress :percent="percent"  :showInfo="true" style="width: 100%;height: 4px;border-radius: 100px;padding-top: 0px"/>
    <div  id="centerRight6">
        <div class="body-box" >
          <dv-scroll-board :style="{height:this.config1.height+'px'}" :config="config1"/>
        </div>
        <div class="body-box">
          <dv-scroll-board :style="{height:this.config1.height+'px'}" :config="config2"/>
        </div>
    </div>
  </a-modal>

</template>

<script>
import {getAction} from "@api/manage";

export default {
  name: "riskItemDataVFrom",
  data() {
    return {
      processVisible: false,
      percent: 100,
      progressUp:'检测项状态',
      config1: {
        // header: ['#','检测项名称','状态'],
        // headerHeight: 45,
        // headerBGC: '#f0f2f3', //表头
        data: [],
        rowNum: '', //表格行数
        oddRowBGC: '#f1f1f1', //奇数行
        evenRowBGC: '#ffffff', //偶数行
        index: false,
        columnWidth: [60,240,100],
        align: ['center','center','left'],
        waitTime:31536000000,
        height:'',
      },
      config2: {
        // header: ['#','检测项名称','状态'],
        // headerHeight: 45,
        // headerBGC: '#f0f2f3', //表头
        data: [],
        rowNum: '', //表格行数
        oddRowBGC: '#f1f1f1', //奇数行
        evenRowBGC: '#ffffff', //偶数行
        index: false,
        columnWidth: [60,240,100],
        align: ['center','center','left'],
        waitTime:31536000000,
      },
      url: {
        queryRiskItem: "/device/buRiskItem/queryRiskItem",
        queryRiskItemValue: "/device/buRiskItemValue/queryRiskItemValue",
      },
      deviceId:'',
      length: Number,
      timeoutId: null,
      clicked:true,
      // isModalVisible:false
    }
  },
  props: {
    isModalVisible: {
      type: Boolean,
      required: true
    },
    right6DeviceId: {
      type: String,
      required: true
    }
  },
  watch: {
    isModalVisible(newVal, oldVal) {
      this.isModalVisible = newVal;
    },
    right6DeviceId(newVal, oldVal) {
      this.get(newVal)
    }
  },
  methods: {
    handleOk(e) {
      // this.progressUp = '检测项状态   检测中,请稍候...'
      this.isModalVisible  = !this.isModalVisible;
    },
    handleCancel(e) {
      // this.progressUp = '检测项状态   检测中,请稍候...'
      this.isModalVisible  = !this.isModalVisible;
    },
    get(newVal) {
      if (this.clicked===true) {
        clearTimeout(this.timeoutId);
        this.config1.data = []
        this.config2.data = []
        getAction(this.url.queryRiskItemValue, {deviceId: newVal}, 'get').then((res) => {
          this.clicked = false
          this.length = res.result.length
          if (this.length === 0) {
            this.config1 = {...this.config1}
            this.config2 = {...this.config2}
            this.percent = 0
          } else {
            let length = 0
            if (res.result.length % 2 === 1) {
              length = (res.result.length-1) / 2 ;
              this.config1.height = 38*length
              this.config1.rowNum = length+1
              this.config2.rowNum = length+1

            } else {
              length = res.result.length / 2-1;
              this.config1.height = 38*length
              this.config1.rowNum = length+1
              this.config2.rowNum = length+1

            }
            for (let i = 0; i < res.result.length; i++) {
              if (i <= length) {
                this.config1.data.push([res.result[i][0], res.result[i][1]])
                this.config1.data[i][2] = "<div class=\"loading\"></div>"

                this.config1 = {...this.config1}
              } else if (i > length) {
                this.config2.data.push([res.result[i][0], res.result[i][1]])
                this.config2.data[i - (length+1)][2] = "<div class=\"loading\"></div>"
                this.config2 = {...this.config2}
              }
            }
            for (let i = 0; i < res.result.length; i++) {
              this.timeoutId = setTimeout(() => {
                if (i <= length) {
                  if(res.result[i][2]=== 1){
                    this.config1.data[i][2] = "<div class=\"checkmark\"></div>"
                  }else {
                    this.config1.data[i][2] = "<div class=\"exclamation\"></div>"
                  }
                  this.config1 = {...this.config1}
                } else if (i > length) {
                  if(res.result[i][2]=== 1){
                    this.config2.data[i - (length+1)][2] = "<div class=\"checkmark\"></div>"
                  }else {
                    this.config2.data[i - (length+1)][2] = "<div class=\"exclamation\"></div>"
                  }
                  this.config2 = {...this.config2}
                }
                this.percent = Math.round((i+1)/res.result.length*100)
                if(this.percent===100){
                  // this.progressUp = '检测项状态   检测已完成'
                }
              }, i * 100);
            }
          }
          this.clicked = true
        })
      }
    }
  },
}
</script>

<style lang="scss">
//$box-height: 100%;
//$box-width: calc(100%);
#centerRight6 {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  height: 100%;
  width: calc(100%);
  border-radius: 5px;
  .bg-color-black {
    //height: $box-height - 10px;
    border-radius: 5px;
  }
  .text {
    color: #000000;
    font-size: 16px;
    font-weight:bold;
  }
  .header{
    height: 45px;
    font-size: 15px;
  }
  .body-box {
    border-radius: 5px;
    //overflow: hidden;
    .dv-scroll-board {
      width: calc(100%);
      color: #0a0000;
    }
  }
  .rows {
    overflow-y: auto; /* 允许垂直滚动 */
    position: relative; /* 确保滚动条定位正确 */
  }
  .rows::-webkit-scrollbar {
    width: 0px; /* 滚动条宽度 */
  }

  .rows::-webkit-scrollbar-track {
    background: #f1f1f1; /* 滚动条轨道背景色 */
  }

  .rows::-webkit-scrollbar-thumb {
    background: #888; /* 滚动条滑块背景色 */
    border-radius: 5px; /* 滑块边角半径 */
  }

  .rows::-webkit-scrollbar-thumb:hover {
    background: #555; /* 滑块鼠标悬停时背景色 */
  }
}

.risk-title {
  font-size: 20px;
  text-align: center;
  //font-weight: bold;
  //color: #0a0000; /* 你可以更换成你想要的颜色 */
}
/* 对号 */
.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border: solid 2px #4CAF50;
  border-radius: 10px;
  margin-top: 8px;
  position: relative;
}

.checkmark::after {
  content: '\2713';
  color: #4CAF50;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
}

/* 感叹号 */
.exclamation {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border: solid 2px #FF9800;
  border-radius: 10px;
  margin-top: 8px;
  position: relative;
}

.exclamation::after {
  content: '!';
  color: #FF9800;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
}
.loading {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  width: 20px;
  height: 20px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>