<template>
  <div class="main">
    <div class="main_in">
      <weatherTitle :title="'测站统计'" refreshName="statisRefreshName" />
      <div class="height-0" v-show="isSwitch == 1">
        <div class="statistics-data">
          <div @click="settab2(realDataNum.rt_num)">
            <div> <img src="../../../assets/images/weatheHome/icon-5511.png" /> </div>
            <div>
              <div>累计实时数据</div>
              <div>{{ thousands(realDataNum.rt_num.rt_num) }}</div>
            </div>
          </div>
          <div @click="settab2(realDataNum.month_num)">
            <div><img src="../../../assets/images/weatheHome/icon-5512.png" /></div>
            <div>
              <div>本月实时数据</div>
              <div>{{ thousands(realDataNum.month_num.month_num) }}</div>
            </div>
          </div>
        </div>
        <div class="data-box">
          <div>
            <div class="top-text">{{ num.totai }}<span>个</span></div>
            <div class="total-text">测站总数</div>
          </div>
          <div class="data-list">
            <div v-for="(item, index) in StStatsData.StStatsData" :key="index" @click="tabSwitch(item,2)">
              <span>{{ item.type_name }}：</span><span>{{ item.all_num }}个</span>
            </div>
          </div>
        </div>
        <div class="new-normal-abnormal">
          <div @click="isOkFn(1)">
            <span>通信正常：</span>
            <span>{{ num.normal }}</span>
            <span>个</span>
          </div>
          <div @click="isOkFn(2)">
            <span>通信异常：</span>
            <span>{{ num.abnormal }}</span>
            <span>个</span>
            <img src="../../../assets/images/weatheHome/solid-icon.png" />
          </div>
        </div>
      </div>
      <div v-show="isSwitch == 2">
        <div class="qx-table">
          <div class="qx-table-top">
            <div style="width: 30%"> 测站名称 </div>
            <div style="width: 30%"> 状态 </div>
            <div style="width: 40%"> 最近采集时间 </div>
          </div>
          <div class="qx-table-box">
            <div v-for="(item, index) in itemList" :key="index" @click="openModal(item)">
              <div style="width: 30%"> {{ item.st_name }} </div>
              <div style="width: 30%" :class="{ 'active-abnormal': item.state != 0 }"> {{ item.state == 0 ? '正常' : '异常' }} </div>
              <div style="width: 40%"> {{ item.time }} </div>
            </div>
          </div>
          <div class="deviceBack" @click="tabSwitch('',1)">
            <img :src="doubleScreenBack" class="toolImage" />
          </div>
        </div>
      </div>
      <div v-show="isSwitch == 3">
        <div class="qx-table">
          <div class="qx-table-top">
            <div style="width: 50%"> 要素类型 </div>
            <div style="width: 50%"> 总采集数 </div>
          </div>
          <div class="qx-table-box">
            <div v-for="(item, index, value) in tab2List" :key="index" @click="openModal(item)">
              <div style="width: 50%"> {{ index }} </div>
              <div style="width: 50%"> {{ item }} </div>
            </div>
          </div>
          <div class="deviceBack" @click="tabSwitch('',1)">
            <img :src="doubleScreenBack" class="toolImage" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue';
import progressBar from '../../../components/progressBar/index.vue';
import weatherTitle from '../../../components/Title/weatherTitle.vue';
import doubleScreenBack from '/@/assets/images/doubleScreenBack.png';
import { useBasicStore } from '/@/store/modules/basicData';
import { getStStats, getRealDataNum } from '/@/api/swHome/index';
import { fontSize } from '../../../utils/util';
import eventBus from '/@/utils/eventBus';
import { useMapStore } from '/@/store/modules/map';

