<template>
  <a-card  :bordered="false" style="margin-top: -35px">
    <template style="margin-top: 0px">
      <a-row :gutter="6">
        <a-col :span='22'>
        <span style="font-size: 20px;line-height: 2.5;margin-left: 50%;font-weight: bold">设备状态信息</span>
        </a-col>
<!--        <span style="padding-right: 2%" ><a-button type="primary" @click="redo()" icon="redo">刷新</a-button></span>-->
        <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>-->
<!--          <span style="font-weight: bold;font-size: 18px;padding: 0px 0px;line-height: 3;margin-left: 77%">刷新时间:</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>
        <a-col :span="24"  style="padding-left: 0px;">
            <a-row class="row-border" v-for="(card, index) in positionList" :key="card.id" :style="'background-image:url('+rowbg+');background-size: cover; height:260px'">
                <div class="tag-info">
                    <div class="tag-logo"></div>
                  <span style="font-weight: bold;margin-left: 20px">
                    <span style="display: inline-block; width:30px;margin-left: 0px;border-radius: 5px;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;margin-left: 0px;border-radius: 5px;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;margin-left: 0px;border-radius: 5px;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>
                <a-col :span="4" style="margin-top: 30px;margin-left: 30px">
                  <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>
                    <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: 28px;padding: 4px;" type="primary" icon="safety" @click="showModal(index,card)" >
                        <span style="margin-left: 1px;">360卫士</span>
                      </a-button>
<!--                      <a-button class="jc-logo1" shape="round"  type="primary" ghost @click="redo()" >360卫士ghost</a-button>-->
                    </template>
                    <div style="margin-top:-10px;height: 76px;">
                      <div style="margin-top: 0px">设备编号：{{card.deviceCode}}</div>
                      <div style="margin-top: 10px">未处理风险：{{card.count}}</div>
                      <div style="margin-top: 10px">状态：{{card.status===3?"故障":card.status===2?"运行":card.status===1?"待机":card.status===0?"停机":""}}</div>
                    </div>
                  </a-card>
                </a-col>
                <a-col :span="7">
<!--                      <img class="photo" :src="card.img" alt="图片不存在" >-->
<!--                  <a-tooltip  >-->
<!--                    <template slot="title">-->
<!--                      {{card.deviceName}}-->
<!--                    </template>-->
<!--                    <img class="photo" :src="getImgView(card.img)" alt="图片不存在">-->
<!--                  </a-tooltip>-->

                  <div class="image-container">
                    <a-tooltip    placement="right">
                      <template slot="title">
                        {{card.deviceName}}
                      </template>
                      <img  :src="getImgView(card.img)" alt="图片不存在" style="width: 100%;height: 100%">
                    </a-tooltip>
                  </div>
                </a-col>
                <a-col :span="11">
                  <div :id="'chart'+index" class="oneChart"></div>
                </a-col>
            </a-row>
          <risk-item-data-v-from ref="riskDataVModel" :is-modal-visible="this.isModalVisible" :right6-device-id="this.right6DeviceId" ></risk-item-data-v-from>
        </a-col>
  </a-card>
</template>

<script>
import good from '@/assets/bcicon/good.png'
import fault from '@/assets/bcicon/fault.png'
import rowbg from '@/assets/bcicon/rowbg.png'
import {getAction} from "@api/manage";
import RiskItemDataVFrom from "@views/dashboard/riskItemDataVFrom.vue";
import {JeecgListMixin} from "@/mixins/JeecgListMixin";
import {mixinDevice} from "@/utils/mixin";
export default {
  mixins :[JeecgListMixin, mixinDevice],
    components: {RiskItemDataVFrom},
    data() {
        return {
          time:'',//时间显示
          url: {
            list: "/device/buDevice/getAllDeviceStatus",
            getAllPower: "device/buDeviceRunTime/devicePowerStatistics",
            getDevicePower: "device/buDeviceRunTime/devicePowerStatisticsById",
          },
          form: {
              startNumber: 1,
              endNumber: 12,
          },
          legendData: ['运行时长','待机时长'],
          oneData: [],
          twoData: [],
          threeData: [],
          positionList: [],
          right6DeviceId:"",
          isModalVisible:false,
          isHovering: false,
          good,
          fault,
          rowbg,
          showTitle:true,
        }
    },
    mounted() {
      this.get();
      this.getNowTime(true)
    },

    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;
      },
      showModal(index,value,event) {
        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 =>{
              // if(item.img){
              //   item.img = require('@assets/bcicon/' + item.img);
              //
              // }
              return {
                ...item,
                isActive: false,
              };
            })
            this.positionList.forEach((item, index) => {
              this.getAllPowerStatistics(item.id, index);
            });
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      getAllPowerStatistics(id,index){
        {
          let currentYear  = new Date().getFullYear();
          getAction(this.url.getDevicePower,{selectYear: currentYear,deviceId:id},'get').then(res => {
            this.initChart(res.result,'设备运行能耗统计(年度)',index);
          })
        }
      },
      initChart(data,title, chartIndex){
        let myChart = this.$echarts.getInstanceByDom(document.getElementById('chart' + chartIndex));
        if (!myChart) {
          myChart = this.$echarts.init(document.getElementById('chart' + chartIndex));
        }
        let xData = [];
        let yData = [];
        if(data){
          for(var i=0;i<data["x"].length;i++){
            xData.push(data["x"][i]+"月");
            yData.push(Math.round(data["y"][i]));
          }
        }
        const myOptions = {
          title:{
            left:'center',
            text:title
          },
          tooltip: {
            trigger: 'axis',
          },
          toolbox: {
            show: true,
            feature: {
              magicType: {
                type: ['line', 'bar']
              },
            }
          },
          // legend:{
          //   top:580
          // },
          xAxis: {
            type: 'category',
            data: xData,
            name: "月份"
          },
          yAxis: {
            type: 'value',
            name: "能耗/kW·h"
          },
          series: [{
            data: yData,
            type: 'bar',
            name: "能耗",
            smooth: 0.5,
            label:{
              show:true,
              position:'top',
              formatter: function (params) {if (params.value !== 0 && params.value !== "0") {
                return params.value;
              } else {return '';}
              }
            },
            areaStyle: {}
          }]
        };
        myChart.setOption(myOptions,true)
      },
      redo(){
        this.right6DeviceId = ''
        this.isModalVisible = false;
        this.getNowTime(true)
        this.get()
        // this.$refs.centerRight6.get(this.right6DeviceId)
      },
    },
};
</script>

