<!--
 * @Date: 2023-12-20 14:11:11
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-25 07:08:02
 * @FilePath: /meihuaApp/src/components/payCard.vue
 * @Description: 文件描述
-->
<template>
  <div class="pay-card">
    <nut-action-sheet v-model:visible="props.visible" title="" @close="onClose">
      <view style="padding: 2rem 1rem; text-align: center;">
        <view style="font-size: 32rpx;">实付金额</view>
        <view style="color: red; margin: 10rpx 0;"><text style="font-size: 50rpx;">￥</text><text style="font-size: 80rpx;">{{ price }}</text></view>
        <view style="font-size: 28rpx; margin-bottom: 20rpx;">支付剩余时间 <text style="color: red;">{{ formatTime(remain_time) }}</text></view>
        <nut-button block color="#6A4925" @tap="goToPay">立即支付</nut-button>
      </view>
    </nut-action-sheet>
  </div>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref, watch, onMounted, onUnmounted } from 'vue'

/**
 * 格式化时间
 * @param {*} seconds
 */
 function formatTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;

  let formattedTime = "";

  if (hours > 0) {
    formattedTime += hours.toString().padStart(2, "0") + ":";
  }

  if (minutes > 0 || hours > 0) {
    formattedTime += minutes.toString().padStart(2, "0") + ":";
  }

  formattedTime += remainingSeconds.toString().padStart(2, "0");

  return formattedTime;
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: {},
  },
});

const emit = defineEmits(['close']);

const onClose = () => {
  emit('close');
}

const id = ref('');
const price = ref('');
const remain_time = ref('');

let timeId = null;

watch(
  () => props.visible,
  (val) => {
    if (val) {
      id.value = props.data.id;
      price.value = props.data.price;
      remain_time.value = props.data.remain_time;
    } else {

    }
  }
)

onMounted(() => {
  // 进入页面后，开始倒计时
  timeId = setInterval(() => {
    remain_time.value ? remain_time.value -= 1 : 0;
  }, 1000);
})

onUnmounted(() => {
  timeId && clearInterval(timeId);
})

const goToPay = () => {
  Taro.navigateTo({
    url: '/pages/payInfo/index?id=123',
  });
  // this.$parent.sdk.post('c/app/prepay', {
  //       id: this.params.id
  //     }).then(res => {
  //       if (res.data.ret === 'OK') {
  //         let pay = res.data.content.payargs;
  //         wx.requestPayment({
  //           timeStamp: pay.timeStamp,
  //           nonceStr: pay.nonceStr,
  //           package: pay.package,
  //           signType: pay.signType,
  //           paySign: pay.paySign,
  //           success: (result) => {
  //             that.$parent.sdk.post('c/order/paySuccess', {
  //               id: that.params.id
  //             }).then(pRes => {
  //               if (pRes.data.ret === 'OK') {
  //                 that.Toast('success', '感谢您的捐赠', 3000)
  //                 wx.navigateBack({
  //                   delta: 1
  //                 });
  //               } else {
  //                 that.Toast('fail', pRes.data.err, 3000);
  //               }
  //             }).catch(err => {
  //               console.error(err)
  //             })
  //           }
  //         });
  //       } else {
  //         this.Toast('fail', res.data.msg, 3000);
  //       }
  //     })
}
</script>

<style lang="less">

</style>