<template>
  <!-- #ifdef H5 -->
  <view>
    <Loading
    	:type="3"
    	:loadStatus="loadStatus"
    	:showText="errorText"
    />
    <zj-page-layout
      v-if="detail"
      bgColor="#ffffff"
      :isScroll="true"
      :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh">
      <view class="all-container">
        <view class="top">
          <view class="text">招商银行</view>
          <view class="num">¥{{detail.amount | priceFilter}}</view>
        </view>
        <view class="row">
          <view class="label">创建时间</view>
          <view class="value">{{detail.createTime}}</view>
        </view>
        <view class="row">
          <view class="label">提现单号</view>
          <view class="value">{{detail.id}}</view>
        </view>
        <view class="row">
          <view class="label">处理进度</view>
          <view class="value">
            <u-steps :current="detail.status + 2" direction="column">
              <u-steps-item title="提现申请" :desc="detail.createTime"></u-steps-item>
              <u-steps-item title="处理中" :desc="detail.createTime"></u-steps-item>
              <u-steps-item title="提现成功" :desc="detail.grantTime"></u-steps-item>
            </u-steps>
          </view>
        </view>
        <view class="row">
          <view class="label">提现银行</view>
          <view class="value">{{detail.bank}}（{{detail.bankId}}）{{detail.bankUserName}}</view>
        </view>
        <view class="row" v-if="detail.certImg">
          <view class="label">转账凭证</view>
          <image :src="detail.certImg" mode="width"></image>
        </view>
      </view>
    </zj-page-layout>
  </view>
  <!-- #endif -->

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

<script>
  // #ifdef H5
  export default {
    data() {
      return {
        id: null,
        refresherTriggered: false,
        loadStatus: 0,
				errorText: '',
        detail: null,
      }
    },

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

    methods: {
      getDetail() {
        this.$api.post('/withdrawal/detail', {
          id: this.id
        }).then(res => {
          this.detail = res.data;
          this.loadStatus = 0;
        }).catch(res => {
      		this.errorText = res.message;
      		this.loadStatus = 2;
      	}).finally(res => {
      		this.refresherTriggered = false;
      	})
      },

      // 下拉刷新
      refresherrefresh() {
        this.refresherTriggered = true;
        this.getDetail();
      },
    },
  }

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

<style lang="scss" scoped>
.all-container {
  padding: 0 40rpx;
  .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50rpx 0;
    .text {
      font-size: 28rpx;
    }
    .num {
      font-size: 40rpx;
      margin-top: 20rpx;
      font-weight: 500;
    }
  }
  .row {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    &:first-child {
      margin-top: 0;
    }
    .label {
      font-size: 28rpx;
      color: $sec-font;
    }
    .value {
      font-size: 28rpx;
    }
    ::v-deep .u-steps {
      margin-top: -10rpx;
    }
    image {
      width: 200rpx;
    }
  }
}
</style>
