<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.toPath)"
        >
          <van-badge :content="item.num" :show-zero="false"> <img class="typeImg" :src="item.icon" alt="" /></van-badge>
          <div class="typeFont">{{ item.name }}</div>
        </div>
      </div>
      <!-- 主要工单内容部分 -->
      <div id="listBox">
        <van-pull-refresh v-model="AllData.refreshing" @refresh="onRefresh">
          <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: 27px; height: 30px" />
                </div>
                <div class="ListTopP">
                  <p
                    style="
                      font-family: Source Han Sans CN;
                      font-weight: bold;
                      font-size: 20px;
                      color: #157fff;
                      line-height: 0px;
                    "
                  >
                    报警信息
                  </p>
                </div>
              </div>
              <div class="ListBottom" v-for="item in AllData.list" :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-list>
        </van-pull-refresh>
        <van-empty description="暂无消息" v-if="AllData.list.length == 0" />
      </div>
    </div>
  </div>
</template>

<script setup name="home_homePage">
import axios from 'axios';
import typeImg1 from '@/assets/images/xxtz.png';
import typeImg2 from '@/assets/images/rwxc.png';
import typeImg3 from '@/assets/images/czgd.png';
import typeImg4 from '@/assets/images/jcgj.png';
import bj_icon from '@/assets/images/bj_icon.png';
import { SeeMessage, queryUserMessageClass } from '@/api/meessageApi.js';
import { getCurrentInstance } from 'vue';
import { showConfirmDialog } from 'vant';
import { useRouter } from 'vue-router';

const { proxy } = getCurrentInstance();
const router = useRouter();

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: [
    {
      name: '消息通知',
      icon: typeImg1,
      num: 0,
      toPath: '',
    },
    {
      name: '任务巡查',
      icon: typeImg2,
      num: 0,
      toPath: '/TaskInspection',
    },
    {
      name: '测站工单',
      icon: typeImg3,
      num: 0,
      toPath: '',
    },
    {
      name: '监测告警',
      icon: typeImg4,
      num: 0,
      toPath: '',
    },
  ],
  // 列表
  list: [{ content: '1' }],
  loading: false,
  finished: false,
  refreshing: false,
  // 接口数据
  search: {
    current: 0,
    size: 10,
    receiver: localStorage.getItem('userNo'), //接收人
    refId: '', //关联编号
    refType: '', //关联类型
    status: '', //状态（未读 unread / 已读 read）
    type: '', //类型（运维工单 ops_work_order）
  },
});

// 获取消息统计
const getMessageCount = () => {
  let params = {
    taskUserId: localStorage.getItem('LoginUserID'),
  };
  queryUserMessageClass(params).then((res) => {
    // console.log(res.data.data);
    if (res && res.data.code == 1) {
      let datas = res.data.data;
      AllData.typeListData[0].num = datas.messageNum; //消息通知
      AllData.typeListData[1].num = datas.taskNum; //任务巡查
      AllData.typeListData[2].num = datas.orderNum; //测站工单
      AllData.typeListData[3].num = datas.alarmNum; //监测告警
    }
  });
};

