<script lang="ts" setup>
import {useUserStore} from "@/store";
import {EventEnum} from "@/constant/enums";
import {appUserCardSelectDefaultPost} from "@/service";

const {t} = useI18n();
const userStore = useUserStore();
// 响应式数据
const selectedPayment = ref<1 | 2>(1)

function changePayment(payment: 1 | 2) {
  payMethodOptions.value.payMethod = payment
}

onLoad(() => {
  // 查询用户默认信用卡
  appUserCardSelectDefault()
})
// 支付参数
const payMethodOptions = ref({
  cardNumber: '',
  cardId: '',
  payMethod: 1, // 支付方式 1信用卡 2余额
})

function appUserCardSelectDefault() {
  appUserCardSelectDefaultPost({}).then(res => {
    console.log('查询用户默认信用卡', res)
    payMethodOptions.value.cardId = res.data?.cardId || ''
    payMethodOptions.value.cardNumber = res.data?.cardNumber || ''
  })
}

const confirmPayment = () => {
  if (payMethodOptions.value.payMethod === 1) {
    if (!payMethodOptions.value.cardId) {
      chooseCard()
    } else {
      uni.$emit(EventEnum.CHOOSE_PAYMENT_METHOD, payMethodOptions.value)
      uni.navigateBack()
    }
  } else {
    uni.$emit(EventEnum.CHOOSE_PAYMENT_METHOD, payMethodOptions.value)
    uni.navigateBack()
  }
}

function chooseCard() {
  uni.navigateTo({
    url: '/pages-user/pages/select-credit-card/index',
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      selectedCard: function (data) {
        if (data) {
          payMethodOptions.value.cardId = data.cardId
          payMethodOptions.value.cardNumber = data.cardNumber
        }
      },
    },
  })
}

function navigateTo(url: string) {
  uni.navigateTo({url})
}
</script>
<template>
  <view class="">
    <navbar/>
    <!-- 页面标题 -->
    <view class="px-30rpx pt-20rpx mb-88rpx">
      <text class="text-46rpx font-bold text-#333 leading-46rpx">{{ t('pages-user.choosePaymethod.title') }}</text>
    </view>

    <view class="px-30rpx">
      <view class="flex-center-sb mb-66rpx" @click="changePayment(2)">
        <view class="flex items-center">
          <image
              class="w-44rpx h-44rpx shrink-0 mr-28rpx"
              mode="aspectFill"
              src="@img/chef/156.png"
          />
          <text class="text-32rpx lh-32rpx text-#333 font-500">{{
              t('pages-user.choosePaymethod.wallet')
            }}(${{ userStore.currenMerchantInfo?.balance || 0 }})
          </text>
        </view>
        <!-- 单选按钮 -->
        <image
            :src="
              payMethodOptions.payMethod === 2
                ? '/static/images/chef/133.png'
                : '/static/images/chef/134.png'
            "
            class="w-48rpx h-48rpx shrink-0"
            mode="aspectFit"
        />
      </view>

      <view class="flex-center-sb" @click="changePayment(1)">
        <view class="flex items-center">
          <image
              class="w-44rpx h-44rpx shrink-0 mr-28rpx"
              mode="aspectFill"
              src="@img/chef/138.png"
          />
          <text class="text-32rpx lh-32rpx text-#333 font-500">{{ t('pages-user.member.creditCard') }}</text>
        </view>
        <!-- 单选按钮 -->
        <image
            :src="
              payMethodOptions.payMethod === 1
                ? '/static/images/chef/133.png'
                : '/static/images/chef/134.png'
            "
            class="w-48rpx h-48rpx shrink-0"
            mode="aspectFit"
        />
      </view>

      <view v-if="payMethodOptions.cardId"
            class="h-98rpx rounded-16rpx bg-#F2F2F2 ml-72rpx mt-30rpx flex-center-sb px-28rpx">
        <text class="text-30rpx lh-30rpx text-#9E9E9E">{{ payMethodOptions.cardNumber }}</text>
        <view class="h-50rpx rounded-25rpx bg-white center px-20rpx text-24rpx lh-24rpx text-#333" @click="chooseCard">
          {{ t('pages-user.choosePaymethod.replace') }}
        </view>
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <fixed-bottom-large-btn
        :text="t('common.confirm')"
        class="z-100"
        fixed
        @click="confirmPayment"
    />
  </view>
</template>
<style>
page {
  background-color: #fff;
}
</style>