<template>
  <view class="body">
    <!-- <tui-navigation-bar splitLine @init="initNavigation" :scrollTop="scrollTop" title="过磅车次统计" backgroundColor="#5179ef" color="#fff" :isOpacity="false" :isFixed="false" style="position:relative;">
      <view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
        <tui-icon color="#fff"></tui-icon>
        <view class="">
          <text style="color: #f4f8ff;font-size: 14px;font-weight:600">筛选</text>
          <tui-icon name="screen" :size="20" color="#fff" @click="openShaixuan"></tui-icon>
        </view>
      </view>
    </tui-navigation-bar> -->
    <!-- 筛选的抽屉 -->
    <!-- <tui-drawer mode="bottom" :visible="projectShaixuan" @close="closeProjectShaixuan">
      <view class="shaixuan">
        <view :class="{ active1: this.timer == 'all' }" @click="timeChange('all')">开累</view>
        <view :class="{ active1: this.timer == 'toDay' }" @click="timeChange('toDay')">本日</view>
        <view :class="{ active1: this.timer == 'lastDay' }" @click="timeChange('lastDay')">昨日</view>
        <view :class="{ active1: this.timer == 'toMonth' }" @click="timeChange('toMonth')">本月</view>
        <view :class="{ active1: this.timer == 'season' }" @click="timeChange('season')">本季</view>
        <view :class="{ active1: this.timer == 'toYear' }" @click="timeChange('toYear')">本年</view>
      </view>
    </tui-drawer> -->
    <!-- <view class="top">
      <ul>
        <li :class="{ active: showFirst }" @click="showFirstView">未处理</li>
        <li :class="{ active: showSecond }" @click="showSecondView">已处理</li>
      </ul>
    </view> -->
    <!-- 全部的抽屉 -->
    <!-- <tui-drawer mode="top" :visible="visible" @close="closeDrawer">
    </tui-drawer>
    <view v-show="showFirst" class="first">
      <infiniteScroll ref="infiniteScrollYData" :fetchItems="getYData" :hasMore="hasMoreYData">
        <view v-for="(item,index) in YDataList" :key="index" class="itemBox" @click="clickDetailWarning(item)">
          <tui-card :title="{text: item.title}" :tag="{text: item.timestamp}" :image="card[0].img" :border="true" style="margin: 0">
            <template v-slot:body>
              <view class="tui-default">
                {{item.content}}
              </view>
            </template>
            <template v-slot:footer>
              <view class="tui-default tui-flex">
                <tui-tag type="light-blue" padding="8rpx 12rpx" size="24rpx">{{item.org_name}}</tui-tag>
                <tui-tag :type="judgeWarningColor(item.severity)" padding="8rpx 12rpx" size="24rpx">{{judgeWarningType(item.severity)}}</tui-tag>
              </view>
            </template>
          </tui-card>
        </view>
      </infiniteScroll>
    </view>
    <view v-show="showSecond" class="second">
      <infiniteScroll ref="infiniteScrollNData" :fetchItems="getNData" :hasMore="hasMoreNData">
        <view v-for="(item,index) in NDataList" :key="index" class="itemBox" @click="clickDetailWarning(item)">
          <tui-card :title="{text: item.title}" :tag="{text: item.timestamp}" :border="true" style="margin: 0">
            <template v-slot:body>
              <view class="tui-default">
                {{item.content}}
              </view>
            </template>
            <template v-slot:footer>
              <view class="tui-default tui-flex">
                <tui-tag type="light-blue" padding="8rpx 12rpx" size="24rpx">{{item.org_name}}</tui-tag>
                <tui-tag :type="judgeWarningColor(item.severity)" padding="8rpx 12rpx" size="24rpx">{{judgeWarningType(item.severity)}}</tui-tag>
              </view>
            </template>
          </tui-card>
        </view>
      </infiniteScroll>
    </view>
    <tui-modal :show="isShowModalWarnimg" title="通告详情" @cancel="handleClick" custom>
      <view class="tui-modal-custom">
        <view v-if="!!warningItem.is_read" style="position: absolute;top: 0;right: 0;background: #ff4d4f; border-radius:0  0 0 40rpx ; padding: 10rpx 30rpx; color: #f0f0f0;">已读</view>
        <view class="title">预警详情</view>
        <view class="tui-modal-custom-text">
          <view>类型：{{ warningItem.title }}</view>
          <view>单位：{{ warningItem.org_name }}</view>
          <view>时间：{{ warningItem.timestamp }}</view>
          <view>{{warningItem.content}}</view>
          <tui-input label="备注" placeholder="添加备注" clearable v-model="remark" :disabled="!!warningItem.is_read"></tui-input>
        </view>
        <tui-button height="80rpx" width="45%" style="display:inline-block;" :size="28" shape="circle" :disabled="!!warningItem.is_read" @click="handleClick(true)">已读</tui-button>
        <tui-button height="80rpx" width="45%" style="float: right;" :size="28" shape="circle" type="gray-primary" @click="handleClick(false)">取消</tui-button>
      </view>
    </tui-modal> -->
  </view>