// 获取当前城市
const getCityName = () => {
  let CityName = '';
  // 安卓拿到的数据
  let res = {
    aoiName: '黄河大街与大梁路交叉口',
    city: '开封市',
    district: '龙亭区',
    lat: 34.8,
    lng: 114.32,
    poiName: '',
    province: '河南省',
    street: '黄河大街与大梁路交叉口北160米',
  };
  AllData.locationName = res.province + res.city + res.district + res.aoiName;
  if (res.city) {
    CityName = res.city.replace(/市/g, '');
  } else {
    CityName = '开封';
  }
  axios
    .get(
      `https://gfapi.mlogcn.com/function/v001/city?location=${CityName}&items=10&area=china&language=CHN&withTz=false&withPoi=false&key=F2hH0eoTQS99jaKr3v4AIWFQkJwRjMAU&output_type=json`
    )
    .then((res) => {
      if (res && res.data.areaList) getWeather(res.data.areaList[0].areacode);
    });
};
// 获取天气信息
const getWeather = (code) => {
  axios
    .get(`https://gfapi.mlogcn.com/weather/v001/now?key=F2hH0eoTQS99jaKr3v4AIWFQkJwRjMAU&areacode=${code}`)
    .then((res) => {
      AllData.weatherInfo = res.data.result.realtime;
    })
    .catch((error) => {});
};
// 获取列表数据
const onLoad = async () => {
  AllData.list = [
    {
      content: '涧水河综合治理工程',
      a: '水位超高',
      b: '07-02 12:20',
    },
    {
      content: '涧水河综合治理工程',
      a: '水位超高',
      b: '07-02 12:20',
    },
    {
      content: '涧水河综合治理工程',
      a: '水位超高',
      b: '07-02 12:20',
    },
    {
      content: '涧水河综合治理工程',
      a: '水位超高',
      b: '07-02 12:20',
    },
  ];
  // if (AllData.refreshing) {
  //   AllData.list = [];
  //   AllData.search.current = 1;
  //   AllData.refreshing = false;
  // } else {
  //   AllData.search.current++;
  // }
  // let res = await messagePage(AllData.search);
  // if (res && res.data.code == 1) {
  //   AllData.list = AllData.list.concat(res.data.data.list);
  //   AllData.loading = false;
  //   if (AllData.list.length >= res.data.data.total) {
  //     AllData.finished = true;
  //   }
  // }
  AllData.loading = false;
};
// 列表数据刷新
const onRefresh = () => {
  // 清空列表数据
  AllData.finished = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  AllData.loading = true;
  onLoad();
};
// 点击消息处理
const messageClick = (item) => {
  if (item.status == 'read') {
    // 消息已阅读
    // proxy.showSuccessToast("此消息已阅读");
    TypeToPath(item.type);
  } else {
    showConfirmDialog({
      // message: `消息已查看,是否对 ${item.title} 进行处理?`,
      message: item.content,
      confirmButtonText: '去处理',
      cancelButtonText: '仅查看',
    })
      .then(() => {
        console.log(1);
        SeeMessages(item, true);
      })
      .catch(() => {
        console.log(2);
        SeeMessages(item, false);
      });
  }
};
// 阅读消息
const SeeMessages = async (item, bol) => {
  const res = await SeeMessage(item.id);
  if (res && res.data.code == 1) {
    item.status = 'read';
    if (bol) {
      // 需要进行跳转
      TypeToPath(item.type);
    }
  }
};
// 根据消息类型跳转对应的列表页
const TypeToPath = (type) => {
  console.log(type);
  switch (type) {
    case 'taskpatrol':
      console.log('任务巡查');
      router.push('/PatrolList');
      break;
    case 'station':
      console.log('测站工单');
      router.push('/measuringStationList');

      break;
    case 'alarm':
      console.log('监测告警');
      router.push('/monitorList');

      break;
    case 'other':
      console.log('其他工单');

      break;

    default:
      console.log('消息通知');
      router.push('/message');
      break;
  }
};

onMounted(() => {
  getCityName(); //获取当前城市
  // onLoad();
  // getMessageCount();
});
</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% - 360px);
    position: relative;
    top: -50px;
    left: 30px;
    // background: red;
    #typeBox {
      height: 190px;
      background: #ffffff;
      border-radius: 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      box-shadow: 0px 5px 20px #00000066;

      .typeList {
        width: 25%;
        height: 190px;
        text-align: center;
        box-sizing: border-box;
        padding-top: 35px;
        .typeImg {
          width: 80px;
          height: 80px;
        }
        .typeFont {
          font-family: PingFang SC;
          font-size: 20px;
          color: #000000;
          line-height: 40px;
          text-align: center;
        }
      }
    }
    #listBox {
      width: 100%;
      height: calc(100% - 200px);
      overflow: auto;
      margin-top: 10px;
      // background: red;
      .ListClass {
        width: 100%;
        height: auto;
        background: #ffffff;
        border-radius: 10px;
        margin-bottom: 20px;
        // background: blanchedalmond;
        .ListTop {
          width: 100%;
          height: 70px;
          // box-sizing: border-box;
          // border-bottom: 1px solid #eaeaea;
          // font-family: PingFang SC;
          // font-weight: bold;
          // font-size: 28px;
          // color: #566170;
          // line-height: 70px;
          // padding-left: 30px;
          // white-space: nowrap; /* 不换行 */
          // overflow: hidden; /* 隐藏超出部分 */
          // text-overflow: ellipsis; /* 显示省略号 */
          // background: red;
          display: flex;
          .ListTopImg {
            width: 20%;
            height: 70px;
            // background: #5594ff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .ListTopP {
            width: 80%;
            height: 70px;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
        }
        .ListBottom {
          width: 100%;
          display: flex;
          // flex-direction: row;
          // flex-wrap: nowrap;
          // background: red;
          .LeftFont {
            width: 90%;
            // background: yellow;
            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; /* 显示省略号 */
              // background: red;
              display: flex;
              // justify-content: center;
              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; /* 显示省略号 */
              // background: red;
              display: flex;
              // justify-content: center;
              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; /* 显示省略号 */
              // background: red;
              display: flex;
              // justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
</style>