<template>
  <div class="main">
    <div class="main_in">
      <weatherTitle :title="'实时告警'" refreshName="alarmRefreshName" />
      <div class="height-2">
        <div v-if="showBox" :class="{ 'tab-bar-icon': true, 'tab-length-flex': alarmDataBox.listData.length == 0 }">
          <div @click="tabSwitch(alarmDataBox.alarmData['水位告警'].info)" class="tab-bar-box">
            <div> <img src="../../../assets/images/weatheHome/sw-icon.png" /> </div>
            <div>
              <div>{{ alarmDataBox.alarmData['水位告警'].num }}个</div>
              <div>水位告警</div>
            </div>
          </div>
          <div @click="tabSwitch(alarmDataBox.alarmData['流量告警'].info)" class="tab-bar-box">
            <div> <img src="../../../assets/images/weatheHome/ll-icon.png" /> </div>
            <div>
              <div>{{ alarmDataBox.alarmData['流量告警'].num }}个</div>
              <div>流量告警</div>
            </div>
          </div>
          <div @click="tabSwitch(alarmDataBox.alarmData['雨量告警'].info)" class="tab-bar-box">
            <div> <img src="../../../assets/images/weatheHome/jy-icon.png" /> </div>
            <div>
              <div>{{ alarmDataBox.alarmData['雨量告警'].num }}个</div>
              <div>降雨告警</div>
            </div>
          </div>
          <div @click="tabSwitch(alarmDataBox.alarmData['气象告警'].info)" class="tab-bar-box">
            <div> <img src="../../../assets/images/weatheHome/qx-icon.png" /> </div>
            <div>
              <div>{{ alarmDataBox.alarmData['气象告警'].num }}个</div>
              <div>气象告警</div>
            </div>
          </div>
        </div>
        <div v-show="isSwitch && alarmDataBox.listData.length != 0">
          <div class="tab-list">
            <vue3-seamless-scroll :list="alarmDataBox.listData" class="scroll" :step="0.2" :hover="true" :wheel="true">
              <!-- <div v-for="(item, index) in alarmDataBox.listData" :key="index" class="police1 police-box">
                <div>{{ index + 1 }}</div>
                <div>
                  <div> <img src="../../../assets/images/weatheHome/police-icon1.png" /> </div>
                  <div>
                    {{ item.warn_msg }}
                  </div>
                </div>
              </div> -->
              <div v-for="(item, index) in alarmDataBox.listData" :key="index" class="new-police" @click="openModal(item)">
                <div>
                  <img src="../../../assets/images/weatheHome/icon-5514.png" />
                  <span>{{ item.title }}</span>
                  <span>{{ item.time }}</span>
                </div>
                <div> {{ item.warn_msg }} </div>
                <img src="../../../assets/images/weatheHome/icon-bg-7.png" />
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
      </div>
      <div v-if="!isSwitch">
        <div class="new-qx-table-box">
          <div v-for="(item, index) in alarmDataBox.activeInfo" :key="index" class="new-police" @click="openModal(item)">
            <div>
              <img src="../../../assets/images/weatheHome/icon-5514.png" />
              <span>{{ item.title }}</span>
              <span>{{ item.time }}</span>
            </div>
            <div> {{ item.warn_msg }} </div>
            <img src="../../../assets/images/weatheHome/icon-bg-7.png" />
          </div>
        </div>
        <div class="deviceBack" @click="tabSwitch(false)">
          <img :src="doubleScreenBack" class="toolImage" />
        </div>
        <!-- <div class="qx-table">
          <div class="qx-table-top">
            <div style="width: 60%"> 告警类容 </div>
            <div style="width: 40%"> 最近采集时间 </div>
          </div>
          <div class="qx-table-box">
            <div v-for="(item, index) in alarmDataBox.activeInfo" :key="index">
              <div style="width: 60%">
                <a-popover>
                  <template #content>
                    <p>{{ item.warn_msg }}</p>
                  </template>
                  {{ getNewName(item.warn_msg, 26) }}
                </a-popover>
              </div>
              <div style="width: 40%"> {{ item.time }} </div>
            </div>
          </div>
          <div class="deviceBack" @click="tabSwitch(false)">
            <img :src="doubleScreenBack" class="toolImage" />
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import weatherTitle from '../../../components/Title/weatherTitle.vue';
import doubleScreenBack from '/@/assets/images/doubleScreenBack.png';
import { getrealTimeInfo } from '/@/api/swHome/index';
import eventBus from '/@/utils/eventBus';
import { useMapStore } from '/@/store/modules/map';

