<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '转换',
  },
}
</route>
<template>
  <view class="min-h-screen pb-100">
    <NavBar :title="title" title-color="#333">
      <template #right>
        <image
          @click="onWithdrawalDetail"
          src="/static/images/page-sub/recharge.png"
          class="w-24 h-24"
        />
      </template>
    </NavBar>
    <view
      class="m-15 text-white flex rounded-tl-10 rounded-br-10 justify-between items-center p-15 bg-[linear-gradient(90deg,rgba(59,129,243,0.5),#3B81F3)]"
    >
      <view class="text-14">{{ type === 0 ? '养老金' : '团队佣金' }}余额</view>
      <view class="text-17 font-bold">
        {{ type === 0 ? userStore.userInfo?.moneyold : userStore.userInfo?.moneyyong }}
      </view>
    </view>
    <view class="p-15 bg-white shadow-[0_-2px_3px_rgba(10,68,245,0.1)] rounded-10">
      <view class="mt-15">
        <view
          class="flex items-center text-14 mt-15 text-#333 p-16 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10"
        >
          <input
            v-model="convertNum"
            type="number"
            placeholder="转出金额"
            class="text-14 text-#333 flex-1"
          />
          <view
            class="text-12 text-gradient"
            @click="
              convertNum = type === 0 ? userStore.userInfo?.moneyold : userStore.userInfo?.moneyyong
            "
          >
            全部
          </view>
        </view>
        <view class="text-14 text-#889BC6 mt-30">提现说明（TIPS）</view>
        <view class="text-12 text-#889BC6 mt-15">
          <view>1、如遇到系统结算繁忙，转换将会延迟到账</view>
          <view class="mt-4">2、提现将会提现至您的工商银行卡;</view>
        </view>
      </view>
    </view>
    <view
      class="bg-white fixed bottom-0 left-0 right-0 px-15 py-10 shadow-[0_0_10px_rgba(10,68,245,0.1)]"
    >
      <view class="flex items-center pb-safe">
        <view
          class="btn-gradient flex-1 text-center text-white rounded-full text-14 px-30 py-10"
          @click="onSubmit"
        >
          确认转换至{{ type === 0 ? '余额' : '养老金' }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import { convertScoreAPI, getOldMoneyTransferAPI, getYongMoneyTransferAPI } from '@/service'
import { useUserStore } from '@/store'
import { mergeStep, showModal } from '@/utils'

const userStore = useUserStore()

const convertNum = ref('')

const onWithdrawalDetail = () => {
  uni.navigateTo({
    url: `/pages-sub/asset/index?tabIndex=${type.value ? 3 : 2}`,
  })
}

const onSubmit = mergeStep(async () => {
  await showModal('确认转换？')
  const request = type.value === 0 ? getOldMoneyTransferAPI : getYongMoneyTransferAPI
  await request({
    money: convertNum.value,
  })
  await showModal('转换成功')
  userStore.loadUserInfo()
  onWithdrawalDetail()
})

const type = ref(0)
onLoad((options) => {
  type.value = Number(options.type ?? 0)
})

const title = computed(() => {
  return type.value === 0 ? '养老金转余额' : '团队佣金转养老金'
})
</script>

<style scoped></style>
