<template>
  <ie-page bg-color="#F6F8FA">
    <ie-navbar title="收银台" />
    <view>
      <view class="content">
        <view class="money-info flex flex-col items-center justify-center">
          <view class="">
            <text class="unit">¥</text>
            <text class="money">{{ formatPrice }}</text>
          </view>
          <view class="tip">待支付金额</view>
        </view>
        <view class="goods-info">
          <view class="goods-info-item flex items-center justify-between">
            <text class="tip">商品名称</text>
            <text>会员卡</text>
          </view>
          <view class="goods-info-item flex items-center justify-between">
            <text class="tip">商品金额</text>
            <text>¥{{ formatPrice }}</text>
          </view>
        </view>
      </view>
      <view class="tip mt-[30px] px-[20px]">选择支付方式</view>
      <view v-if="!isIOS" class="channel-list">
        <uv-radio-group v-model="payType" placement="column" iconPlacement="right" shape="square" size="24"
          iconSize="18">
          <uv-radio :name="payType">
            <view class="flex items-center" slot="label">
              <image class="channel-icon" mode="widthFix" src="@/static/wechat-pay.png" />
              <text>微信支付</text>
            </view>
          </uv-radio>
        </uv-radio-group>
      </view>
      <view class="btn-wrap">
        <uv-button type="primary" :loading="loading" loading-color="#FFFFFF" :text="`确认支付 ¥${formatPrice}`"
          @click="handlePay"></uv-button>
      </view>
    </view>
  </ie-page>
</template>
<script lang="ts" setup>
import { usePay } from '@/hooks/usePay';
import { useUserStore } from '@/store/userStore';

const userStore = useUserStore();
const { ready, formatPrice, pay, setCallback, loading } = usePay();
const isIOS = ref(false);
const payType = ref('wechat');

const handlePay = () => {
  setCallback({
    onSuccess: () => {
      uni.$ie.showSuccess('支付成功');
      setTimeout(async () => {
        userStore.checkInfoStudentComplete();
      }, 300);
    },
    onFailed: () => {
      uni.$ie.showError('支付失败');
    }
  });
  pay();
}
</script>
<style lang="scss" scoped>
.content {
  padding: 0 20px;
}

.money-info {
  padding: 30px 0;
}

.unit {
  font-size: 20px;
}

.money {
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 2px;
}

.tip {
  color: #7c7c7c;
  font-size: 15px;
}

.goods-info {
  margin-bottom: 26px;
}

.goods-info-item {
  &+& {
    margin-top: 10px;
  }
}

.channel-list {
  margin: 10px 10px 0 10px;
  border-radius: 12px;
  background-color: #ffffff;
  padding: 12px;
}

.u-radio+.u-radio {
  margin-top: 10px;
}

.u-radio:last-child {
  border-bottom: none !important;
}

.channel-icon {
  width: 40px;
  height: 40px;
  margin-right: 8px;
}

.btn-wrap {
  margin-top: 50px;
  padding: 0 20px;
}
</style>