<template>
  <view class="pre_stored_page">
    <view class="house_name_cell">
      预缴房屋
      <text> {{ useModel.formData.value?.full_name || '' }} </text>
    </view>

    <view class="pre_stored_card_form">
      <view class="card_title"> 预缴金额 </view>
      <view class="card_input_form">
        <view class="addon_before"> ¥ </view>
        <view class="input_value">
          <input
            type="digit"
            placeholder-style="font-size:32rpx;"
            v-model="useModel.formData.value.amount"
            placeholder="请输入预缴金额"
          />
        </view>
      </view>
      <view class="price_select_list">
        <view
          v-for="(i, index) in pay_price_list"
          :key="`pay_${index}`"
          class="item"
          @click="useModel.formData.value.amount = i"
        >
          {{ i }}元
        </view>
      </view>
    </view>

    <view class="house_name_cell">
      预缴方式
      <view class="pay_method">
        <image src="/static/svg/wx_pay.svg" mode="widthFix" />
        微信支付
      </view>
    </view>

    <view class="foot_pay_btn">
      <hs-button
        type="disabled"
        label="立即支付"
        v-if="!useModel.formData.value.amount || useModel?.payDisabled?.value"
        :loading="useModel?.payDisabled?.value"
        size="md"
      />
      <hs-button type="primary" label="立即支付" v-else size="md" @click="method?.handlePay" />
    </view>
  </view>
</template>

<script setup lang="ts">
import useModel from './model'
import method from './method'
const pay_value = ref('')
const pay_price_list = ['500', '1000', '3000', '5000']
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { ref } from 'vue'
const capsuleRect = ref<any>({})

const goToPage = (url: string) => {
  uni.navigateTo({ url: url })
}
onShow(() => {
  if (useModel?.housePrepaymentPayment?.value?.id) {
    method?.loadShow()
  }
  console.log('onShow')
})
const handlePay = () => {
  uni.showModal({
    title: '提示',
    content: '当前项目暂未开放功能！',
    showCancel: false,
    confirmColor: '#0082FA',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}

onUnload(() => {
  useModel.loadingShowNumber.value = -1
  useModel.housePrepaymentPayment.value = undefined
})

onLoad(e => {
  useModel.loadingShowNumber.value = -1
  useModel.formData.value = e
})
</script>

<style lang="scss">
@import './style.scss';
</style>
