<template>
  <!-- #ifdef H5 -->
  <view>
    <zj-page-layout :hasFooter="true" :isScroll="true" :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
      <view class="list-container">
        <view class="goods-item" v-for="(item, index) in dataList" :key='index' @tap="toGoodsDetail(item)">
          <view class="aItemView">
            <view class="aItemView_title">汇总名称:</view>
            <view class="aItemView_info">
              <view class="aItemView_v1">{{ item.name }}</view>
              <view class="aItemView_v2"></view>
              <view class="aItemView_v3" :style="{ color: item.status == 'END' ? '#ff5e00' : 'rgb(112 204 12)  ' }">
                {{ ({ NOT: "未发放", END: "已发放" })[item.status] }}
              </view>
            </view>
          </view>
          <view class="aItemView">
            <view class="aItemView_title">安装费用:</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingk">{{ Number(item.installHomeCount) + Number(item.installOtherCount) }}台
              </view>
              <view class="aItemView_v2 gudingkbig">{{ item.installAmount }}元</view>
              <view class="aItemView_v3"></view>
            </view>
          </view>
          <view class="aItemView">
            <view class="aItemView_title">维修费用:</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingk">{{ item.repairCount }}单</view>
              <view class="aItemView_v2 gudingkbig">{{ item.repairAmount }}元</view>
              <view class="aItemView_v3"></view>
            </view>
          </view>
          <view class="aItemView">
            <view class="aItemView_title">其他费用:</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingk">{{ item.otherCount }}项</view>
              <view class="aItemView_v2 gudingkbig">{{ item.otherAmount }}元</view>
              <view class="aItemView_v3"></view>
            </view>
          </view>
          <view class="aItemView">
            <view class="aItemView_title">结算金额:</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingk"></view>
              <view class="aItemView_v2 gudingkbig">{{ item.settleAmount }}元</view>
              <view class="aItemView_v3"></view>
            </view>
          </view>
          <view class="aItemView" v-if="item.status == 'END'">
            <view class="aItemView_title">发放时间:</view>
            <view class="aItemView_info">
              <view class="aItemView_v1">{{ item.sendDate ? item.sendDate.split(" ")[0] : "" }}</view>
            </view>
          </view>
        </view>
      </view>
      <Loading :loadStatus="loadStatus" :dataList="dataList" />
    </zj-page-layout>
  </view>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageMine/pages/collection`, pam, crossPagePam)"
    @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
export default {
  data() {
    return {
      dataList: [],
      pageNum: 1,
      loadStatus: 0,
      refresherTriggered: false, // 下拉刷新状态
    }
  },

  onLoad() {
    this.getList();
  },

  methods: {
    // 获取商品列表
    getList() {
      this.loadStatus = 1;
      this.$api.post('/user/my/settle', {
        pageNum: this.pageNum,
        pageSize: 10,
        userId: this.$store.state.user.userId,
      }).then(res => {
        this.loadStatus = 0;
        let list = res.data.records;
        if (list.length < 10) {
          this.loadStatus = 2;
        }
        this.dataList = this.dataList.concat(list);
      }).catch(() => {
        this.loadStatus = 2;
      }).finally(res => {
        this.refresherTriggered = false;
      })
    },

    // 滚动到底部
    scrolltolower(e) {
      if (this.loadStatus === 0) {
        this.pageNum++;
        this.getList();
      }
    },

    // 触发下拉刷新
    async refresherrefresh(e) {
      this.refresherTriggered = true;
      this.refreshList();
    },

    refreshList() {
      this.dataList = [];
      this.pageNum = 1;
      this.getList();
    },

    toGoodsDetail(item) {
      this.$navToPage({
        url: `/packageMine/pages/securityFeeDetails?settleMonthWagesId=${item.settleMonthWagesId}`
      })
    },
  }
}
// #endif
// #ifndef H5
export default {
  data() {
    return {
      pam: {},
    }
  },

  onLoad(pam) {
    this.pam = pam;
  },
}
// #endif
</script>

<style lang="scss">
.list-container {
  padding: 1rpx 20rpx;

  .goods-item {
    @include zj-card;
    padding: 20rpx;
    margin-top: 20rpx;
    display: block !important;
  }
}

.aItemView {
  width: 100%;
  display: flex;

  .aItemView_title {
    width: 180rpx;
  }

  .aItemView_info {
    flex: 1;
    display: flex;
    justify-content: space-between;

    .aItemView_v1 {}

    .gudingk {
      width: 130rpx;
    }

    .gudingkbig {
      flex: 1;
    }

    .aItemView_v2 {}

    .aItemView_v3 {}
  }

  &:not(:last-child) {
    margin-bottom: 16rpx;
  }
}
</style>
