<template>
  <div id="home_homePage">
    <!-- <van-nav-bar safe-area-inset-top /> -->
    <!-- 顶部天气数据与定位数据 -->
    <div id="HeaderBG">
      <div id="HeaderTop">
        <div id="HeaderName">运维巡查系统</div>
        <div id="locationName"><van-icon name="location-o" />{{ AllData.locationName }}</div>
        <div id="Weather1">{{ AllData.weatherInfo.text }}</div>
      </div>
      <div id="Headerbottom">
        <div class="Headerbottom_1">
          <img src="@/assets/images/sstq.png" alt="" />
          <div class="concent_font">实时天气</div>
        </div>
        <div class="Headerbottom_2">
          <div class="concent1">{{ AllData.weatherInfo.temp }}℃</div>
          <div class="concent_font">温度</div>
        </div>
        <div class="Headerbottom_3">
          <div class="concent1">{{ AllData.weatherInfo.wind_class }}</div>
          <div class="concent_font">{{ AllData.weatherInfo.wind_dir }}</div>
        </div>
      </div>
    </div>
    <div id="CentBox">
      <!-- 中部菜单类型 -->
      <div id="typeBox">
        <div
          class="typeList"
          v-for="(item, index) in AllData.typeListData"
          :key="index"
          @click="$router.push(item.path)"
        >
          <img class="typeImg" :src="getImageUrl(item.picUrl, 'images')" alt="" />
          <div class="typeFont">{{ item.name }}</div>
        </div>
      </div>
      <!-- 报警信息 -->
      <div id="listBox">
        <van-list
          v-model:loading="AllData.loading"
          :finished="AllData.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="ListClass">
            <div class="ListTop">
              <div class="ListTopImg">
                <img :src="bj_icon" alt="" style="width: 20px; height: 20px" />
              </div>
              <div class="ListTopP">
                <p>报警信息</p>
              </div>
            </div>
            <div class="ListBottomA" v-if="AllData.dataList.length > 0">
              <div class="ListBottom" v-for="item in AllData.dataList" :key="item" :title="item">
                <div class="LeftFont">
                  <p class="P1">{{ item.content }}</p>
                  <p class="P2">{{ item.a }}</p>
                  <p class="P3">{{ item.b }}</p>
                </div>
              </div>
            </div>
            <van-empty description="暂无报警信息" v-if="AllData.dataList.length == 0" />
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script setup name="home_homePage">
import axios from 'axios';
import bj_icon from '@/assets/images/bj_icon.png';
import { getImageUrl, getCurrentPositon } from '@/utils/common.js';
import { appMenuGetRouters } from '@/api/publicApi.js';
import { getCurrentInstance } from 'vue';
import { useStore } from '@/pinia/store.js';

const pinias = useStore();
const { proxy } = getCurrentInstance();

const AllData = reactive({
  locationName: '',
  weatherInfo: {
    text: '阴',
    code: '02',
    temp: 19.8,
    feels_like: 20,
    rh: 40,
    wind_class: '1级',
    wind_speed: 0.9,
    wind_dir: '南风',
    wind_angle: 187,
    prec: 0.0,
    clouds: 95,
    vis: 8500,
    pressure: 1017,
    dew: 5,
    uv: 2,
  },
  typeListData: [],
  // 列表
  dataList: [],
  loading: false,
  finished: false,
  refreshing: false,
});

// 获取天气信息
const getWeather = () => {
  axios
    .get(`https://gfapi.mlogcn.com/weather/v001/now?key=F2hH0eoTQS99jaKr3v4AIWFQkJwRjMAU&areacode=101180801`)
    .then((res) => {
      AllData.weatherInfo = res.data.result.realtime;
    })
    .catch((error) => {});
};
// 获取列表数据
const onLoad = async () => {
  AllData.loading = false;
};

/**
 * 获取菜单数据
 */
const getMenu = () => {
  pinias.showLoading();
  // 渲染全部菜单
  appMenuGetRouters().then((res) => {
    if (res && res.code == 200) {
      AllData.typeListData = res.data;
    }
    pinias.hideLoading();
  });
};
onMounted(() => {
  getMenu();
  getWeather(); //获取天气
  // 安卓拿到的数据
  getCurrentPositon((lng, lat, address) => {
    AllData.locationName = address;
  });
});
</script>

