<template>
  <!-- #ifdef H5 -->
  <view>
    <zj-page-layout
      :isScroll="true"
      :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh"
      @scrolltolower="scrolltolower"
    >
      <view class="list-container">
        <view class="item" v-for="(item, index) in dataList" :key="index">
          <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.websitName}}</view>
          </view> -->
          <view class="row">
            <view class="label">师傅电话</view>
            <view class="value">{{ item.workerMobile }}</view>
          </view>
          <view class="row">
            <view class="label">订单金额</view>
            <view class="value">¥{{ item.totalPrice | priceFilter }}</view>
          </view>
          <view class="row">
            <view class="label">销售利润</view>
            <view class="value" :class="item.workerAmount > 0 ? 'blue' : 'orange'"
              >¥{{ item.workerAmount | priceFilter }}</view
            >
            <view class="status" :class="item.workerAmount > 0 ? 'blue' : 'orange'">{{
              item.workerAmount > 0 ? '销售' : '退款'
            }}</view>
          </view>
        </view>
      </view>
      <Loading :loadStatus="loadStatus" :dataList="dataList" />
    </zj-page-layout>
  </view>
  <!-- #endif -->

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

<script>
 // #ifdef H5
import zjDialogDateRangePicker from '@/components/zj-dialog/zj-dialog-dateRangePicker.vue';

 export default {
	components: {
		zjDialogDateRangePicker,
	},

   filters: {
     statusFilter(val) {
       const MAP = {
         WAIT: '待结算',
         WAIT_ING: '可提现',
         ING: '提现中',
         OVER: '已到账',
       }
       return MAP[val];
     },
   },

   data() {
     return {
       id: null,
			dataList: [],
			pageNum: 1,
			loadStatus: 0,
       refresherTriggered: false,
       isShowDatePicker: false,
       startDate: '',
       endDate: '',
     }
   },

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

   methods: {
     getList() {
     	this.loadStatus = 1;
     	this.$api.post('/withdrawal/list/detail', {
     	  pageNum: this.pageNum,
     	  pageSize: 10,
         id: this.id,
     	}).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;
     	})
     },

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

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

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

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

<style lang="scss" scoped>
.tab-container {
  background: #ffffff;
}

.date-container {
  background: #ffffff;
  padding: 0 20rpx;
  .box {
    padding-left: 20rpx;
    border: 1px solid #eaeaea;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    height: 60rpx;
    .placeholder {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: $sec-font;
    }
    .value {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
    }
    .text {
      font-size: 28rpx;
    }
  }
}

.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>
