<template>
  <div class="main">
    <div class="main_in">
      <weatherTitle :title="'实时告警'" refreshName="alarmRefreshName" />
      <div @click="showAlarmDialog" class="title-subTitle">
        历史>>
      </div>
      <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 :style="{
        'color': item.level_name
      }">{{ 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 :style="{
        'color': item.level_name
      }">{{ 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>
    </div>
    <Dialog :width="'1300px'" :height="800" :dialogVisable="dialogvisable" :title="dalogTitle"
      @visible-change="closeModal">
      <div class="alarm-dialog">
        <div class="alarm-tabs">
          <a-tabs @change="changeTabs" v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="水位告警"></a-tab-pane>
          <a-tab-pane key="2" tab="流量告警"></a-tab-pane>
          <a-tab-pane key="3" tab="雨量告警"></a-tab-pane>
          <a-tab-pane key="4" tab="气象告警"></a-tab-pane>
        </a-tabs>
        </div>
        <div class="top-query">
          <span>时间范围</span>
          <a-range-picker style="width: 400px" v-model:value="timeList" :show-time="{
        hideDisabledOptions: true,
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
      }" :placeholder="['开始时间', '结束时间']" format="YYYY-MM-DD HH:mm:ss" />
          <a-button type="primary" style="margin-left: 10px;" @click="historyAlarmInfoFn()">查询</a-button>
        </div>
        <div class="alarm-content-box">
          <ul class="title">
            <li>序号</li>
            <li @click="sortIcon('time')" class="icon-list-my">告警时间
              <CaretUpOutlined :class="{ 'asc': sortStr == 'asc' }" />
              <CaretDownOutlined :class="{ 'des': sortStr == 'des' }" />
            </li>
            <li>告警信息</li>
            <li @click="sortLevelIcon('level_name')" class="icon-list-my icon-list-my2">告警级别
              <CaretUpOutlined :class="{ 'asc': sortLevelStr == 'asc' }" />
              <CaretDownOutlined :class="{ 'des': sortLevelStr == 'des' }" />
            </li>
          </ul>
          <ul class="list">
            <li v-for="(item, index) in dalogList" :key="index">
              <span>{{ index + 1 }}</span>
              <span>{{ item.time }}</span>
              <span>{{ item.warn_msg }}</span>
              <span>
                <span :style="{ backgroundColor: item.level_name }"></span>
              </span>
            </li>
            <div v-if="dalogList.length == 0" style="text-align: center;">
              <img style="display: inline-block;" class="none-data"
                src="../../../assets/images/weatheHome/none-data.png" />
            </div>
          </ul>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import Dialog from '/@/components/Dialog/index.vue';
import weatherTitle from '../../../components/Title/weatherTitle.vue';
import doubleScreenBack from '/@/assets/images/doubleScreenBack.png';
import { getrealTimeInfo, historyAlarmInfo } from '/@/api/swHome/index';
import eventBus from '/@/utils/eventBus';
import { useMapStore } from '/@/store/modules/map';
import {
  CaretUpOutlined,
  CaretDownOutlined,
} from '@ant-design/icons-vue';
import moment from 'moment';
let timeList = ref([])
let activeKey = ref('1')
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: [],
});
let dialogvisable = ref(false)
const search = () => {
  // 打开弹窗默认使用水位告警的数据
}
const changeTabs = (e) => {
  timeList.value = []
  switch (e) {
    case '1':
      gradeSort(alarmDataBox.alarmData['水位告警'].info)
      break; 
      case '2':
      gradeSort(alarmDataBox.alarmData['流量告警'].info)
      break; 
      case '3':
      gradeSort(alarmDataBox.alarmData['雨量告警'].info)
      break; 
      case '4':
      gradeSort(alarmDataBox.alarmData['气象告警'].info)
      break; 
  
    default:
      break;
  }
}
const closeModal = (i) => {
  dialogvisable.value = i;
};
function getAlarmData() {
  getrealTimeInfo().then((res) => {
    alarmDataBox.alarmData = res.data;
    showBox.value = true;
    setListData(res.data);
  });
}
const showAlarmDialog = () => {
  activeKey.value = '1'
  dalogTitle.value = '历史告警'
  sortStr.value = ''
  sortLevelStr.value = ''
  dialogvisable.value = true
  timeList.value = []
  gradeSort(alarmDataBox.alarmData['水位告警'].info)

}
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 = [];
  }
}
let dalogTitle = ref('')
let dalogList = ref([])
// 滚动插件
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