<style lang="less" scoped>
#home_homePage {
  width: 100%;
  height: 100%;
  background: #f2f1f6;
  #HeaderBG {
    width: 100%;
    height: 410px;
    // background: linear-gradient(90deg, #3d84ff 0%, #53c0fe 100%);
    background: url('@/assets/images/login/head_img.png');
    box-sizing: border-box;
    padding-top: 30px;
    #HeaderTop {
      width: 100%;
      height: 160px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      padding: 0 32px;
      box-sizing: border-box;
      #HeaderName {
        height: 90px;
        line-height: 120px;
        font-family: SourceHanSansCN-Heavy;
        font-weight: bold;
        font-size: 50px;
        color: #ffffffff;
        width: calc(100% - 110px);
        font-style: oblique;
      }
      #locationName {
        height: 70px;
        line-height: 60px;
        width: calc(100% - 110px);
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24px;
        color: #ffffff;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
      #Weather1 {
        width: 110px;
        height: 160px;
        line-height: 160px;
        text-align: center;
        font-weight: bold;
        font-size: 2rem;
        color: #ffffff;
      }
    }
    #Headerbottom {
      width: calc(100% - 60px);
      height: 130px;
      box-sizing: border-box;
      margin-left: 30px;
      border-radius: 10px;
      background: #ffffff30;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      .Headerbottom_1 {
        width: 150px;
        height: 130px;
        background: #ffffff10;
        text-align: center;
        box-sizing: border-box;
        padding-top: 20px;
        img {
          width: 50px;
          height: 50px;
        }
        .concent_font {
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 20px;
          color: #ffffff;
          line-height: 30px;
          height: 40px;
          text-align: center;
        }
      }

      .Headerbottom_2,
      .Headerbottom_3 {
        width: calc(50% - 75px);
        height: 130px;
        box-sizing: border-box;
        padding-top: 25px;

        .concent_font {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 22px;
          color: #ffffff;
          line-height: 40px;
          height: 40px;
          text-align: center;
        }
      }
      .Headerbottom_2 {
        position: relative;
        &::after {
          content: '';
          display: block;
          width: 1px;
          height: 40px;
          background: #ffffff;
          position: absolute;
          right: 0;
          top: 45px;
        }
      }

      .concent1 {
        height: 50px;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 45px;
        color: #ffffff;
        line-height: 40px;
        text-align: center;
      }
    }
  }

  #CentBox {
    width: calc(100% - 60px);
    height: calc(100% - 368px);
    position: relative;
    top: -50px;
    left: 30px;
    // background: red;
    #typeBox {
      background: #ffffff;
      border-radius: 10px;
      display: flex;
      flex-wrap: wrap;
      box-shadow: 0px 5px 20px #00000066;
      .typeList {
        width: 25%;
        text-align: center;
        margin: 20px 0px;
        .typeImg {
          width: 80px;
          height: 80px;
        }
        .typeFont {
          line-height: 40px;
          text-align: center;
        }
      }
    }
    #listBox {
      width: 100%;
      margin-top: 20px;
      .ListClass {
        width: 100%;
        background: #ffffff;
        border-radius: 10px;
        // background: yellow;
        .ListTop {
          width: 100%;
          height: 70px;
          display: flex;
          .ListTopImg {
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0px 30px;
            // background: red;
          }
          .ListTopP {
            width: 80%;
            height: 70px;
            display: flex;
            align-items: center;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 28px;
            color: #157fff;
            // background: red;
          }
        }
        .ListBottomA {
          width: 100%;
          height: 500px;
          overflow: auto;
          .ListBottom {
            width: 100%;
            display: flex;
            .LeftFont {
              width: 90%;
              border-bottom: 1px solid #eaeaea;
              margin: auto;
              display: flex;
              .P1 {
                width: 50%;
                min-height: 80px;
                margin: 0px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 24px;
                color: #121212;
                overflow: hidden; /* 隐藏超出部分 */
                text-overflow: ellipsis; /* 显示省略号 */
                display: flex;
                align-items: center;
              }
              .P2 {
                width: 25%;
                min-height: 80px;
                margin: 0px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 24px;
                color: #121212;
                overflow: hidden; /* 隐藏超出部分 */
                text-overflow: ellipsis; /* 显示省略号 */
                display: flex;
                align-items: center;
              }
              .P3 {
                width: 25%;
                min-height: 80px;
                margin: 0px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 24px;
                color: #121212;
                overflow: hidden; /* 隐藏超出部分 */
                text-overflow: ellipsis; /* 显示省略号 */
                display: flex;
                align-items: center;
              }
            }
          }
        }
      }
    }
  }
}
</style>