<template>
    <view class="container">
        <!-- 滚动 -->
        <view class="scrollBox">
			<u-status-bar ></u-status-bar>
            <!-- 个人信息 -->
            <HeaderUser />
            <!-- 菜单 -->
            <view class="navBar">
                <div class="navList" v-for="(item, index) in menu" :key="index">
                    <div class="navItem" @click="myNavigateTo(item.url, item.value)">
                        <div class="navIcon">
                            <image
                                style="width: 100%; height: 100%"
                                :src="item.icon"
                                mode="aspectFit"
                            ></image>
                        </div>
                        <div class="navTxt">{{ item.value }}</div>
                    </div>
                </div>
            </view>
            <SkWarn />
            <SkMaxDrp/>
            <Forecast24 />
        </view>


        <!-- 底部 -->
        <view
            class="info_24"
            :style="{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                padding: '5px 0',
                margin: '0',
                zIndex:'1',
                boxShadow: '0px 0px 1px #eee',
            }"
            >
            <image
                :style="{ width: '20px', height: '20px', marginRight: '10px' }"
                src="../../static/logoc.png"
            ></image>
            <div>技术支持: 湖北鲧石物联科技有限公司</div>
        </view>
    </view>
</template>

<script>
const dataType = {
  Monday: "星期一",
  Tuesday: "星期二",
  Wednesday: "星期三",
  Thursday: "星期四",
  Friday: "星期五",
  Saturday: "星期六",
  Sunday: "星期天",
};
import HeaderUser from './headerUser.vue'
import Forecast24 from './forecast24.vue'
import SkWarn from './skWarn.vue'
import SkMaxDrp from './skMaxDrp.vue'

