<template>
  <div class="patrolTaskMonitor">
    <div class="MonitorTabNF">
      <!-- 顶部切换卡 -->
      <div class="topTabsNF">
        <div
          class="tabsList"
          v-for="item in AllData.TopTabsData"
          :key="item.status"
          @click="topTabsChange(item)"
          :class="{ tabsListActive: AllData.ActiveID == item.status }"
        >
          <div class="box">{{ item.statusName }}</div>
        </div>
      </div>
      <!-- 中部搜索框 -->
      <div class="MonitorBox">
        <div>新建 {{ AllData.Newlybuild || '--' }} 个</div>
        <div style="margin-left: 10px">共享0个</div>
      </div>
    </div>
    <!-- 下部数据列表 -->
    <div class="MonitorList">
      <van-list :finished="finished" finished-text="已经到底了~~" :offset="50">
        <div class="contPart" @click="gotoDetail(item)" v-for="item in AllData.dataList" :key="item">
          <!-- 源头地块  -->
          <div class="content" v-if="AllData.ActiveID == '1'">
            <p>站点名称: {{ item.zdd }}</p>
            <p>水位(m): {{ item.sw }}</p>
            <p>流速(m/s): {{ item.ls }}</p>
            <p>浊度: {{ item.zd }}</p>
            <p style="width: 100%">时间: {{ item.sj }}</p>
          </div>
          <!-- 雨量站  -->
          <div class="content" v-if="AllData.ActiveID == '2'">
            <p>站点名称: {{ item.stName }}</p>
            <p>类型: {{ item.buildType == 'owner' ? '新建' : item.buildType == 'share' ? '共享' : '--' }}</p>
            <p>今日降雨量(mm): {{ item.pd }}</p>
            <p>一小时降雨量(mm): {{ item.ago1h }}</p>
          </div>
          <!-- 管网监测  -->
          <div class="content" v-if="AllData.ActiveID == '3'">
            <p>站点名称: {{ item.zdd }}</p>
            <p>管网类型: {{ item.sw }}</p>
            <p>水位(m): {{ item.ls }}</p>
            <p>流速(m/s): {{ item.zd }}</p>
            <p>浊度: {{ item.zd }}</p>
            <p style="width: 100%">时间: {{ item.sj }}</p>
          </div>
          <!-- 渍水点  -->
          <div class="content" v-if="AllData.ActiveID == '4'">
            <p>站点名称: {{ item.zdd }}</p>
            <p>类型: {{ item.sw }}</p>
            <p>水位(m): {{ item.ls }}</p>
            <p style="width: 100%">观测时间: {{ item.sj }}</p>
          </div>
          <!-- 河道断面 -->
          <div class="content" v-if="AllData.ActiveID == '6'">
            <p>监测站点名称: {{ item.stName }}</p>
            <p>类型: {{ item.buildType == 'owner' ? '新建' : item.buildType == 'share' ? '共享' : '--' }}</p>
            <p>水位(m): {{ item.z }}</p>
            <p style="width: 100%">观测时间: {{ item.dataTime }}</p>
          </div>
          <!-- 泵站监测 -->
          <div class="content" v-if="AllData.ActiveID == '7'">
            <p>厂站名称: {{ item.zdd }}</p>
            <p>系统类型: {{ item.sw }}</p>
            <p>规模(m³/s): {{ item.ls }}</p>
            <p>当前前池水位(m): {{ item.ls }}</p>
            <p>起抽水位(m/s): {{ item.ls }}</p>
            <p style="width: 100%">观测时间: {{ item.sj }}</p>
          </div>
        </div>
      </van-list>

      <van-empty v-if="AllData.dataList.length == 0" style="margin-top: 100px" description="暂无数据" />
    </div>
  </div>
</template>