</template>

<script>
import infiniteScroll from "@/components/infiniteScroll/infiniteScroll.vue";
export default {
  components: {
    infiniteScroll,
  },
  data() {
    return {
      showFirst: true,
      showSecond: false,
      visible: false,
      leixing1: "物资实物管控系统",
      projectShaixuan: false,
      timer: "all",
      hasMoreYData: true,
      hasMoreNData: true,
      YDataList: [],
      NDataList: [],
      //弹窗
      isShowModalWarnimg: false,
      warningItem: {
        content: "",
      },
      //分页
      pageSize: 10,
      remark: "",
      // 卡片
      card: [
        {
          img: {
            url: "/static/images/sxlq/point.png",
          },
        },
      ],
      top: 0, //标题图标距离顶部距离
      scrollTop: 0.5,
    };
  },

  mounted() {
    // this.getYData();
    // this.getNData();
  },
  // uniapp触底钩子函数
  onReachBottom: function () {
    if (this.showSecond) {
      this.$refs.infiniteScrollNData.reachBottom();
      return;
    }
    this.$refs.infiniteScrollYData.reachBottom();
  },
  methods: {
    navTo(url) {
      uni.navigateTo({
        url,
      });
    },
    // 切换未处理预警
    showFirstView() {
      this.showFirst = true;
      this.showSecond = false;
      this.YDataList = [];
      this.getYData();
    },
    //切换已处理预警
    showSecondView() {
      this.showFirst = false;
      this.showSecond = true;
      this.NDataList = [];
      this.getNData();
    },
    closeDrawer(e) {
      this.visible = false;
    },
    //调用此方法显示抽屉
    openDrawer() {
      this.visible = true;
    },
    leixing(value) {
      this.leixing1 = value;
      this.visible = false;
    },
    //筛选抽屉
    openShaixuan() {
      this.projectShaixuan = true;
    },
    closeProjectShaixuan(e) {
      this.projectShaixuan = false;
    },
    // 筛选抽屉点击事件
    async timeChange(value) {
      this.timer = value;
      this.YDataList = [];
      this.NDataList = [];
      this.getYData();
      this.getNData();
    },
    // 获取未处理数据
    async getYData() {
      const { data } = await this.$request.post(
        "analysis/MobileWarn/CheckWarn",
        {
          body: {
            isread: 0,
            timer: this.timer,
            page: Math.ceil(this.YDataList.length / this.pageSize) + 1,
            limit: this.pageSize,
          },
        }
      );
      this.YDataList.push(...data.data);
      if (data.data.length < this.pageSize) {
        this.hasMoreYData = false;
      }
    },
    // 获取已处理数据
    async getNData() {
      try {
        const { data } = await this.$request.post(
          "analysis/MobileWarn/CheckWarn",
          {
            body: {
              isread: 1,
              timer: this.timer,
              page: Math.ceil(this.NDataList.length / this.pageSize) + 1,
              limit: this.pageSize,
            },
          }
        );
        this.NDataList.push(...data.data);
        if (data.data.length < this.pageSize) {
          this.hasMoreNData = false;
        }
      } catch (error) {
        // console.log('');
      }
    },
    clickDetailWarning(item) {
      // 查看详情
      this.isShowModalWarnimg = true;
      this.warningItem = item;
      if (!!item.is_read) {
        this.remark = item.notes;
      }
    },
    async handleClick(Bl) {
      if (!!Bl) {
        if (this.remark == "") {
          uni.showToast({
            title: "设置已读先填写备注",
            icon: "none",
          });
          return;
        }
        await this.readMessage(this.warningItem.message_id);
      }
      this.isShowModalWarnimg = false; //关闭弹窗
      this.remark = ""; //置空
    },
    async readMessage(message_id) {
      // console.log("消息已读处理中!");
      try {
        let res = await this.$request.get("analysis/MobileWarn/readMessage", {
          params: {
            message_id, //消息id
            notes: this.remark,
          },
        });
        if (res.code != 0) {
          uni.showToast({
            title: "设置消息已读失败!",
            icon: "none",
          });
        } else {
          this.warningItem.is_read = 1;
          this.warningItem.notes = this.remark;
        }
      } catch (error) {
        uni.showToast({
          title: "设置消息已读失败!",
          icon: "none",
        });
      }
    },
    // 判断预警类型
    judgeWarningType(type) {
      if (type == 1) {
        return "轻度预警";
      } else if (type == 2) {
        return "中度预警";
      } else if (type == 3) {
        return "重度预警";
      }
    },
    // 判断预警颜色
    judgeWarningColor(type) {
      if (type == 1) {
        return "light-blue";
      } else if (type == 2) {
        return "light-orange";
      } else if (type == 3) {
        return "light-brownish";
      }
    },
    // 导航栏初始化信息，回传导航栏相关信息
    initNavigation(e) {
      this.top = e.top;
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
</script>

<style scoped lang="scss">
.active1 {
  width: 33%;
  height: 40%;
  font-size: 16px;
  border: 1px solid rgb(237, 237, 237);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "STKaiti", "Kaiti", "楷体", serif;
  margin-top: 10rpx;
  box-sizing: border-box;
  background-color: #5179ef;
  color: white;
}

.shaixuan {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  view {
    width: 26%;
    height: 40%;
    font-size: 32rpx;
    border: 1px solid rgb(237, 237, 237);
    border-radius: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "STKaiti", "Kaiti", "楷体", serif;
    margin-top: 10rpx;
    box-sizing: border-box;
  }
}

.d-container {
  width: 100%;

  view {
    font-family: "STKaiti", "Kaiti", "楷体", serif;
    height: 20px;
    font-size: 14px;
    margin-top: 10px;
  }
}

.top {
  width: 100%;
  height: 50px;
  background-color: white;
  margin-bottom: 6%;

  ul {
    width: 100%;
    height: 100%;
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    padding: 0;

    .active {
      // color: #5179ef;
      font-weight: bold;
      box-sizing: border-box;
      // border-bottom: 6rpx solid #5179ef;
      color: #fff;
      background: #5179ef;
    }

    li {
      width: 150rpx;
      height: 56rpx;
      border-radius: 40rpx;
      border: 1px solid #eee;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
    }
  }
}

//列表 样式
.first,
.second {
  margin-top: -20rpx;
  .itemBox {
    background: #fff;
    border-radius: 15rpx;
    // padding: 15rpx 30rpx;
    box-sizing: border-box;
    margin: 20rpx 30rpx;
    position: relative;
    // border: 1rpx solid #e6e6e6;
  }
}
//弹窗
.tui-modal-custom {
  .title {
    color: #5677fc;
    text-align: center;
    font-size: 45rpx;
    margin-bottom: 10rpx;
    font-weight: 500;
  }
  .tui-modal-custom-text {
    view {
      font-size: 27rpx;
      color: #5c5c5c;
      margin-bottom: 15rpx;
    }
    & > view:nth-child(4) {
      text-indent: 2em; /* 2个空格的宽度 */
      font-size: 30rpx;
      // color: #333333;
    }
  }
}
// 卡片样式
.tui-default {
  padding: 20rpx 30rpx;
}
.tui-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tui-header-icon {
  width: 100%;
  position: absolute;
  top: 0;
  padding: 0 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  transform: translateZ(0);
  z-index: 99999;
  box-sizing: border-box;
}
</style>