<script setup lang="ts">
import * as R from 'ramda'
import {getCardList} from "@/service";
import {useUserStore} from "@/store";

const props = defineProps<{
  modelValue?: number
  userCardId?: string
}>()

const emits = defineEmits<{
  "update:modelValue": [value: number];
  "update:userCardId": [value: string];
}>();

const {t} = useI18n()
const userStore = useUserStore()

// 支付方式：1-paynow支付 2-信用卡支付 2-余额支付
const payMethod = ref(props.modelValue || 1);

const form = ref({
  cardNumber: '',
  userCardId: '',
})

function handleChoosePayWay(method: number) {
  payMethod.value = method
  emits(
      "update:modelValue",
      method
  );
}

function handleSetFromData(data: {
  cardNumber: string,
  id: string,
}) {
  console.log(data)
  const {cardNumber, id} = R.pick(['cardNumber', 'id'], data || {})
  form.value = {
    cardNumber,
    userCardId: id,
  }
  emits(
      "update:userCardId",
      id
  );
}

function handleReplaceCard() {
  uni.navigateTo({
    url: '/pages-shop/pages/select-credit-card/index',
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      acceptDataFromOpenedPage: function (data: {
        cardNumber: string,
        id: string,
      }) {
        handleSetFromData(data)
      },
    }
  })
}

function handleAddCard() {
  uni.navigateTo({
    url: '/pages-user/pages/credit-card/add/index',
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      acceptDataFromOpenedPage: function (data: {
        cardNumber: string,
        id: string,
      }) {
        handleSetFromData(data)
      },
    }
  })
}

function getPayInfo() {
  if (R.equals(payMethod.value, 2)) {
    return {
      cardNumber: form.value.cardNumber,
      userCardId: form.value.userCardId
    }
  }
}


async function getUserCar() {
  try {
    const res = await getCardList({}, {
      pageNum: 1,
      pageSize: 1,
    })
    console.log('car', res)
    if (Array.isArray(res.rows) && res.rows.length > 0) {
      handleSetFromData(res.rows[0] || {})
    }
  } catch (e) {
  }
}

onMounted(() => {
  getUserCar()
})

defineOptions({
  name: "PaymentMethod",
});


defineExpose({
  getPayInfo
})


</script>
<template>
  <view class="bg-white rounded-20rpx">
    <view class="py-28rpx px-24rpx">
      <view class="text-28-bold">{{ t('common.payment-method') }}</view>

      <view class="mt-30rpx flex items-center space-x-10rpx">
        <view
            class="box-border w-160rpx h-106rpx pl-16rpx pt-20rpx flex flex-col border-2rpx border-solid border-#DFDFDF rounded-16rpx transition-all"
            :class="[payMethod===1&&'!border-#ED7EEF']"
            @click="handleChoosePayWay(1)"
        >
          <image class="w-110rpx h-32rpx shrink-0" src="@img/2118@2x.png"></image>
          <view class="mt-8rpx text-20-bold">{{ t('common.pay-now') }}</view>
        </view>
        <view
            class="box-border w-160rpx h-106rpx pl-16rpx pt-20rpx flex flex-col border-2rpx border-solid border-#DFDFDF rounded-16rpx transition-all"
            :class="[payMethod===2&&'!border-#ED7EEF']"
            @click="handleChoosePayWay(2)"
        >
          <image class="w-40rpx h-32rpx shrink-0" src="@img/1851@2x.png"></image>
          <view class="mt-8rpx text-20-bold">{{ t('common.credit-card') }}</view>
        </view>
        <view
            class="relative box-border w-160rpx h-106rpx pl-16rpx pt-20rpx flex flex-col border-2rpx border-solid border-#DFDFDF rounded-16rpx transition-all"
            :class="[payMethod===3&&'!border-#ED7EEF']"
            @click="handleChoosePayWay(3)"
        >
          <view class="absolute right-0 top-0 px-8rpx h-32rpx center bg-#FED1FF rounded-[0rpx+16rpx+0rpx+10rpx]"
                v-if="userStore.isMember"
          >
            <text class="text-16rpx text-primary font-bold lh-16rpx">{{ t('common.discount') }}!</text>
          </view>
          <image class="w-32rpx h-32rpx shrink-0" src="@img/icon_pay_wallet@2x.png"></image>
          <view class="mt-8rpx text-20-bold">{{ t('common.store-credits') }}</view>
        </view>


      </view>
      <view class="mt-20rpx text-24rpx text-#999 font-bold lh-34rpx">
        <text class="" v-show="payMethod===1">{{ t('common.pay-now-description') }}</text>
        <text class="" v-show="payMethod===2">{{ t('common.credit-card-description') }}</text>
      </view>
    </view>
    <view class="p-[24rpx+30rpx+32rpx] flex items-center border-top" v-if="R.equals(+payMethod,1)">
      <image class="shrink-0 mr-20rpx w-36rpx h-36rpx" src="@img/1850@2x.png"></image>
      <view class="text-24rpx text-#999 font-bold lh-34rpx">
        {{ t('common.pay-now-presentation-for-payment') }}
      </view>
    </view>
    <view class="p-[24rpx+30rpx+32rpx] flex items-center justify-between border-top"
          v-if="R.equals(+payMethod,2)">
      <view class="flex-1 flex items-center">
        <image class="w-198rpx h-42rpx  shrink-0 mr-20rpx" src="@img/20226@2x.png"></image>
        <view class="text-28-bold">{{ form.cardNumber }}</view>
      </view>
      <view class="inline-flex items-center ml-20rpx">
        <wd-button plain
                   custom-class="!h-40rpx !w-114rpx !min-w-auto !text-24rpx  !lh-24rpx "
                   block
                   v-if="form.cardNumber"
                   @click="handleReplaceCard"
        >
          {{ t('common.replace') }}
        </wd-button>
        <wd-button plain
                   custom-class="!h-40rpx !w-114rpx !min-w-auto !text-24rpx  !lh-24rpx "
                   block
                   v-else
                   @click="handleAddCard"
        >
          {{ t('common.add') }}
        </wd-button>
      </view>
    </view>
  </view>

</template>

<style scoped lang="scss"></style>