<style scoped lang="scss">
.image-container {
  position: relative;
  display: flex;
  margin-top: -20px;
  margin-left: 112px;
  width: 260px;
  height: 240px;

}
.text-limit {
  font-weight: bold;
  font-size: 16px;
  width: 7em; /* 设置宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.text-limit:hover {
  font-weight: bold;
  font-size: 15px;
  overflow: visible; /* 鼠标悬浮时显示全部内容 */
  white-space: nowrap; /* 允许换行 */
  text-overflow: clip; /* 移除省略号 */
}
  .tooltip {
    position: absolute;
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    display: none;
  }
  /* 定位tooltip */
  .tooltip {
    top: -25%;
    left: 58%;
  }
  /* 显示tooltip */
  .tooltip {
    display: block;
  }
  .oneChart{
    width: 100%;
    height: 220px;
    margin-left: 50px;
  }
  .table{
    margin-bottom: 20px;
  }

  .left{
    width: 10%;
    float: left;
    text-align: center;
  }

  .left > div{
    border:1px solid #cccccc;
    height: 50px;
    line-height: 50px;
    word-wrap: break-word;
    overflow: auto;
  }

  .left .leftRow{
    border-top: none;
  }
  .right{
    width:90%;
    float: left;
    overflow-x: auto;
  }

  .rightRow > div{
    width: 100px;
    float: left;
    text-align: center;
    border-top:1px solid #cccccc;
    border-right:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
    height: 50px;
    line-height: 50px;
  }

  .rightRowBottom > div{
    width: 100px;
    float: left;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }
::v-deep .jc-logo{
  position: absolute;
  top: 5px;
  left: 75%; /* 水平居中图片 */
  width: 50px; /* 设置图片的宽度 */
  height: 50px; /* 设置图片的高度 */
  //object-fit: cover; /* 确保图片覆盖整个设定的空间，不失真 */
  //margin-top: 0px;
  //margin-left: -20px;
  //width: 30px;
  //height: 30px;
  //background-repeat: round
  }
  ::v-deep .jc-logo1 {
    position: absolute;
    top: 12px;
    left: 70%;
    width: 72px;
    height: 28px;
  }
  ::v-deep .redo{
    position: absolute;
    top: 12px;
    right: 1%; /* 水平居中图片 */
    width: 40px; /* 设置图片的宽度 */
    height: 30px; /* 设置图片的高度 */
  }
  ::v-deep .photo{
    margin-top: -30px;
    margin-left: 110px;
    width: 280px;
    height: 250px;
    //margin-top: -18px;
    //margin-left: 110px;
    //width: 300px;
    //height: 260px;
    //background-repeat: round;
    // border: 1px dashed #687DD2;no-repeat
  }

  ::v-deep .tag-info{
    width: 100%;
    height: 20px;
  }

  ::v-deep .tag-info > div{
    float: left;
  }

  ::v-deep .tag-logo{
    width: 4px;
    height: 20px;
    background: #409EFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    margin-right: 10px;
  }

  ::v-deep .tag-desc{
    width: 100px;
    height: 20px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #001F47;
  }

  ::v-deep .sdg-info{
    width: 100%;
    height: 142px;
  }

  ::v-deep .sdg-info-name{
    width: 64px;
    height: 18px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #001F47;
    margin-top: 20px;
    margin-left:32px;
  }

  ::v-deep .sdg-info-detail{
    margin-left: 32px;
  }

  ::v-deep .sdg-info-detail > div{
    float: left;
  }

  ::v-deep .sdg-info-left-name{
    width: 64px;
    height: 16px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #707070;
    margin-top: 22px;
  }

  ::v-deep .sdg-info-right{
    margin-left: 24px;
    margin-top: 22px;
  }

  ::v-deep .sdg-info-rignt-status{
    width:80px;
    height: 26px;
  }

  ::v-deep .kilo-value{
    color: #409EFF;
    font-size: 32px;
  }

  ::v-deep .sdg-right-title,.ld-right-title{
    color:#001F47;
    font-size: 16px;
    position:relative;
  }

  ::v-deep .sdg-title,{
    display: inline-block;
  }
  ::v-deep .header-title{
    font-size: 16px;
    font-family: PingFangSC-Medium-, PingFangSC-Medium;
    font-weight: normal;
    color: rgba(0,0,0,0.9);
    line-height: 24px;
    display: inline-block;
  }

  ::v-deep .header-icon{
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 230px;
    cursor:pointer;
  }

  ::v-deep .row-border{
    // border: 1px dashed #687DD2;
    padding: 20px;
    height: 280px;
  }
  ::v-deep .row-split{
    margin-top:10px;
  }

</style>