<template>
  <view class="main" v-bind:style="{ 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.name }}</view>
          <view class="other">
            <view class="otherInfo">
              补打申请人：<text>{{ i.make_applypersonal || "暂无" }}</text>
            </view>
            <view class="otherInfo">
              补打申请时间：<text>{{ i.make_applydate || "暂无" }}</text>
            </view>
            <view class="otherInfo">
              补打审核时间：<text>{{ i.make_examinedate || "暂无" }}</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,
  mapMutations,
  createNamespacedHelpers,
} from "vuex";
const _ = require("lodash");
const { mapActions: certAgain } = createNamespacedHelpers(
  "certificates_print_again"
);
export default {
  data() {
    return {
      page: { limit: 4, skip: 1 },
      list: [],
      total: 0,
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...certAgain(["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;
          this.list.push(...data);
          this.$set(
            this,
            `total`,
            _.ceil(_.divide(res.total, this.page.limit))
          );
        }
      } catch (error) {
        console.error(error);
      } finally {
        uni.hideLoading();
      }
    },
    onReachBottom() {
      if (this.page.skip >= this.total) {
        uni.showToast({ title: "已显示全部数据", icon: "none" });
        return;
      }
      this.page.skip = this.page.skip + 1;
      this.search();
    },
    // 添加信息
    toAdd: function (e) {
      uni.navigateTo({
        url: `/pages/lose_apply/detail`,
      });
    },
    // 详细信息
    toView: function (e) {
      const id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: `/pages/lose_apply/info?id=${id}`,
      });
    },
  },
  computed: {
    ...mapState(["user"]),
    ...mapGetters(["client"]),
  },
  onLoad() {},
};
</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>
