<template>
  <ie-page bg-color="#f8fcff">
    <ie-navbar title="绑定会员卡" />
    <view class="px-10 py-30">
      <uv-steps current="0" dot>
        <uv-steps-item title="检验会员卡"></uv-steps-item>
        <uv-steps-item title="确认信息"></uv-steps-item>
        <uv-steps-item title="绑卡完成"></uv-steps-item>
      </uv-steps>
    </view>
    <view class="mx-40">
      <view class="mt-10 px-20 py-50 bg-white">
        <uv-form labelPosition="left" :model="form" ref="formRef" :labelWidth="110">
          <uv-form-item label="会员卡号" prop="form.cardNo" borderBottom>
            <uv-input v-model="form.cardNo" type="number" inputAlign="right" border="none" maxlength="11"
              placeholder="请输入会员卡号"></uv-input>
          </uv-form-item>
          <uv-form-item label="会员卡密码" prop="form.password" borderBottom>
            <uv-input v-model="form.password" type="text" inputAlign="right" border="none"
              placeholder="请输入会员卡密码"></uv-input>
          </uv-form-item>
        </uv-form>
      </view>
      <view class="mt-100">
        <ie-button type="primary" @click="handleCheckCard">校验会员卡</ie-button>
        <view class="mt-40 text-center text-primary underline">还没有卡？去购卡</view>
      </view>
    </view>
  </ie-page>
</template>

<script lang="ts" setup>
import { verifyCard } from '@/api/modules/user';
const form = ref({
  cardNo: '20000001',
  password: '669132'
});
const formRef = ref();
const handleCheckCard = async () => {
  console.log('handleCheckCard');
  const { cardNo, password } = form.value;
  if (!cardNo || cardNo.trim() === '') {
    uni.$ie.showToast('请输入会员卡号');
    return;
  }
  if (!password || password.trim() === '') {
    uni.$ie.showToast('请输入会员卡密码');
    return;
  }
  uni.$ie.showLoading();
  const data = await verifyCard(cardNo, password);
  uni.$ie.hideLoading();
  console.log(data);
};
</script>

<style lang="scss" scoped>
::v-deep .uv-steps-item__wrapper {
  border-radius: 50%;
}
</style>
