<template>
  <uni-row
    class="main"
    v-bind:style="{ 'min-height': client.win_height + 'px' }"
  >
    <uni-col :span="24" class="one">
      <uni-col :span="24" class="list" v-for="(i, index) in list" :key="index">
        <view class="name"> {{ i.send_time }}</view>
        <view class="other">
          <view class="otherInfo">
            发送人：<text>{{ i.send_name || "暂无" }}</text>
          </view>
          <view class="otherInfo">
            是否已读：<text>{{ i.is_read == "0" ? "未读" : "已读" }}</text>
          </view>
          <view class="otherInfo">
            消息内容：<text>{{ i.content || "暂无" }}</text>
          </view>
        </view>
        <view class="btn">
          <button
            type="default"
            size="mini"
            @tap="toRead"
            :data-id="i.id"
            v-if="i.is_read == '0'"
          >
            已读
          </button>
        </view>
      </uni-col>
    </uni-col>
  </uni-row>
</template>

<script>
import { mapState, mapGetters, createNamespacedHelpers } from "vuex";
const _ = require("lodash");
const { mapActions } = createNamespacedHelpers("warning_message");
export default {
  data() {
    return {
      page: { limit: 5, skip: 1 },
      list: [],
      total: 0,
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...mapActions(["query", "update"]),
    async search() {
      uni.showLoading({ title: "正在加载中", mask: true });
      try {
        const res = await this.query({...this.page,receive_id: this.user.id});
        if (this.$checkRes(res)) {
          const data = res.data;
          this.list.push(...data);
          this.$set( this,`total`, _.ceil(_.divide(res.total, this.page.limit)));
        }
      } catch (error) {
        console.error(error);
      } finally {
        uni.hideLoading();
      }
    },
    // 已读
    async toRead(data) {
      const id = data.currentTarget.dataset.id;
      let res = await this.update({ id: id, is_read: "1" });
      if (this.$checkRes(res)) {
        uni.showToast({title: "已读消息成功",duration: 2000,icon: "success"});
      }
    },
  },
  onReachBottom() {
    if (this.page.skip >= this.total) {
      uni.showToast({ title: "已显示全部数据", icon: "none" });
      return;
    }
    this.page.skip = this.page.skip + 1;
    this.search();
  },
  computed: {
    ...mapState(["user"]),
    ...mapGetters(["client"]),
  },
};
</script>

<style lang="scss">
.main {
  background-color: #409eff;
  overflow-y: auto;
  .one {
    width: 97%;
    margin: 0 5px;
    .list {
      background-color: #f1f1f15f;
      border-radius: 8px;
      margin: 10px 0 0 0;
      padding: 5px 0;
      .name {
        padding: 0 8px;
        font-size: 16px;
        font-weight: bold;
        margin: 0 0 5px 0;
      }
      .other {
        margin: 0 0 5px 0;
        .otherInfo {
          padding: 0 8px;
          margin: 0 0 5px 0;
          font-size: 14px;
          color: #666666;
          text {
            color: #000000;
          }
        }
      }
      .btn {
        text-align: center;
        button {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>
