<template>
  <!-- #ifdef H5 -->
  <zj-page-layout :hasFooter="true">
    <view class="all-container">
      <view class="top-container card">
        <view class="row row1">
          <view class="left">销售提现：</view>
          <view class="right" @tap="toOrderList">订单明细<text class="iconfont icon-jinru"></text></view>
        </view>
        <view class="row row2">
          <view class="left">提现金额</view>
          <view class="right">¥{{amount | priceFilter}}</view>
        </view>
      </view>

      <view class="account-container card">
        <view class="top">
          <view class="left">
            <view class="row1">提现账号</view>
            <view class="row2" v-if="accountData">{{accountData.bank}}</view>
            <view class="row3" v-if="accountData">{{accountData.bankNo}}</view>
          </view>
          <view class="right" @tap="toChooseAccount">{{accountData ? '更换' : '选择'}}账号<text class="iconfont icon-jinru"></text></view>
        </view>
        <view class="bottom" v-if="accountData">
          <view class="row">
            <view class="label">账户类型：</view>
            <view class="value">个人账户</view>
          </view>
          <view class="row">
            <view class="label">持卡人名：</view>
            <view class="value">{{accountData.bankUserName}}</view>
          </view>
          <view class="row">
            <view class="label">身份证号：</view>
            <view class="value">{{accountData.idcard}}</view>
          </view>
        </view>
      </view>

      <view class="tips-container">
        <view>温馨提示：</view>
        <view>1、为配合银行监管局时效，提现处理周期为：T+1天，即发起提交申请后第二天处理提现。</view>
        <view>2、填写的收款人银行、收款人姓名及收款人身份证号需保持一致，否则无法提现。</view>
        <view>3、提现申请暂仅支持14大银行卡，如需确认开户行信息请拨打银行官网信息获取。</view>
      </view>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
        <u-button type="primary" text="提交申请" @tap="submitData"></u-button>
      </view>
    </template>
  </zj-page-layout>
  <!-- #endif -->

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

<script>
  // #ifdef H5
  export default {
    data() {
      return {
        amount: 0,
        accountData: null,
      }
    },

    onLoad() {
      this.getAmount();
      this.crossPage.$on('chooseAccount', data => {
        this.accountData = data;
      });
    },

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

    methods: {
      getAmount() {
        this.$api.post('/withdrawal/amount/count')
        .then(res => {
          this.amount = res.data.ktx || 0;
        })
      },
      
      toOrderList() {
        this.$navToPage({
          url: '/packageMine/pages/salesProfit/orderList'
        })
      },

      toChooseAccount() {
        this.$navToPage({
          url: '/packageMine/pages/salesProfit/account/index'
        })
      },

      submitData() {
        if(!this.accountData) return this.$toast('请选择银行账户');
        this.$api.post('/withdrawal/save', {
          workerBankId: this.accountData.id,
        }).then(res => {
          this.$successToast();
          this.crossPage.$emit('refreshSalesProfitIndex', '');
          this.$navToPage({
          	delta: 1
          }, 'navigateBack')
        })
      }
    },
  }

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

<style lang="scss" scoped>
.all-container {
  padding: 0 20rpx;
}
.card {
  @include zj-card;
  margin-top: 20rpx;
  padding: 30rpx;
}
.top-container {
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .row1 {
    .left {
      font-weight: 500;
    }
    .right {
      font-size: 28rpx;
      color: $sec-font;
      .iconfont {
        font-size: 28rpx;
        margin-left: 4rpx;
      }
    }
  }
  .row2 {
    margin-top: 30rpx;
    .right {
      color: $theme-color;
      font-weight: 500;
    }
  }
}

.account-container {
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      .row1 {
        font-size: 28rpx;
      }
      .row2 {
        font-size: 36rpx;
        font-weight: 500;
        margin-top: 20rpx;
      }
      .row3 {
        font-size: 28rpx;
        font-weight: 500;
        margin-top: 16rpx;
      }
    }
    .right {
      font-size: 28rpx;
      color: $sec-font;
      .iconfont {
        font-size: 28rpx;
        margin-left: 4rpx;
      }
    }
  }
  .bottom {
    margin-top: 20rpx;
    border-top: 1px solid #eaeaea;
    .row {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      .label {
        font-size: 28rpx;
        color: $sec-font;
      }
      .value {
        flex: 1;
        font-size: 28rpx;
      }
    }
  }
}

.tips-container {
  padding: 10rpx;
  view {
    font-size: 24rpx;
    margin-top: 20rpx;
    color: $sec-font;
  }
}
</style>
