<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.post }}</view>
        <view class="other">
          <view class="otherInfo">
            招聘企业：<text>{{ i.company || "暂无" }}</text>
          </view>
          <view class="otherInfo">
            职位分类：<text>{{ i.post_type || "暂无" }}</text>
          </view>
          <view class="otherInfo">
            工作性质：<text>{{ i.nature || "暂无" }}</text>
          </view>
        </view>
        <view class="btn">
          <button type="default" size="mini" @tap="toView" :data-id="i.id">
            详细信息
          </button>
        </view>
      </uni-col>
    </uni-col>
  </uni-row>
</template>

<script>
import { mapState, mapGetters, createNamespacedHelpers } from "vuex";
const _ = require("lodash");
const { mapActions } = createNamespacedHelpers("company_recruit_work");
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);
        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();
      }
    },
    toView(data) {
      const id = data.currentTarget.dataset.id;
      uni.navigateTo({ url: `/pages/info_recruit/info?id=${id}` });
    },
  },
  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>
