<template>
  <!-- #ifdef H5 -->
  <zj-page-layout
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower"
  >
    <template slot="header">
      <view class="top-container">
        <view class="left"></view>
        <view class="total" style="box-sizing: border-box; padding: 20rpx 0">
          <view class="text">收益总金额(元)</view>
          <view class="num">{{ count.zsy | priceFilter }}</view>
        </view>
        <view class="right"> </view>
      </view>
      <view class="stats-container">
        <view class="item" @tap="navToPage(`/packageMine/pages/salesProfit/orderList?tab=WAIT`)">
          <view class="text">待结算(元)<text class="iconfont icon-jinru"></text></view>
          <view class="num">{{ count.djs | priceFilter }}</view>
        </view>
        <view class="item" @tap="navToPage(`/packageMine/pages/salesProfit/orderList?tab=OVER`)">
          <view class="text">已结算(元)<text class="iconfont icon-jinru"></text></view>
          <view class="num">{{ count.yjs | priceFilter }}</view>
        </view>
      </view>
    </template>

    <view class="screen-container">
      <view class="left">本月销售订单</view>
      <view class="right" @tap="navToPage(`/packageMine/pages/salesProfit/orderList`)">查看全部</view>
    </view>
    <view class="list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
        <view class="row">
          <view class="label">支付订单号</view>
          <view class="value">{{ item.orderId }}</view>
          <view class="status blue">{{ item.status | statusFilter }}</view>
        </view>
        <view class="row">
          <view class="label">创建时间</view>
          <view class="value">{{ item.createTime }}</view>
        </view>
        <!-- <view class="row">
          <view class="label">所属网点</view>
          <view class="value">{{item.websitName}}</view>
        </view> -->
        <view class="row">
          <view class="label">客户电话</view>
          <view class="value">{{ item.userMobile }}</view>
        </view>
        <view class="row">
          <view class="label">订单金额</view>
          <view class="value">¥{{ item.totalAmount | priceFilter }}</view>
        </view>
        <view class="row">
          <view class="label">销售利润</view>
          <view class="value" :class="item.workerAmount > 0 || item.status == 'REFUND' ? 'blue' : 'orange'"
            >¥{{ item.workerAmount | priceFilter }}</view
          >
          <view class="status" :class="item.workerAmount > 0 || item.status == 'REFUND' ? 'blue' : 'orange'">{{
            item.workerAmount > 0 || item.status == 'REFUND' ? '销售' : ''
          }}</view>
        </view>
      </view>
    </view>
    <Loading :loadStatus="loadStatus" :dataList="dataList" />
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view
    :src="webViewHref(`/packageMine/pages/salesProfit/index`, pam, crossPagePam)"
    @message="crossPage.$listener"
  ></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
export default {
  filters: {
    statusFilter(val) {
      const MAP = {
        WAIT: '待结算',
      //  WAIT_ING: '可提现',
      //  ING: '提现中',
        OVER: '已结算',
        YC: '异常结算',
        OK : '已结算',
        LINE: '线下结算',
      }
      return MAP[val];
    },
  },

  data() {
    return {
      refresherTriggered: false,
      count: {},
		dataList: [], // 收益列表
		pageNum: 1,
      loadStatus: 0,
      refresherTriggered: false,
    }
  },

  onLoad() {
    this.getCount();
	this.getList();

    this.crossPage.$on('refreshSalesProfitIndex', () => {
      this.getCount();
      this.refreshList();
    });
  },

  onUnload() {
    this.crossPage.$off('refreshSalesProfitIndex');
  },

  methods: {
    getCount() {
      this.$api.post('/withdrawal/amount/count')
      .then(res => {
        this.count = res.data || {};
      })
    },

    // 获取列表
    getList() {
    	this.$api.post('/settlementOrder/list/pageV2', {
        pageNum: this.pageNum,
        pageSize: 10,
    	}).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();
      }
    },

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

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

    navToPage(url) {
      this.$navToPage({
        url
      })
    },

    toDetail(item) {
      if (item.goodsTyp == 'M') {
        this.$navToPage({
          url: `/packageMaterial/pages/sale/orderDetail?id=${item.orderId}`
        })
      } else if (item.goodsTyp == 'P') {
        this.$navToPage({
          url: `/packageMaterial/pages/newSale/orderDetail?id=${item.orderId}`
        })
      }
    },
  },
}

// #endif
// #ifndef H5
export default {
  data() {
    return {
      pam: {},
    }
  },
  onLoad(pam) {
    this.pam = pam;
  }
}
// #endif
</script>

<style lang="scss" scoped>
.top-container {
  background: $theme-color;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    width: 180rpx;
  }
  .right {
    width: 180rpx;
    .btn {
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      border-radius: 60rpx 0 0 60rpx;
      font-size: 28rpx;
    }
    .btn1 {
      background: rgba($color: #ffffff, $alpha: 0.2);
      color: #ffffff;
    }
    .btn2 {
      background: #ffffff;
      color: $theme-color;
      margin-top: 20rpx;
    }
  }
  .total {
    text-align: center;
    .text {
      font-size: 24rpx;
      color: rgba($color: #ffffff, $alpha: 0.7);
    }
    .num {
      font-size: 40rpx;
      color: #ffffff;
      margin-top: 12rpx;
      font-weight: 500;
    }
  }
}
.stats-container {
  background: $theme-color;
  display: flex;
  padding: 40rpx 0 24rpx;
  .item {
    flex: 1;
    text-align: center;
    .text {
      font-size: 24rpx;
      color: rgba($color: #ffffff, $alpha: 0.7);
      .iconfont {
        font-size: 24rpx;
        margin-left: 8rpx;
      }
    }
    .num {
      font-size: 36rpx;
      color: #ffffff;
      margin-top: 12rpx;
      margin-left: -10rpx;
    }
  }
}

.screen-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 30rpx 0;
  .left {
    font-weight: 500;
  }
  .right {
    font-size: 28rpx;
    color: $theme-color;
  }
}

.list-container {
  padding: 0 20rpx;
  .item {
    @include zj-card;
    margin-top: 20rpx;
    padding: 30rpx;
    .row {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      &:first-child {
        margin-top: 0;
      }
      .label {
        font-size: 28rpx;
        color: $sec-font;
        margin-right: 20rpx;
      }
      .value {
        flex: 1;
        font-size: 28rpx;
        text {
          color: $minor-color;
        }
      }
      .status {
        margin-left: 30rpx;
        font-size: 28rpx;
      }
      .blue {
        color: $theme-color;
      }
      .green {
        color: $success-color;
      }
      .orange {
        color: $assist-color;
      }
    }
  }
}
</style>
