<template>
  <view class="withdraw">
    <u-navbar
      title=""
      bgColor="transparent"
      :placeholder="true"
      :fixed="true"
      leftIcon=""
      height="60"
    >
      <view slot="left">
        <text class="navbar-lab">{{ $lang.withdraw }}</text>
      </view>
    </u-navbar>
    <view class="content">
      <view class="list">
        <view class="lable money"
          >{{ $lang.balance }}：{{ userInfo.money }}</view
        >
      </view>
      <!-- USDT 提现 -->
      <template v-if="userInfo.pay_channel != 'ALIN_VN'">
        <view class="picker-view" @click="show = true">
          <u-input
            readonly
            :placeholder="$lang.pleaseChoose"
            color="#f7ecd0"
            v-model="type"
            border="none"
          >
            <u--text
              :text="$lang.chooseWithdraw"
              slot="prefix"
              margin="0 3px 0 0"
              type="tips"
            ></u--text>
            <u-icon
              slot="suffix"
              name="arrow-down-fill"
              color="#b9aa84"
              size="16"
            ></u-icon>
          </u-input>
        </view>
        <u-picker
          :title="$lang.pleaseChooseWithdraw"
          closeOnClickOverlay
          :show="show"
          :columns="columns"
          :cancelText="$lang.cancel"
          :confirmText="$lang.confirm"
          @cancel="close"
          @close="close"
          @confirm="confirm"
        ></u-picker>
        <view class="list">
          <view class="lable">{{ $lang.walletAddress }}</view>
          <u-input
            class="input"
            color="#f7ecd0"
            clearable
            :placeholder="$lang.enterWithdrawalAddress"
            border="none"
            v-model="address"
          ></u-input>
        </view>
        <view class="list">
          <view class="lable">{{ $lang.amount }}</view>
          <u-input
            class="input"
            color="#f7ecd0"
            clearable
            :placeholder="$lang.enterWithdrawalamount"
            border="none"
            v-model="money"
          ></u-input>
        </view>
        <view class="list">
          <view class="lab">{{ $lang.rechargeWithdrawNetwork }}</view>
          <view class="type">TRC20</view>
        </view>
        <view class="list">
          <u-button
            @tap="applyWithdraw"
            class="button"
            color="#e5b932"
            :text="$lang.submit"
          ></u-button>
        </view>
        <view class="list">
          <view class="tip">{{ $lang.withdrawTip }}</view>
          <view class="tip">{{ $lang.commission }}:1 USDT</view>
        </view>
      </template>
      <!-- 越南银行卡提现 -->
      <template v-if="userInfo.pay_channel == 'ALIN_VN'">
        <view class="picker-view" @click="openBankPicker">
          <u-input
            readonly
            :placeholder="$lang.pleaseChoose"
            color="#f7ecd0"
            v-model="bankName"
            border="none"
          >
            <u--text
              :text="$lang.bankName"
              slot="prefix"
              margin="0 3px 0 0"
              type="tips"
            ></u--text>
            <u-icon
              slot="suffix"
              name="arrow-down-fill"
              color="#b9aa84"
              size="16"
            ></u-icon>
          </u-input>
        </view>
        <u-popup
          :show="showBankPicker"
          mode="bottom"
          round="20"
          closeOnClickOverlay
          @close="closeBankPicker"
        >
          <view class="bank-picker-popup">
            <view class="bank-picker-header">
              <view class="bank-picker-action cancel" @click="closeBankPicker">{{
                $lang.cancel
              }}</view>
              <view class="bank-picker-title">{{ $lang.bankName }}</view>
              <view class="bank-picker-action confirm" @click="confirmBankSelection">{{
                $lang.confirm
              }}</view>
            </view>
            <scroll-view scroll-y class="bank-picker-list">
              <view
                class="bank-picker-item"
                :class="{ active: tempBankName === item.name }"
                v-for="(item, index) in bankList"
                :key="index"
                @click="selectBankOption(item)"
              >
                <text>{{ item.name }}</text>
                <u-icon
                  v-if="tempBankName === item.name"
                  name="checkmark"
                  color="#231705"
                  size="16"
                ></u-icon>
              </view>
            </scroll-view>
          </view>
        </u-popup>
        <view class="list">
          <view class="lable">{{ $lang.accountName }}</view>
          <u-input
            class="input"
            color="#f7ecd0"
            clearable
            :placeholder="$lang.enterAccountName"
            border="none"
            v-model="accountName"
          ></u-input>
        </view>
        <view class="list">
          <view class="lable">{{ $lang.accountNumber }}</view>
          <u-input
            class="input"
            color="#f7ecd0"
            clearable
            :placeholder="$lang.enterAccountNumber"
            border="none"
            v-model="accountNumber"
          ></u-input>
        </view>
        <view class="list">
          <view class="lable">{{ $lang.amount }}</view>
          <u-input
            class="input"
            color="#f7ecd0"
            clearable
            type="number"
            :placeholder="'Tối thiểu 1,000,000 VND'"
            border="none"
            v-model="money"
          ></u-input>
        </view>
        <view class="list">
          <u-button
            @tap="applyWithdrawBank"
            class="button"
            color="#e5b932"
            :text="$lang.submit"
          ></u-button>
        </view>
        <view class="list">
          <view class="tip">{{ $lang.withdrawTip }}</view>
        </view>
      </template>
    </view>
    <view class="mb60"></view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      address: "",
      money: "",
      type: "USDT",
      show: false,
      columns: [["USDT"]],
      // 越南银行卡提现
      bankName: "",
      bankCode: "",
      tempBankName: "",
      accountName: "",
      accountNumber: "",
      showBankPicker: false,
      bankColumns: [[]],
      bankList: [],
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      $lang: (state) => state.app.lang[state.app.language],
    }),
  },
  onLoad() {
    // 越南渠道加载银行列表
    if (this.userInfo && this.userInfo.pay_channel === 'ALIN_VN') {
      this.loadBankList();
    }
  },
  methods: {
    confirm(chose) {
      this.type = chose.value[0];
      this.close();
    },
    close() {
      this.show = false;
    },
    applyWithdraw() {
      const params = {
        user_id: this.userInfo.id,
        to_addr: this.address,
        amount: this.money,
      };
      if (!params.to_addr) {
        this.$toast({
          message: this.$lang.enterWithdrawalAddress,
          duration: 2000,
        });
      } else if (!params.amount) {
        this.$toast({
          message: this.$lang.amountCannotBe0,
          duration: 2000,
        });
      } else {
        this.$toast({
          type: "loading",
          message: this.$lang.submittingApplication,
          duration: 200000,
        });
        this.$api
          .applyWithdraw(params)
          .then((res) => {
            if (res.Success) {
              this.$toast({
                type: "success",
                message: res.Msg,
                duration: 2000,
              });
              this.address = "";
              this.money = "";
            } else {
              this.$toast({
                message: res.Msg,
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          })
          .finally(() => {
            this.$toastHide();
          });
      }
    },
    // 加载越南银行列表
    loadBankList() {
      this.$api
        .getBankListVn({ user_id: this.userInfo.id })
        .then((res) => {
          if (res.Data && res.Data.data) {
            this.bankList = res.Data.data;
            this.bankColumns = [res.Data.data.map((item) => item.name)];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    openBankPicker() {
      this.tempBankName = this.bankName;
      this.showBankPicker = true;
    },
    closeBankPicker() {
      this.showBankPicker = false;
    },
    selectBankOption(item) {
      this.tempBankName = item.name;
    },
    // 选择银行
    confirmBankSelection() {
      if (!this.tempBankName) {
        this.showBankPicker = false;
        return;
      }
      this.bankName = this.tempBankName;
      this.bankCode = this.tempBankName;
      this.showBankPicker = false;
    },
    // 越南银行卡提现
    applyWithdrawBank() {
      if (!this.bankName) {
        this.$toast({
          message: this.$lang.bankName,
          duration: 2000,
        });
        return;
      }
      if (!this.accountName) {
        this.$toast({
          message: this.$lang.enterAccountName,
          duration: 2000,
        });
        return;
      }
      if (!this.accountNumber) {
        this.$toast({
          message: this.$lang.enterAccountNumber,
          duration: 2000,
        });
        return;
      }
      if (!this.money || this.money <= 0) {
        this.$toast({
          message: this.$lang.amountCannotBe0,
          duration: 2000,
        });
        return;
      }
      if (Number(this.money) < 1000000) {
        this.$toast({
          message: 'Số tiền rút tối thiểu là 1,000,000 VND',
          duration: 2000,
        });
        return;
      }
      if (Number(this.money) > Number(this.userInfo.money)) {
        this.$toast({
          message: this.$lang.insufficientBalance,
          duration: 2000,
        });
        return;
      }
      const params = {
        user_id: this.userInfo.id,
        account_name: this.accountName,
        account_number: this.accountNumber,
        bank_code: this.bankCode,
        bank_name: this.bankName,
        amount: this.money,
      };
      this.$toast({
        type: "loading",
        message: this.$lang.submittingApplication,
        duration: 200000,
      });
      this.$api
        .applyWithdrawBank(params)
        .then((res) => {
          if (res.Success) {
            this.$toast({
              type: "success",
              message: res.Msg,
              duration: 2000,
            });
            this.bankName = "";
            this.bankCode = "";
            this.accountName = "";
            this.accountNumber = "";
            this.money = "";
          } else {
            this.$toast({
              message: res.Msg,
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.$toastHide();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.withdraw {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #060505 0%, #0d0b09 100%);
  color: #f7ecd0;

  ::v-deep .u-navbar {
    background: rgba(0, 0, 0, 0.72) !important;
  }

  ::v-deep .u-navbar__content {
    background: transparent !important;
  }

  ::v-deep .u-picker__view__column__item {
    color: #f3e3b8 !important;
    font-size: 16px !important;
    font-weight: 600;
  }

  ::v-deep .u-toolbar {
    background: #15120f !important;
    border-bottom-color: rgba(223, 189, 120, 0.12) !important;
  }

  ::v-deep .u-toolbar__title {
    color: #f4dfae !important;
  }

  ::v-deep .u-toolbar__wrapper__cancel {
    color: #a9956d !important;
  }

  ::v-deep .u-toolbar__wrapper__confirm {
    color: #dfbd78 !important;
  }

  .navbar-lab {
    color: #fbf2de;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.3px;
  }
  .content {
    width: calc(100% - 24px);
    max-width: 760px;
    margin: 10px auto 0;
    padding: 18px 16px 22px;
    box-sizing: border-box;
    border-radius: 24px;
    background: linear-gradient(
      180deg,
      rgba(16, 13, 11, 0.96) 0%,
      rgba(10, 8, 7, 0.96) 100%
    );
    border: 1px solid rgba(223, 189, 120, 0.18);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 245, 223, 0.03);
    min-height: 400px;

    .picker-view {
      min-height: 56px;
      margin-bottom: 14px;
      padding: 0 14px;
      display: flex;
      align-items: center;
      background: linear-gradient(
        180deg,
        rgba(25, 21, 18, 0.96) 0%,
        rgba(17, 14, 12, 0.96) 100%
      );
      border: 1px solid rgba(223, 189, 120, 0.14);
      border-radius: 16px;
      box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);

      ::v-deep .u-input {
        flex: 1;
      }

      ::v-deep .u-input__content {
        min-height: 54px;
        padding: 0;
      }

      ::v-deep .u-input__content__field-wrapper {
        width: 100%;
      }

      ::v-deep input {
        color: #f7ecd0 !important;
        font-size: 15px !important;
        letter-spacing: 0.2px;
      }

      ::v-deep input::placeholder {
        color: rgba(245, 228, 184, 0.4) !important;
      }

      ::v-deep .u-text__value {
        color: #baa67f !important;
        font-size: 13px !important;
      }
    }
    .list {
      margin-bottom: 14px;
      padding: 14px;
      border-radius: 16px;
      background: linear-gradient(
        180deg,
        rgba(23, 19, 16, 0.92) 0%,
        rgba(14, 12, 10, 0.92) 100%
      );
      border: 1px solid rgba(223, 189, 120, 0.1);
      font-size: 14px;
      text-align: center;
      .lab {
        color: #b9aa84;
        margin: 0 0 10px;
        text-align: left;
        font-size: 13px;
      }
      .lable {
        text-align: left;
        color: #d9c6a0;
        margin-top: 0;
        font-size: 15px;
        margin-bottom: 10px;
        font-weight: 600;
      }
      .money {
        min-height: 52px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        margin-top: 0;
        color: #f1d392;
        font-weight: 700;
        border-radius: 16px;
        background: linear-gradient(
          180deg,
          rgba(27, 22, 18, 0.96) 0%,
          rgba(17, 14, 12, 0.96) 100%
        );
        border: 1px solid rgba(223, 189, 120, 0.14);
        box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.04);
      }
      .type {
        min-width: 86px;
        height: 36px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
        border-radius: 999px;
        text-align: center;
        line-height: 36px;
        font-weight: 700;
        color: #231705;
        box-shadow: 0 8px 18px rgba(125, 84, 22, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.28);
        margin: 0 auto;
      }
      .input {
        min-height: 48px;
        padding: 0 12px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(223, 189, 120, 0.12);
        border-radius: 14px;

        ::v-deep .u-input__content {
          min-height: 48px;
          padding: 0;
        }

        ::v-deep .u-input__content__field-wrapper {
          width: 100%;
        }

        ::v-deep input {
          color: #f7ecd0 !important;
          font-size: 15px !important;
          letter-spacing: 0.2px;
        }

        ::v-deep input::placeholder {
          color: rgba(245, 228, 184, 0.4) !important;
        }
      }
      .button {
        height: 50px !important;
        margin-top: 8px;
        margin-bottom: 2px;
        border: none !important;
        border-radius: 16px !important;
        color: #231705 !important;
        font-weight: 700;
        letter-spacing: 0.3px;
        box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.36);
      }
      .tip {
        color: #bca47a;
        font-size: 13px;
        text-align: justify;
        line-height: 1.6;
      }
    }
  }

  .bank-picker-popup {
    background: linear-gradient(180deg, #17130f 0%, #0d0b09 100%);
    border-top: 1px solid rgba(223, 189, 120, 0.14);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
  }

  .bank-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(223, 189, 120, 0.1);
    background: rgba(21, 18, 15, 0.96);
  }

  .bank-picker-title {
    font-size: 16px;
    font-weight: 700;
    color: #f4dfae;
  }

  .bank-picker-action {
    min-width: 52px;
    font-size: 14px;
    line-height: 1;

    &.cancel {
      color: #a9956d;
      text-align: left;
    }

    &.confirm {
      color: #dfbd78;
      text-align: right;
    }
  }

  .bank-picker-list {
    max-height: 52vh;
    padding: 10px 12px calc(18px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  .bank-picker-item {
    min-height: 48px;
    padding: 0 14px;
    margin-bottom: 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #d9c6a0;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(
      180deg,
      rgba(25, 21, 18, 0.96) 0%,
      rgba(17, 14, 12, 0.96) 100%
    );
    border: 1px solid rgba(223, 189, 120, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03);

    &:last-child {
      margin-bottom: 0;
    }

    &.active {
      color: #231705;
      background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
      border-color: rgba(242, 223, 182, 0.45);
      box-shadow: 0 10px 20px rgba(125, 84, 22, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }
  }
}
</style>
