<template>
  <div class="my-complaint-con bg-grey">
    <mescroll-vue
      class="list-scroll"
      @init="mescrollInit"
      :down="downOptions"
      :up="upOptions"
    >
      <div class="list-item">
        <list-item
          v-for="(item, index) of listData"
          :key="index"
          :itemData="item"
        />
      </div>
    </mescroll-vue>
    <div
      class="mycomplaint-footer"
      @click="handleApply"
    >
      <van-button type="primary" block round>发起投诉</van-button>
    </div>
  </div>
</template>

<script>
import ListItem from "./list-item.vue";
import { MescrollMixin, MescrollMoreItemMixin } from "@/mixins";
import { mapGetters } from "vuex";
export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin],
  components: { ListItem },
  data() {
    return {
      listData: [],
      downOptions: {
        autoShowLoading: false,
        auto: true,
        callback: this.downCallback,
      },
      upOptions: {
        auto: false,
        // use:false
        // textNoMore:'没有更多啦',
        callback: this.upCallback,
      },
      pageSize: 0,
      hasInit: false,
    };
  },
  computed: {
    ...mapGetters(["hasLogin"]),
  },
  methods: {
    handleApply(url) {
		this.$router.push({name: "apply-complaint"})
    },
    initData() {
      this.getComplaintListData({ num: 1, size: 10 });
    },
    getComplaintListData(page) {
      if (!this.hasLogin) {
        return;
      }
      if (page.num === 1) {
        this.$showLoading();
      }
      this.pageSize = page.size;
      this.$api({
        apiName: "getComplaintList",
        postData: {
          page: page.num,
          size: page.size,
        },
        success: (res) => {
          let arr = res.data || [];
          for (let item of arr) {
            item.attachments = JSON.parse(item.attachments);
          }
          this.$hideLoading();
          if (page.num == 1) {
            this.listData = [];
          }
          this.mescroll.endBySize(res.data.length, res.totalSize);
          this.listData = this.listData.concat(res.data);
        },
      });
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.getComplaintListData(page);
    },
  },
};
</script>
<style lang="less">
.my-complaint-con {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  .list-scroll {
    flex: 1;
  }
  .mycomplaint-footer {
    background-color: #ffffff;
    flex-shrink: 0;
    z-index: 100;
    padding: 8px 16px;
    button {
      height: 36px;
      font-size: 16px;
    }
  }
  .list-item {
    padding: 10px 0 150px;
  }
}
</style>