const mapStore = useBasicStore();
const mapStore2=useMapStore()
const openModal=(item)=>{
  mapStore2.setstInfo(item)
}
let isSwitch = ref(1);
// 列表数据获取开始
let itemList = reactive([]);
function tabSwitch(item,num) {
  isSwitch.value = num;
  console.log(item,907)
  if (item) {
    itemList = item.detail;
  }
}
let tab2List = ref({})
const settab2 = (item) => {
  isSwitch.value = 3;
  tab2List.value = item.detail
}
// 刷新数据
eventBus.on('statisRefreshName', () => {
  isSwitch.value = 2;
  getStStats().then((res) => {
    StStatsData.StStatsData = res.data;
    countNum(StStatsData.StStatsData);
  });
  // 获取实时数据统计
  getRealDataNum().then((res) => {
    realDataNum.month_num = res.data[1];
    realDataNum.rt_num = res.data[0];
  });
});
// 列表数据获取结束
function thousands(num) {
  var str = num+''
  var reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
  return str.replace(reg, '$1,');
}
let StStatsData = reactive({
  StStatsData: {},
});
let realDataNum = reactive({
  month_num: {},
  rt_num: {},
});
onMounted(() => {
  getStStats().then((res) => {
    StStatsData.StStatsData = res.data;
    countNum(StStatsData.StStatsData);
  });
  // 获取实时数据统计
  getRealDataNum().then((res) => {
    realDataNum.month_num = res.data[1];
    realDataNum.rt_num = res.data[0];
  });
});
// 测站总数
let num = reactive({
  totai: 0,
  normal: 0,
  abnormal: 0,
  normalPercent: 0,
  abnormalPercent: 0,
  normalArr: [],
  abnormalArr: [],
});
function countNum(StStatsData) {
  num.totai = 0;
  num.normal = 0;
  num.normalArr = [];
  num.abnormalArr = [];
  StStatsData.map((item) => {
    num.totai += item.all_num;
    num.normal += item.ok_num;
    item.detail.forEach((element) => {
      if (element.state == 0) {
        num.normalArr.push(element);
      } else {
        num.abnormalArr.push(element);
      }
    });
  });

  num.abnormal = num.totai - num.normal;
  num.normalPercent = ((num.normal / num.totai) * 100).toFixed(2);
  num.abnormalPercent = ((num.abnormal / num.totai) * 100).toFixed(2);
}
function isOkFn(type) {
  isSwitch.value = 2;
  if (type == 1) {
    itemList = num.normalArr;
  } else {
    itemList = num.abnormalArr;
  }
}
//获取stDetailInfo结束
</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);
}
.data-box {
  display: flex;
  & > div:nth-child(1) {
    width: 116px;
    height: 128px;
    background: url('../../../assets/images/weatheHome/Group-bg.png') no-repeat;
    background-size: 100%;
    margin-left: 16px;
    text-align: center;
    .top-text {
      font-weight: bold;
      background: linear-gradient(181deg, #3df9ff 28%, #287eff 96%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      font-size: 28px;
      font-family: Source Han Sans CN;
      span {
        font-size: 14px;
      }
    }
    .total-text {
      font-size: 14px;
      color: #ceecff;
      font-weight: 500;
      font-family: Source Han Sans CN;
    }
  }
}
.data-list {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  margin-left: 30px;
  flex: 1;
  & > div {
    width: 50%;
    font-size: 14px;
    background: linear-gradient(181deg, #3ddfff 25%, #287eff 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    span:nth-child(1) {
      background: linear-gradient(181deg, #3ddfff 25%, #287eff 99%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      display: inline-block;
      min-width: 80px;
    }
    span {
      color: #fff;
      background: linear-gradient(181deg, #fff 28%, #fff 96%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }
}
.normal-abnormal {
  display: flex;
  & > div {
    width: 50%;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
  }
  & > div:nth-child(1) {
    background: linear-gradient(0deg, #00f7ff 0%, #007ff6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  & > div:nth-child(2) {
    background: linear-gradient(180deg, #fa1414 0%, #ff6200 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
}
.normal-border {
  display: inline-block;
  width: 2px;
  height: 20px;
  position: relative;
  top: 6px;
  background: linear-gradient(270deg, rgba(88, 215, 250, 0) 0%, #58d7fa 51%, rgba(88, 215, 250, 0) 100%);
  margin: 0 10px;
}
.abnormal-border {
  display: inline-block;
  width: 2px;
  height: 20px;
  position: relative;
  top: 6px;
  background: linear-gradient(270deg, rgba(255, 98, 0, 0) 0%, #ff6200 51%, rgba(255, 98, 0, 0) 100%);
  margin: 0 10px;
}
.progress-inner {
  padding-top: 10px;
}

// 表格数据
.qx-table {
  height: 258px;
  padding-left: 20px;
  .qx-table-top {
    display: flex;
  }
  .qx-table-box {
    height: 194px;
    overflow: scroll;
    cursor: pointer;
    & > 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;
      }
    }
    & > 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-0 {
  // height: 20vh;
  height: 258px;
}
.active-abnormal {
  color: #ff1515;
  border: 0px !important;
}
.statistics-data {
  display: flex;
  & > div {
    width: 50%;
    display: flex;
    cursor: pointer;
    & > div:nth-child(2) {
      & > div:nth-child(1) {
        color: #3adeff;
        font-size: 12px;
      }
      & > div:nth-child(2) {
        font-size: 20px;
        font-weight: 800;
        background: linear-gradient(2deg, #76fbff 6%, #ffffff 72%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
      }
    }
  }
  & > div:nth-child(1) {
    padding-left: 30px;
    img {
      position: relative;
      top: -6px;
      margin-right: 10px;
    }
  }
  & > div:nth-child(2) {
    padding-left: 10px;
    img {
      position: relative;
      top: -14px;
      margin-right: 10px;
    }
  }
}
.new-normal-abnormal {
  display: flex;
  height: 50px;
  background: rgba(0, 175, 255, 0.14);
  margin: 10px 14px;
  line-height: 50px;
  & > div {
    cursor: pointer;
    width: 50%;
    text-align: center;
    span {
      display: inline-block;
      line-height: 50px;
    }
    span:nth-child(1) {
      color: #ceecff;
      font-weight: 500;
    }
  }
  & > div:nth-child(1) {
    span:nth-child(2) {
      background: linear-gradient(181deg, #3df9ff 27%, #287eff 98%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      color: #ceecff;
      font-weight: 500;
      font-size: 24px;
    }
    span:nth-child(3) {
      background: linear-gradient(181deg, #3df9ff 27%, #287eff 98%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
  }
  & > div:nth-child(2) {
    position: relative;
    img {
      position: absolute;
      left: 0rpx;
      top: 10px;
    }
    span:nth-child(2) {
      background: linear-gradient(181deg, #ffbdb6 1%, #ff2020 98%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      color: #ceecff;
      font-weight: 500;
      font-size: 24px;
    }
    span:nth-child(3) {
      background: linear-gradient(181deg, #ffbdb6 1%, #ff2020 98%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
  }
}
</style>
