<template>
  <a-card  :bordered="false" style="height: 800px;margin-top: -35px">
    <template style="margin-top: 0px">
      <a-row :gutter="6">
<!--        <span style="font-size: 20px;line-height: 2.5;margin-left: 45%;font-weight: bold">设备状态信息</span>-->
<!--        <span style="margin-left: 40%" ><a-button type="primary" @click="redo()" icon="redo">刷新</a-button></span>-->
        <a-col :span='22'>
          <span style="font-size: 20px;line-height: 2.5;margin-left: 50%;font-weight: bold">设备状态信息</span>
        </a-col>
        <a-col :span='2' style="margin-top: 24px">
          <a-button style="position: absolute;" type="primary" @click="redo()" icon="redo">刷新</a-button>
        </a-col>
      </a-row>
<!--      <a-row :gutter="6">-->
<!--        <a-col>-->
        <div style="margin-bottom: 10px">
          <span style="font-weight: bold;margin-left: 2%;margin-top: 10px">
            <span style="display: inline-block; width:30px;border-radius: 4px;background-color: rgba(48,201,86,0.88); ">运行</span>
          </span>
          <span style="font-weight: bold;margin-left: 12px">
            <span style="display: inline-block; width:30px;border-radius: 4px;background-color: rgba(255,165,0,0.88);">待机</span>
          </span>
          <span style="font-weight: bold;margin-left: 12px">
            <span style="display: inline-block; width:30px;border-radius: 4px;background-color: rgba(211 211 211 / 88%);">停机</span>
          </span>
          <span style="font-weight: bold;margin-left: 12px">
            <span style="display: inline-block; width:30px;margin-left: 0px;border-radius: 5px;background-color: rgb(243,43,63);">故障</span>
          </span>
        </div>
<!--          <span style="font-weight: bold;font-size: 18px;padding: 0px 0px;line-height: 3;margin-left: 69%">刷新时间:</span>-->
<!--          <a-input v-model="time" style="font-weight: bold;font-size: 18px; border: 0px solid #d9d9d9;line-height: 3;width: 195px" readOnly></a-input>-->
<!--          <a-button   type="primary" @click="redo()" icon="redo">刷新</a-button>-->

<!--          <img class="redo" src="@/assets/bcicon/re.png"-->
<!--               :style="{ 'cursor': isHovering ? 'pointer' : 'default' }"-->
<!--               @mouseover="isHovering = true"-->
<!--               @mouseLeave="isHovering = false"-->
<!--               @click="redo()"-->
<!--          >-->

<!--        </a-col>-->
<!--      </a-row>-->
    </template>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <div  class="salesCard">
          <a-row :gutter="8" >
            <a-col :span="3"  v-for="(card, index) in positionList" style="margin-bottom: 26px;margin-inline: 14px" :key="card.id" >
              <a-card size="small"
                :style="card.isActive ? {
                  backgroundColor: 'lightblue',
                  border:'4px solid',
                  borderRadius: '20px',
                  borderColor:card.status==='3'?'rgb(243,43,63)':card.status==='2'?'rgba(48,201,86,0.88)':card.status==='1'?'rgba(255,165,0,0.88)':'rgba(211 211 211 / 88%)'} :
                  {
                  backgroundColor: 'white' ,
                  border:'4px solid',
                  borderRadius: '20px',
                  borderColor:card.status==='3'?'rgb(243,43,63)':card.status==='2'?'rgba(48,201,86,0.88)':card.status==='1'?'rgba(255,165,0,0.88)':'rgba(211 211 211 / 88%)'}">
                <div slot="title" class="text-limit">
                  {{ card.deviceName}}
                </div>
<!--                @dblclick="showModal(index,card)"-->
                <template  slot="extra" style="width: 30%">
<!--                  <img class="jc-logo" src="@/assets/bcicon/360.png"-->
<!--                       :style="{ 'cursor': isHovering ? 'pointer' : 'default' }"-->
<!--                       @mouseover="isHovering = true"-->
<!--                       @mouseLeave="isHovering = false"-->
<!--                       @click="showModal(index,card)"-->
<!--                  >-->
                  <a-button style="height: 25px; padding: 0px;margin-right: -8px;font-size: 12px;" type="primary" icon="safety" @click="showModal(index,card)">
                    <span style="margin-left: 1px;">360卫士</span>
                  </a-button>
                </template>
                <div style="height: 50px;">
                  <div>设备编号：{{ card.deviceCode }}</div>
                  <div style="margin-top: 10px">未处理风险：{{ card.count }}</div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <risk-item-data-v-from ref="riskDataVModel" :is-modal-visible="this.isModalVisible" :right6-device-id="this.right6DeviceId" ></risk-item-data-v-from>
  </a-card>