const mapStore = useMapStore();
const openModal = (item) => {
  mapStore.setstInfo(item);
};
eventBus.on('alarmRefreshName', () => {
  alarmDataBox.listData = [];
  getAlarmData();
});
let showBox = ref(false);
let alarmDataBox = reactive({
  alarmData: {
    水位告警: {
      num: 0, //#告警数值
      info: [], //#告警信息
    },
    流量告警: {
      num: 0, //#告警数值
      info: [], //#告警信息
    },
    降雨告警: {
      num: 0, //#告警数值
      info: [], //#告警信息
    },
    气象告警: {
      num: 0, //#告警数值
      info: [], //#告警信息
    },
  },
  activeInfo: [],
  listData: [],
});
function getAlarmData() {
  getrealTimeInfo().then((res) => {
    alarmDataBox.alarmData = res.data;
    showBox.value = true;
    setListData(res.data);
  });
}

function getNewName(name, num) {
  var len = 0;
  var reallen = 0;
  for (var j = 0; j < name.length; j++) {
    if (name.charCodeAt(j) > 127 || name.charCodeAt(j) == 94) {
      len += 2;
    } else {
      len++;
    }
    if (len < num + 1) {
      reallen++;
    }
  }
  if (len > num) {
    name = name.substr(0, reallen) + '···';
  }
  return name;
}
// 处理二维对象数组拍平
function setListData(obj) {
  for (let key in obj) {
    let element = obj[key];
    element.info.forEach((elements) => {
      elements.title = key;
    });
    alarmDataBox.listData = [...alarmDataBox.listData, ...element.info];
    // alarmDataBox.listData = [];
  }
}

// 滚动插件
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { fontSize } from '../../../utils/util';

// 滚动插件
let isSwitch = ref(true);
function tabSwitch(itemInfo) {
  if (alarmDataBox.listData.length == 0) {
    return false;
  }
  if (itemInfo) {
    isSwitch.value = false;
    alarmDataBox.activeInfo = itemInfo;
  } else {
    alarmDataBox.activeInfo = [];
    isSwitch.value = true;
  }
}
// 测试滚动数据
let testList = reactive([
  {
    index: 1,
  },
  {
    index: 2,
  },
  {
    index: 3,
  },
]);

