<template>
  <div class="channel">
    <h-cell title="Gestão de contas bancárias" @click="emit('show-account')" />
    <van-button
      size="large"
      color="#a96b32"
      :disabled="disabledVisible"
      @click="submit"
    >
      Submit
    </van-button>
    <div class="bm-tips">
      <p>Certifique-se de que o CPF está em seu nome para evitar atrasos.</p>
      <p>1. Mín 20, máx 10000</p>
      <p>
        2. Recomenda-se vincular CPF pessoal e sacar fundos sem problermas!
        [Número de celular/canal de retirada de e-mal instävelj
      </p>
      <p>
        3. Ao sacar dinheiro, certifique-se de vincular o CPF para garantir a
        segurança dos fundos pessoais e evitar riscos.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const emit = defineEmits(["submit", "update:method", "show-account"]);

const props = defineProps({
  disabledVisible: { type: Boolean, default: true, required: true },
});

const submit = () => {
  emit("submit");
};

onMounted(() => {
  // getData();
});

// defineExpose({
//   list,
// });
</script>

<style lang="scss" scoped>
.channel {
  &-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.2rem;
    font-size: 0.4rem;
    margin: 0.3rem 0;
    .item {
      text-align: center;
      padding: 0.3rem;
      background-color: #363a39;
      border-radius: 0.2rem;
      border: 1px solid #363a39;
      @extend .transition;
    }
    .active {
      border: 1px solid #35ffb5;
      background: #045845;
      color: #35ffb5;
    }
  }
  .van-button {
    :deep(.van-button__text:first-child) {
      color: #e8d07e;
      font-weight: bold;
    }
  }
  .bm-tips {
    text-align: left;
    margin-top: 0.2rem;
    p:first-child {
      font-size: 0.4rem;
      @extend .blod;
    }
    p {
      font-size: 0.35rem;
      font-weight: 500;
      margin-top: 0.2rem;
    }
  }
}
</style>