</template>

<script>

import { getAction } from '@api/manage'
import centerRight6 from "./centerRight6";
import RiskItemDataVFrom from "@views/dashboard/riskItemDataVFrom";
export default {
  name: 'HomePage',
  components: {
    RiskItemDataVFrom,
    centerRight6
  },
  data() {
    return {
      time:'',//时间显示
      positionList: [],
      scrollData1:[],
      scrollData2:[],
      scrollData3:[],
      url: {
        list: "/device/buDevice/getAllDeviceStatus",
      },
      activeCardStyle: { backgroundColor: 'lightblue',border:'2px solid' },
      defaultCardStyle: { backgroundColor: 'white' ,border:'2px solid',borderColor:'green'},
      right6DeviceId:"",
      isModalVisible:false,
      iconLoading:false,
      num:Number,
      isHovering: false,
    }
  },
  mounted () {
    this.getNowTime(true)
  },
  created() {
    this.get()
  },
  methods: {
    // 获取当前时间
    getNowTime(isAll){
      let now = new Date();
      let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let today = now.getDate(); //获取当前日(1-31)
      let hour = now.getHours(); //获取当前小时数(0-23)
      let minute = now.getMinutes(); //获取当前分钟数(0-59)
      let second = now.getSeconds(); //获取当前秒数(0-59)
      let nowTime = ''
      //返回年月日时分秒
      if(isAll){
        nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today) + ' ' + this.fillZero(hour) + ':' + this.fillZero(minute) + ':' + this.fillZero(second)
      }else{//返回年月日
        nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today)
      }
      this.time = nowTime;
      return nowTime
    },
    // 给时间补零
    fillZero(str){
      var realNum;
      if (str < 10) {
        realNum = '0' + str;
      } else {
        realNum = str;
      }
      return realNum;
    },
    //单击显示弹窗
    // handleCardClick(index,value) {
      // this.positionList.forEach(card => {
      //   card.isActive = false;
      // });
      // this.num = index
      // this.positionList[index].isActive = true;
      // this.right6DeviceId = value.id;
    // },
    //双击显示弹窗
    showModal(index,value) {
      this.positionList.forEach(card => {
        card.isActive = false;
      });
      this.num = index
      this.positionList[index].isActive = true;
      this.right6DeviceId = value.id;
      this.isModalVisible = true;
    },
    get() {
      getAction(this.url.list, {}).then((res) => {
        if (res.success) {
          this.positionList = res.result.map(item =>{
            return {
              ...item,
              isActive: false,
            };
          })
          // if(this.right6DeviceId!==""&&this.right6DeviceId!==this.positionList[0].id){
          //   this.positionList[this.num].isActive = true;
          // this.right6DeviceId = this.positionList[this.num].id
          // }else {
          //   this.positionList[0].isActive = true;
          //   this.right6DeviceId = this.positionList[0].id
          // }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    redo(){
      this.right6DeviceId = ''
      this.isModalVisible = false;
      this.getNowTime(true)
      this.get()
      // this.$refs.centerRight6.get(this.right6DeviceId)
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .jc-logo{
  position: absolute;
  top: 3px;
  left: 75%; /* 水平居中图片 */
  width: 35px; /* 设置图片的宽度 */
  height: 35px; /* 设置图片的高度 */
  //object-fit: cover; /* 确保图片覆盖整个设定的空间，不失真 */
  //margin-top: 0px;
  //margin-left: -20px;
  //width: 30px;
  //height: 30px;
  //background-repeat: round
}
::v-deep .redo{
  position: absolute;
  top: 12px;
  right: 1%; /* 水平居中图片 */
  width: 40px; /* 设置图片的宽度 */
  height: 30px; /* 设置图片的高度 */
}
.text-limit {
  font-weight: bold;
  font-size: 15px;
  width: 7em; /* 设置宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.text-limit:hover {
  font-weight: bold;
  font-size: 13px;
  overflow: visible; /* 鼠标悬浮时显示全部内容 */
  white-space: nowrap; /* 允许换行 */
  text-overflow: clip; /* 移除省略号 */
}
</style>