<template>
  <view class="main" v-bind:style="{ 'min-height': client.win_height + 'px' }">
    <view class="one">
      <button type="warn" size="mini" @tap="toAdd">添加警告</button>
    </view>
    <view class="two">
      <uni-row>
        <uni-col
          :span="24"
          class="list"
          v-for="(i, index) in list"
          :key="index"
        >
          <view class="name">{{ i.warning_date }}</view>
          <view class="other">
            <view class="otherInfo">
              经度：<text>{{ i.longitude || "暂无" }}</text>
            </view>
            <view class="otherInfo">
              纬度：<text>{{ i.latitude || "暂无" }}</text>
            </view>
            <view class="otherInfo">
              描述：<text>{{ i.desc || "暂无" }}</text>
            </view>
          </view>
          <view class="btn">
            <button type="default" size="mini" @tap="toView" :data-id="i.id">
              详细信息
            </button>
          </view>
        </uni-col>
      </uni-row>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters, createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("baoan_work_warning");
export default {
  data() {
    return {
      page: { limit: 4, skip: 1 },
      list: [],
      total: 0,
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...mapActions(["query"]),
    async search() {
      uni.showLoading({ title: "正在加载中", mask: true });
      try {
        const res = await this.query({
          ...this.page,
          security_guard_id: this.user.id,
        });
        if (this.$checkRes(res)) {
          const data = res.data;
          console.log(res);
          this.list.push(...data);
          this.$set(
            this,
            `total`,
            _.ceil(_.divide(res.total, this.page.limit))
          );
        }
      } catch (error) {
        console.error(error);
      } finally {
        uni.hideLoading();
      }
    },
    toView(data) {
      const id = data.currentTarget.dataset.id;
      uni.navigateTo({ url: `/pages/warning/info?id=${id}` });
    },
    toAdd() {
      uni.navigateTo({ url: `/pages/warning/info` });
    },
  },
  onReachBottom() {
    console.log('in function:');
    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 {
    float: left;
    width: 100%;
    text-align: center;
    margin: 10px 0;
  }

  .two {
    float: left;
    width: 95%;
    padding: 0 10px;

    .list {
      background-color: #f1f1f15f;
      border-radius: 8px;
      padding: 10px 0;
      margin: 0 0 10px 0;

      .name {
        padding: 0 8px;
        font-size: 18px;
        font-weight: bold;
        margin: 0 0 8px 0;
      }

      .other {
        .otherInfo {
          padding: 0 8px;
          margin: 0 0 8px 0;
          font-size: 16px;
          color: #666666;

          text {
            color: #000000;
          }
        }
      }

      .btn {
        text-align: center;
        margin: 15rpx 0 0 0;

        button {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>
