<template>
  <div id="centerRight6">
    <div class="body-box">
      <dv-scroll-board :config="config1"/>
    </div>
    <div class="body-box">
      <dv-scroll-board :config="config2"/>
    </div>
    <div  class="body-box">
      <dv-scroll-board :config="config3"/>
    </div>
    <div  class="body-box">
      <dv-scroll-board :config="config4"/>
    </div>
  </div>
</template>

<script>
import {getAction} from "@api/manage";
export default {
  data() {
    return {
      config1: {
        // header: ['#','检测项名称','状态'],
        // headerHeight: 45,
        // headerBGC: '#f0f2f3', //表头
        data: [],
        rowNum: 7, //表格行数
        oddRowBGC: '#f1f1f1', //奇数行
        evenRowBGC: '#ffffff', //偶数行
        index: false,
        columnWidth: [90,200,90],
        align: ['center','center','left'],
        waitTime:31536000000,
      },
      config2: {
        // header: ['#','检测项名称','状态'],
        // headerHeight: 45,
        // headerBGC: '#f0f2f3', //表头
        data: [],
        rowNum: 7, //表格行数
        oddRowBGC: '#f1f1f1', //奇数行
        evenRowBGC: '#ffffff', //偶数行
        index: false,
        columnWidth: [90,200,90],
        align: ['center','center','left'],
        waitTime:31536000000,
      },
      config3: {
        // header: ['#','检测项名称','状态'],
        // headerHeight: 45,
        // headerBGC: '#f0f2f3', //表头
        data: [],
        rowNum: 7, //表格行数
        oddRowBGC: '#f1f1f1', //奇数行
        evenRowBGC: '#ffffff', //偶数行
        index: false,
        columnWidth: [90,200,90],
        align: ['center','center','left'],
        waitTime:31536000000,
      },
      config4: {
        // header: ['#','检测项名称','状态'],
        // headerHeight: 45,
        // rowHeight: 30,
        // headerBGC: '#f0f2f3', //表头
        data: [],
        rowNum: 7, //表格行数
        oddRowBGC: '#f1f1f1', //奇数行
        evenRowBGC: '#ffffff', //偶数行
        index: false,
        columnWidth: [90,200,90],
        align: ['center','center','left'],
        waitTime:31536000000,
      },
      url: {
        queryRiskItem: "/device/buRiskItem/queryRiskItem",
        queryRiskItemValue: "/device/buRiskItemValue/queryRiskItemValue",
      },
      deviceId:'',
      length: Number,
      timeoutId: null,
      clicked:true,
    }
  },
  props: {
    right6DeviceId: {
      type: String,
      required: true
    }
  },
  watch: {
    right6DeviceId(newVal, oldVal) {
      this.get(newVal)
    }
  },
  // created() {
  //   this.get()
  // },
  methods: {
    get(newVal) {
      debugger;
      if (this.clicked===true) {
        clearTimeout(this.timeoutId);
        this.config1.data = []
        this.config2.data = []
        this.config3.data = []
        this.config4.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.config3 = {...this.config3}
            this.config4 = {...this.config4}
          } else {
            for (let i = 0; i < res.result.length; i++) {
              if (i <= 6) {
                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 > 6 && i <= 13) {
                this.config2.data.push([res.result[i][0], res.result[i][1]])
                this.config2.data[i - 7][2] = "<div class=\"loading\"></div>"
                this.config2 = {...this.config2}
              } else if (i > 13 && i <= 20) {
                this.config3.data.push([res.result[i][0], res.result[i][1]])
                this.config3.data[i - 14][2] = "<div class=\"loading\"></div>"
                this.config3 = {...this.config3}
              } else {
                this.config4.data.push([res.result[i][0], res.result[i][1]])
                this.config4.data[i - 21][2] = "<div class=\"loading\"></div>"
                this.config4 = {...this.config4}
              }
            }
            for (let i = 0; i < res.result.length; i++) {
              this.timeoutId = setTimeout(() => {
                if (i <= 6) {
                  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.data[i][2] = res.result[i][2]
                  this.config1 = {...this.config1}
                } else if (i > 6 && i <= 13) {
                  if(res.result[i][2]=== 1){
                    this.config2.data[i - 7][2] = "<div class=\"checkmark\"></div>"
                  }else {
                    this.config2.data[i - 7][2] = "<div class=\"exclamation\"></div>"
                  }
                  // this.config2.data[i - 7][2] = res.result[i][2]
                  this.config2 = {...this.config2}
                } else if (i > 13 && i <= 20) {
                  if(res.result[i][2]=== 1){
                    this.config3.data[i - 14][2] = "<div class=\"checkmark\"></div>"
                  }else {
                    this.config3.data[i - 14][2] = "<div class=\"exclamation\"></div>"
                  }
                  // this.config3.data[i - 14][2] = res.result[i][2]
                  this.config3 = {...this.config3}
                } else {
                  if(res.result[i][2]=== 1){
                    this.config4.data[i - 21][2] = "<div class=\"checkmark\"></div>"
                  }else {
                    this.config4.data[i - 21][2] = "<div class=\"exclamation\"></div>"
                  }
                  // this.config4.data[i - 21][2] = res.result[i][2]
                  this.config4 = {...this.config4}
                }
              }, i * 30);
            }
            // for (let  i = 0; i < res.result.length; i++) {
            //   if (i <= 8) {
            //     this.config1.data[i][2] = "<div class=\"loading\"></div>"
            //     this.config1 = {...this.config1}
            //     // this.timeoutId1 =setTimeout(() => {
            //     // this.config1.data[i][2] = res.result[i][2]
            //     //   this.config1 = {...this.config1}
            //     //   this.timeoutId1 = null;
            //     // }, i * 100);
            //   }else if (i > 8 && i <= 17) {
            //     this.config2.data[i-9][2] = "<div class=\"loading\"></div>"
            //     this.config2 = {...this.config2}
            //     // this.timeoutId2 =setTimeout(() => {
            //     // this.config2.data[i-9][2] = res.result[i][2]
            //     //   this.config2 = {...this.config2}
            //     //   this.timeoutId2 = null;
            //     // }, i * 100);
            //   } else {
            //     this.config3.data[i-18][2] = "<div class=\"loading\"></div>"
            //     this.config3 = {...this.config3}
            //     // this.timeoutId3 =setTimeout(() => {
            //     //   this.config3.data[i-18][2] = res.result[i][2]
            //     //   this.config3 = {...this.config3}
            //     //   this.timeoutId3 = null;
            //     // }, i * 100);
            //   }
            // }
          }
          this.clicked = true
        })
      }
    }
  },
}
</script>
<style lang="scss">
$box-height: 400px;
$box-width: calc(100%);
#centerRight6 {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  height: $box-height;
  width: $box-width;
  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%);
      height: 300px;
      color: #0a0000;
    }
  }
  .rows {
    overflow-y: auto; /* 允许垂直滚动 */
    position: relative; /* 确保滚动条定位正确 */
  }
  .rows::-webkit-scrollbar {
    width: 10px; /* 滚动条宽度 */
  }

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

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

  .rows::-webkit-scrollbar-thumb:hover {
    background: #555; /* 滑块鼠标悬停时背景色 */
  }
}
/* 对号 */
.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border: solid 2px #4CAF50;
  border-radius: 10px;
  margin-top: 12px;
  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: 12px;
  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>
