<template>
  <div class="page">
    <h-navbar title="Wallet" />
    <div class="page-body">
      <p class="tips">Depósitos e levantamentos</p>
      <div class="container">
        <div class="flex-sb" style="margin-bottom: 0.3rem">
          <div class="block">
            <h-img width="2.5rem" height="2.5rem" src="base/icon_qianbao.png" />
            <span>R$ 1298.4</span>
          </div>
          <div class="check">
            <h-img
              src="base/btn_jiaohuan1.png"
              v-show="current == ENUM.GOLD"
              @click="check(ENUM.TAKE)"
            />
            <h-img
              src="base/btn_jiaohuan2.png"
              v-show="current == ENUM.TAKE"
              @click="check(ENUM.GOLD)"
            />
          </div>
          <div class="block">
            <h-img width="2.5rem" height="2.5rem" src="base/icon_yinhang.png" />
            <span>R$ 1298.4</span>
          </div>
        </div>
        <h-input
          center
          v-model="amount"
          placeholder="请输入存款金额"
          color="#ffe726"
          background="#022c1a"
          class-name="input"
        />
      </div>
      <div class="progress flex-sb">
        <div class="line">
          <div class="line-p">{{ lineWidth }}</div>
        </div>
        <van-button size="mini" color="#0c705a">MAX</van-button>
      </div>
      <div class="handle-btn">
        <van-button size="large" color="#0c705a">重置</van-button>
        <van-button size="large" color="#b46722" class="submit">
          提交
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
/**
 * DEPOSITS 金币转换
 * TAKE 存款
 */
enum ENUM {
  GOLD = 3,
  TAKE = 4,
}

const amount = ref("");
const current = ref<number>(ENUM.GOLD);

const check = (type: number) => {
  current.value = type;
};

const lineWidth = computed(() => {
  return "80%";
});
</script>

<style lang="scss" scoped>
.page-body {
  .tips {
    font-size: 0.5rem;
    text-align: center;
    color: #20caa0;
    font-weight: bold;
    margin-bottom: 0.3rem;
  }
  .container {
    padding: 0.4rem;
    background: $nav-bar;
    border-radius: 0.2rem;
    .block {
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        font-size: 0.5rem;
        color: #ffe726;
      }
    }
  }
  .progress {
    margin: 0.5rem 0;
    .line {
      flex: 1;
      background: #000;
      height: 0.5rem;
      margin: 0 0.2rem;
      border-radius: 1rem;
      position: relative;
      &-p {
        position: absolute;
        height: 100%;
        width: 80%;
        background: linear-gradient(to right, #4ea670, #afdf7b, #c3ea7d);
        border-radius: 1rem;
        font-size: 0.3rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .van-button {
      :deep(.van-button__text:first-child) {
        color: #c3ea7d;
        font-weight: bold;
      }
    }
  }
  .handle-btn {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem;
    margin: 0.3rem 0;
    .van-button {
      :deep(.van-button__text:first-child) {
        color: #78d5a9;
        font-weight: bold;
      }
    }
    .submit {
      :deep(.van-button__text:first-child) {
        color: #e8d07e;
        font-weight: bold;
      }
    }
  }
}
</style>

<style>
.input {
  &::-webkit-input-placeholder {
    color: #1b9964;
    font-weight: 500;
  }
}
</style>