import moment from "moment";
export default {
    components: {
        // WarnSwiper,
        HeaderUser,
        Forecast24,
        SkWarn,
        SkMaxDrp,
    },
    data() {
        return {
            monthDay: "",
            dataType,
            default_src: uni.getStorageSync("avatar"),
            tableData: [],
            changeBool: false,
            imgList: {},
            menu:[
                {
                    value: "视频监视",
                    key: 1,
                    icon: "../../static/tabs/spjk.png",
                    url: "/pages/videoPage/index",
                },
                {
                    value: "雨水情监测",
                    key: 2,
                    icon: "../../static/tabs/yq.png",
                    url: "/pages/water/water",
                },
                {
                    value: "安全监测",
                    key: 3,
                    icon: "../../static/tabs/aqjc.png",
                    url: "/pages/gqzq/index",
                }
            ],
            userList: {},
        
        };
    },
    onPullDownRefresh() {
      // this.getImgs();
    },
    computed: {
    },
    watch: {
    },
    methods: {
        async getSwiperList() {
            try {
                const res = await uni.$http.get("/sys/getLoginInfo");
                console.log("--1-", res.data);
                this.userList = res.data;

                console.log("--1-", this.userList);
            } catch (e) {
                uni.$showMsg();
            }
        },
        getDataTime() {
            this.monthDay = moment().format("MM月DD日");
            this.dayOfWeek = moment().format("dddd");
            this.date = moment().format("MM月DD日HH时");
            this.ydate = moment().subtract(1, "days").format("MM月DD日HH时");
            console.log("moment11", this.date, this.ydate);
            let d1 = moment().format("YYYYMMDD");
            let h1 = moment().format("HH") >= 20 ? "20" : "08";

            this.tm = d1 + h1;
        },
        myNavigateTo(url, menu2) {
            uni.navigateTo({
                url: url, // 跳转到对应路径的页面
            });
            this.setInsert(menu2);
        },
        // 区域 /weather/area
        async getWeatherArea() {
          try {
            const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", {
              tm: this.tm,
            });
            console.log("--44-", res);
            this.tableData = res;
            // this.userList = res.data

            // console.log('--333-', this.tableData)
          } catch (e) {
            uni.$showMsg();
          }
        },
        async getImgs() {
          let h = moment().format("HH");
          let m = moment().format("mm");
          uni.request({
            url: "http://223.75.53.124:8005/grb/latest",
            success: (res) => {
              const myTm = res.data.data.tm;
              if (myTm) {
                uni.request({
                  url: "http://223.75.53.124:8005/grb/rainimglist",
                  data: {
                    tm: moment(myTm).format("YYYYMMDDHH"),
                  },
                  success: (res) => {
                    console.log(res.data.data);
                    this.imgList = res.data.data;

                    // let inx = restm(h)

                    // this.imgHours = res.data.data.imgHours[inx]

                    let tm = moment().add(1, "days").format("MM月DD日");
                    let tm2 = moment().format("MM月DD日");
                    this.imgData = [`${tm2}08时`, `${tm}08时`];
                    // this.imgHourstm = [`${tm2}${h + 1}时`, `${tm2}${h + 2}时`]
                  },
                });
              }
            },
          });
        },
        previewImage(item) {
          uni.previewImage({
            urls: [item],
            longPressActions: {
              itemList: ["发送给朋友", "保存图片", "收藏"],
              success: function (data) {
                console.log(
                  "选中了第" +
                    (data.tapIndex + 1) +
                    "个按钮,第" +
                    (data.index + 1) +
                    "张图片"
                );
              },
              fail: function (err) {
                console.log(err.errMsg);
              },
            },
          });
        },
        changeTable(val) {
          this.changeBool = !this.changeBool;
          if (val) {
            this.getWeatherArea();
          }
          console.log("this.changeBool", this.changeBool);
        },
    },
    onLoad() {
        this.getSwiperList();
        this.getDataTime();
    },
    onShow() {
      this.getImgs();
    },
};
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    overflow: hidden;
    font-size: 14px;
    line-height: 24px;
    background-color: #f3f5f8;
    display: flex;
    flex-direction: column;
    align-content: space-between
}
.scrollBox{
    flex: 1;
    overflow-y: scroll;
}
.footerBox{
    
}
.info {
  height: 100rpx;
  background-color: #007afd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  color: #fff;
}
.left {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  color: #007afd;
  line-height: 50px;
}
.info_name {
  margin-left: 16rpx;
}
.right {
  text-align: center;
}
.navBar {
  margin-bottom: 10px;
  background: #ffffff;
  padding: 20px 0;
  box-shadow: 0px 0px 5px #eee;
  /* text-align: center; */
  display: flex;
  justify-content: start;
  align-items: center;
}
.navList {
//   margin-right: 25px;
  text-align: center;
}
.navItem{
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.navIcon {
  position: relative;
  width: 30px;
  height: 30px;

  padding: 10px;
  background-color: #437cf2;
  border-radius: 10px;
  /* border-radius: 10px;
    background-color: #007afd; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.readStatus {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #de2433;
}
.warn {
  background-color: #fff;
  color: #de2433;
  padding: 18rpx 20rpx;
  text-align: left;
  margin-bottom: 12rpx;
}

/* 24小时 */
.chartChange {
  text-align: center;
  margin: 16rpx 0;
}
.chart_tit {
  width: 129rpx;
  height: 43rpx;
  background: #d3e1ff;
  border-radius: 20rpx;
  color: #3380ff;
}

.chart_tit image {
  margin-right: 10rpx;
  width: 36rpx;
  height: 30rpx;
}

.table_h {
  display: flex;
  text-align: center;
  height: 24px;
  /* position: absolute;
    top: 0;
    right: 0; */
}
.info_24 {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 12rpx;
  box-shadow: 0px 0px 5px #eee;
}
.heart {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title .line {
  border: 2px solid #3380ff;
  border-radius: 3rpx;
  margin-right: 20rpx;
}
.title .h4 {
  font-weight: 400;
  font-size: 32rpx;
  color: #121b3d;
}
.time {
  font-weight: 400;
  font-size: 24rpx;
  color: #a2a2a2;
}

.g1 {
  color: #545556;
}
.ye {
  color: #ff1717;
  /* font-weight: 600; */
}
.b1 {
  color: #3380ff;
  padding: 0 2px;
}

.uni-group {
  display: flex;
  align-items: center;
}

/* 表格 */
.tableBox {
  width: 100%;
  position: relative;
}

.leftTab {
  width: 80px;
  /* border-bottom: 1px solid #ccc; */
}
.rightTab {
  width: 80px;
  /* border: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    border-left: 0; */
}
.activetextTypeTab,
.activetextTypeTab:hover {
  border-bottom: 3rpx solid #2286f6;
  color: #026be0;
}
.table_div {
  widows: 100%;
  height: 100%;
  max-width: calc(100% - 0px);
  max-height: calc(100vh - 24px);
  flex: 1;
  // padding-top: 30px;
  overflow-x: scroll;
}
/*table样式*/
.table_cur {
  width: 100%;
  empty-cells: show;
  border-collapse: collapse;
  font-size: 14px;
}
.table_cur tr {
  display: flex;
  line-height: 56rpx;
}
.table_cur th {
  height: 56rpx;
  color: #2f4056;
  background: #f5f6f8;
  font-size: 14px;
  font-weight: bold;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center !important;
}

.table_cur td {
  height: 56rpx;
  border-bottom: 1px solid #e5e9f2;
  font-size: 14px;
  color: #2f4056;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center !important;
}
/*table样式 end*/
.noData {
  width: 100px;
}
</style>
  