<script setup>
import { realtimeRainfallStatistics, realtimeDataListByType } from '@/api/MonitoringInformation.js';
import { useStore } from '@/pinia/store.js';
import { useRouter } from 'vue-router';
const router = useRouter();
const pinias = useStore();
const AllData = reactive({
  Newlybuild: '',
  // 顶部tab数据源
  TopTabsData: [
    { status: '2', statusName: '雨量站' },
    { status: '6', statusName: '河道监测' },
    { status: '1', statusName: '源头地块' },
    { status: '3', statusName: '管网监测' },
    { status: '4', statusName: '渍水点' },
    { status: '7', statusName: '泵站监测' },
  ],
  // 顶部tab选取项
  ActiveID: '2',
  // 数据列表
  dataList: [],
});
const finished = ref(false);
// 顶部tab切换事件
const topTabsChange = (item) => {
  AllData.ActiveID = item.status;
  AllData.dataList = [];
  AllData.Newlybuild = '';
  if (AllData.ActiveID == '1') {
    AllData.dataList = [];
  } else if (AllData.ActiveID == '2') {
    getRealtimeRain();
  } else if (AllData.ActiveID == '3') {
    AllData.dataList = [];
  } else if (AllData.ActiveID == '4') {
    AllData.dataList = [];
  } else if (AllData.ActiveID == '6') {
    getRealtimedRiver();
  } else {
    AllData.dataList = [];
  }
};

//获取雨量站信息
const getRealtimeRain = async () => {
  pinias.showLoading();
  try {
    const params = {
      monitorTargetType: 'rainfall',
      orderBy: 'tt desc',
    };
    const res = await realtimeRainfallStatistics(params);
    if (res && res.code == 200) {
      let data = res.data;
      AllData.dataList = data;
      AllData.Newlybuild = AllData.dataList.length;
      pinias.hideLoading();
      finished.value = true;
    }
  } catch (error) {
    console.log(error);
  }
};
//河道监测信息
const getRealtimedRiver = async (id) => {
  pinias.showLoading();
  let params = {
    monitorTargetType: 'river',
    belongType: 'river',
    belongId: '',
  };
  let res = await realtimeDataListByType(params);
  if (res && res.code == 200) {
    let data = res.data;
    data.forEach((element) => {
      if (element.monitorValueList && element.monitorValueList.length > 0) {
        element.dataTime = element.monitorValueList[0].tt;
      }
    });
    AllData.dataList = data;
    AllData.Newlybuild = AllData.dataList.length;
    pinias.hideLoading();
    finished.value = true;
  }
};

// 跳转详情
const gotoDetail = (item) => {
  console.log(item, '11111');
  router.push({
    path: '/homeTrendDetail',
    query: {
      active: AllData.ActiveID,
      stName: item.stName,
      stCode: item.stCode,
    },
  });
};
onMounted(() => {
  topTabsChange(AllData.TopTabsData[0]);
});
</script>

<style lang="less">
.patrolTaskMonitor {
  width: 100%;
  height: 100%;
  background: #fafafa;
  .MonitorTabNF {
    width: 100%;
    //页面布局样式
    .topTabsNF {
      width: 100%;
      height: 100px;
      background: #ffffff;
      box-shadow: 0px 12px 31px 0px rgba(18, 69, 101, 0.1);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      display: flex;
      // flex-wrap: wrap;
      // justify-content: flex-start;
      // align-content: flex-end;
      // flex-direction: row;
      overflow-x: auto;
      // background: red;
      .tabsList {
        font-weight: 500;
        color: #585858;
        height: 60px;
        font-size: 25px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #9f9f9f;
        margin: auto 15px;
        // background: yellow;
        .van-badge__wrapper {
          .van-badge--fixed {
            top: 0px !important;
            background: #ff5757 !important;
          }
        }
      }

      .tabsListActive {
        font-size: 28px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: bold;
        color: #000000;
        position: relative;

        &:after {
          content: '';
          display: block;
          position: absolute;
          bottom: 5px;
          left: 50%;
          margin-left: -50%;
          width: 100%;
          height: 3px;
          background: #121212;
          opacity: 1;
          border-radius: 2px;
        }
      }
    }
    .MonitorBox {
      background: #ededed;
      opacity: 1;
      height: 50px;
      width: 100%;
      display: flex;
      position: relative;
      box-sizing: border-box;
      padding: 11px 30px 30px 10px;
      font-size: 22px;
    }
  }

  .MonitorList {
    width: 100%;
    height: calc(100vh - 150px - var(--van-nav-bar-height));
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    // background: yellowgreen;
    .contPart {
      box-shadow: 0px 5px 21px 0px rgba(18, 69, 101, 0.15);
      padding: 20px;
      background: #fff;
      margin: 0px auto 20px auto;
      width: 94%;
      border-radius: 10px;
      font-size: 24px;
      color: #565656;

      .content {
        display: flex;
        flex-wrap: wrap;

        p {
          width: 100%;
          margin: 10px auto;
          line-height: 30px;
        }
      }
    }
  }
}
</style>