// 滚动插件
let isSwitch = ref(true);
function tabSwitch(itemInfo, title) {
  
  dalogTitle.value = title
  if (alarmDataBox.listData.length == 0) {
    return false;
  }
  if (itemInfo) {
    // dialogvisable.value = true
    isSwitch.value = false;
    alarmDataBox.activeInfo = itemInfo;
    // dalogList.value = itemInfo
    // gradeSort(itemInfo)
  } else {
    alarmDataBox.activeInfo = [];
    isSwitch.value = true;
  }
}
const gradeSort = (itemInfo) => {
  let gradeList = JSON.parse(JSON.stringify(itemInfo))
  // level_id
  let newGradeList = gradeList.sort((a, b) => a.level_id - b.level_id)
  dalogList.value = newGradeList
}
// 查询历史记录
const historyAlarmInfoFn = () => {
  historyAlarmInfo({
    id: activeKey.value,
    start_time: timeList.value[0],
    end_time: timeList.value[1]
  }).then(res => {
    dalogList.value = res.data
  })
}
// 测试滚动数据
let testList = reactive([
  {
    index: 1,
  },
  {
    index: 2,
  },
  {
    index: 3,
  },
]);
let sortStr = ref('')
let sortLevelStr = ref('')
// 日期排序
const sortIcon = () => {
  sortLevelStr.value = ''
  let newDalogList = JSON.parse(JSON.stringify(dalogList.value))
  if (sortStr.value == 'asc') {
    sortStr.value = 'des'
    const sortedItems = newDalogList.sort((a, b) => {
      return new Date(b.time) - new Date(a.time);
    });
    dalogList.value = sortedItems
  } else {
    sortStr.value = 'asc'
    const sortedItems = newDalogList.sort((a, b) => {
      return new Date(a.time) - new Date(b.time);
    });
    dalogList.value = sortedItems

  }
}
const sortLevelIcon = () => {
  sortStr.value = ''
  let newDalogList = JSON.parse(JSON.stringify(dalogList.value))
  if (sortLevelStr.value == 'asc') {
    sortLevelStr.value = 'des'
    const sortedItems = newDalogList.sort((a, b) => {
      return b.level_id - a.level_id;
    });
    dalogList.value = sortedItems
  } else {
    sortLevelStr.value = 'asc'
    const sortedItems = newDalogList.sort((a, b) => {
      return a.level_id - b.level_id;
    });
    dalogList.value = sortedItems

  }
}
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);
  position: relative;

  .title-subTitle {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    color: #377dff;
  }
}

.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: 14px;
      font-weight: 350;
      color: #b8f1f7;
    }
  }
}

.scroll {
  height: 170px;
  overflow: hidden;
}

.tab-list {
  padding: 0 10px;
  height: 176px;
  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: 142px;
  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) {
      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%;
  }
}

.alarm-dialog {
  padding-top: 0px;

  .top-query {
    span {
      margin-left: 20px;
    }
  }

  ::v-deep(.ant-radio-button-wrapper) {
    border: none;
  }

  ::v-deep(.ant-input) {
    border: 1px solid #0084E9 !important;
  }
}
.alarm-content-box {
  font-size: 17px;
  .title {
    display: flex;
    background-color: rgba(43, 135, 248, .2);
    line-height: 40px;
    margin: 20px 20px 0;

    li {
      text-align: center;
    }

    .icon-list-my {
      cursor: pointer;
      position: relative;

      ::v-deep(.anticon-caret-up) {
        position: absolute;
        left: 140px;
        top: 9px
      }

      ::v-deep(.anticon-caret-down) {
        position: absolute;
        left: 140px;
        top: 17px
      }

      .asc {
        color: #fff
      }

      .des {
        color: #fff
      }

      // span:nth-child(2){
      //   position: absolute;
      // }
    }

    li:nth-child(1) {
      width: 60px
    }

    li:nth-child(2) {
      width: 200px;
    }

    li:nth-child(3) {
      flex: 1;
    }

    li:nth-child(4) {
      width: 120px;
      ::v-deep(.anticon-caret-up) {
        position: absolute;
        left: 100px;
        top: 9px
      }

      ::v-deep(.anticon-caret-down) {
        position: absolute;
        left: 100px;
        top: 17px
      }
    }
  }

  .list {
    margin: 0px 20px 0;
    height: 620px;
    overflow-y: auto;

    li {
      border-bottom: 1px solid rgba(43, 135, 248, .2);
      line-height: 40px;
      margin-top: 0px;
      display: flex;

      span {
        display: inline-block;
        margin-left: 0px;
        text-align: center
      }

      span:nth-child(1) {
        width: 60px
      }

      span:nth-child(2) {
        width: 200px;
      }

      span:nth-child(3) {
        flex: 1;
      }

      span:nth-child(4) {
        width: 120px;

        span {
          width: 40px;
          height: 16px;
          position: relative;
          top: 2px;
        }
      }
    }
  }
}
.alarm-tabs{
  padding: 0 20px;
  ::v-deep(.ant-tabs-nav-container){
    font-size: 16px !important;
  }
}
</style>