onMounted(async () => {
  // 获取实时告警数据
  getAlarmData();
});
</script>
<style lang="less" scoped>
.main {
  box-sizing: border-box;
  padding: 2px;
  border-radius: 0px 30px 0px 30px;
  background-image: linear-gradient(200deg, rgba(40, 165, 255, 0.9) 9%, rgba(100, 255, 255, 0) 34%, rgba(40, 126, 255, 0) 66%, #28a5ff 100%);
}
.main_in {
  width: 100%;
  height: 100%;
  border-radius: 0px 30px 0px 30px;
  background: rgba(6, 37, 70, 0.9);
}
.tab-bar-icon {
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}
.tab-bar-box {
  display: flex;
  cursor: pointer;
  & > div:nth-child(1) {
    img {
      width: 32px;
      position: relative;
      top: 7px;
      margin-right: 4px;
    }
  }
  & > div:nth-child(2) {
    div:nth-child(1) {
      background: linear-gradient(181deg, #3df9ff 27%, #287eff 97%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 18px;
    }
    div:nth-child(2) {
      /* 水位告警 */
      font-family: Source Han Sans CN;
      font-size: 12px;
      font-weight: 350;
      color: #b8f1f7;
    }
  }
}
.scroll {
  height: 170px;
  overflow: hidden;
}
.tab-list {
  padding: 0 10px;
  height: 186px;
  cursor: pointer;
  .police-box {
    cursor: pointer;
    padding: 0px 20px;
    display: flex;
    // justify-content: space-between;
    line-height: 48px;
    margin-top: 10px;
    & > div:nth-child(2) {
      display: flex;
      line-height: initial;
      // margin-top: 6px;
      font-size: 12px;
      margin-left: 20px;
      display: flex;
      align-items: center;
    }
  }
  .police1 {
    background: url('../../../assets/images/weatheHome/police-bg1.png') no-repeat;
    background-size: 100%;
    .police-box:nth-child(2) {
      & > div:nth-child(2) {
        & > div:nth-child(2) {
          color: red;
        }
      }
    }
  }
  .police2 {
    background: url('../../../assets/images/weatheHome/police-bg2.png') no-repeat;
    background-size: 100%;
    .police-box:nth-child(2) {
      & > div:nth-child(2) {
        & > div:nth-child(2) {
          color: rgb(239, 154, 72);
        }
      }
    }
  }
  .police3 {
    background: url('../../../assets/images/weatheHome/police-bg3.png') no-repeat;
    background-size: 100%;
    .police-box:nth-child(2) {
      & > div:nth-child(2) {
        & > div:nth-child(2) {
          color: rgba(253, 253, 150, 0.8);
        }
      }
    }
  }
}

.new-qx-table-box {
  height: 152px;
  overflow: scroll;
  cursor: pointer;
  .new-police {
    margin-left: 10px;
  }
}
// 表格数据
.qx-table {
  height: 186px;
  padding-left: 20px;
  .qx-table-top {
    display: flex;
  }
  .qx-table-box {
    height: 129px;
    overflow: scroll;
    & > div {
      width: 100%;
      line-height: 33px;
      display: flex;
      box-sizing: border-box;
      /* 面板线性渐变 */
      border: 0px solid;
      margin-top: 2px;
      // border-image: linear-gradient(261deg, rgba(40, 165, 255, 0.9) 20%, rgba(100, 255, 255, 0) 40%, rgba(40, 126, 255, 0) 66%, #28a5ff 89%) 1;
      & > div:nth-child(1) {
        // padding-left: 10px;
        border-left: 4px solid transparent;
      }
    }
    & > div:nth-child(2n) {
      background-color: rgba(0, 170, 255, 0.08);
    }
    & > div:hover {
      background: rgba(0, 238, 255, 0.15);
      color: #00d8f0;
    }
    & > div:hover > div:nth-child(1) {
      padding-left: 10px;
      border-left: 4px solid #00eeff;
    }
  }
}
.deviceBack {
  -webkit-transform: rotateY(180deg);
  padding-left: 10px;
}
.height-2 {
  // height: 23vh;
  // height: 260px;
}
.tab-length-flex {
  height: 254px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  & > div {
    width: 50% !important;
    justify-content: center;
    & > div:nth-child(1) {
      img {
        width: 46px !important;
      }
    }
    & > div:nth-child(2) {
      & > div:nth-child(1) {
        font-size: 22px;
      }
      & > div:nth-child(2) {
        font-size: 18px;
      }
    }
  }
}
.new-police {
  position: relative;
  margin-top: 10px;
  padding-bottom: 10px;
  & > div:nth-child(2) {
    color: rgba(255, 255, 255, 1);
  }
  & > div:nth-child(1) {
    span:nth-child(2) {
      color: #ff4040;
      font-size: 14px;
      margin-left: 5px;
    }
    span:nth-child(3) {
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
      margin-left: 10px;
    }
    img {
      display: inline-block;
      position: relative;
      top: -2px;
    }
  }
  & > img {
    position: absolute;
    bottom: 0px;
    width: 100%;
  }
}
</style>
