<template>
  <view class="hso-page">
    <view class="hso-card">
      <view class="hso-svc">{{ params.service_name }}</view>
      <view class="hso-deposit">定金 ¥{{ params.deposit }}</view>
    </view>
    <view class="hso-form">
      <view class="hso-row">
        <text class="hso-label">联系人</text>
        <input class="hso-input" v-model="contactName" placeholder="请输入联系人" />
      </view>
      <view class="hso-row">
        <text class="hso-label">联系电话</text>
        <input class="hso-input" type="number" v-model="contactPhone" placeholder="请输入联系电话" maxlength="11" />
      </view>
      <view class="hso-row">
        <text class="hso-label">小区地址</text>
        <input class="hso-input" v-model="serviceAddress" placeholder="请选择或输入小区地址" />
        <text class="hso-map-btn" @tap="chooseLocation">地图选点</text>
      </view>
      <view class="hso-row">
        <text class="hso-label">门牌号</text>
        <input class="hso-input" v-model="houseNumber" placeholder="如：1栋1单元103室" />
      </view>
      <view class="hso-row" @tap="showDate = true">
        <text class="hso-label">上门时间</text>
        <text class="hso-input" :class="{ ph: !serviceTime }">{{ serviceTime || '请选择上门时间' }}</text>
      </view>
      <view class="hso-row hso-row--col">
        <text class="hso-label">备注</text>
        <textarea class="hso-textarea" v-model="remark" placeholder="选填" />
      </view>
    </view>

    <view class="hso-bottom">
      <view class="hso-bottom-price">定金 <text>¥{{ params.deposit }}</text></view>
      <view class="hso-bottom-btn" @tap="submit">提交并支付</view>
    </view>

    <u-datetime-picker :show="showDate" :value="dateValue" mode="datetime" @confirm="onDate" @cancel="showDate = false" @close="showDate = false" />
  </view>
</template>

<script>
import { request, NavgateTo, isPhone } from '@/utils'
import { apiArr } from '@/api/homeService'
import { apiArr as commApi } from '@/api/community'

export default {
  data() {
    return {
      params: {},
      contactName: '',
      contactPhone: '',
      serviceAddress: '',
      houseNumber: '',
      serviceTime: '',
      dateValue: Date.now(),
      remark: '',
      showDate: false,
      submitting: false
    }
  },
  onLoad(options) {
    if (options.params) {
      try { this.params = JSON.parse(decodeURIComponent(options.params)) } catch (e) { this.params = {} }
    }
    // 先用本地缓存兜底（秒显），再异步拉后台房产数据覆盖为准确值
    this.fillFromStorage()
    this.loadBoundHouse()
    // 默认上门时间：当前时间 3 小时之后的整点
    this.initDefaultTime()
  },
  methods: {
    // 本地缓存兜底：小区地址（详细地址在前 + 小区名）、门牌号
    fillFromStorage() {
      const addr = uni.getStorageSync('currentCommunityAddr')
      const comm = uni.getStorageSync('changeCommData')
      const commName = (comm && comm.name) ? comm.name : ''
      if (addr) {
        this.serviceAddress = (addr + ' ' + commName).trim()
      } else if (commName) {
        this.serviceAddress = commName
      }
      const roomNo = uni.getStorageSync('currentRoomNo')
      if (roomNo) this.houseNumber = roomNo
    },
    // 拉取后台已绑定房产：用真实小区地址 + room_name 填充地址与门牌
    loadBoundHouse() {
      const loc = uni.getStorageSync('location') || {}
      const comm = uni.getStorageSync('changeCommData')
      request(commApi.commInfo, 'POST', {
        user_id: uni.getStorageSync('userId'),
        longitude: loc.lng,
        latitude: loc.lat,
        page_num: 1,
        page_size: 20
      }, { silent: false }).then(res => {
        const rows = (res && res.rows) ? res.rows : []
        if (!rows.length) return
        // 优先匹配当前选中的小区，否则取第一个
        let target = null
        if (comm && comm.id) target = rows.find(r => r.community_id === comm.id)
        if (!target) target = rows[0]
        const commName = target.name || ''
        if (target.addr) {
          this.serviceAddress = (target.addr + ' ' + commName).trim()
        } else if (commName) {
          this.serviceAddress = commName
        }
        const owner = (target.room_owner_list && target.room_owner_list.length) ? target.room_owner_list[0] : null
        if (owner && owner.room_name) this.houseNumber = owner.room_name
      }).catch(() => {})
    },
    // 默认上门时间 = 当前时间 + 3 小时，并向上取整到整点
    initDefaultTime() {
      const d = new Date()
      d.setHours(d.getHours() + 3)
      // 有分/秒/毫秒则进位到下一个整点
      if (d.getMinutes() > 0 || d.getSeconds() > 0 || d.getMilliseconds() > 0) {
        d.setHours(d.getHours() + 1)
      }
      d.setMinutes(0, 0, 0)
      this.dateValue = d.getTime()
      this.serviceTime = this.formatTime(d)
    },
    formatTime(d) {
      const p = n => String(n).padStart(2, '0')
      return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
    },
    // 地图选点：选择后回填地址（详细地址在前，小区/点位名称在后）
    chooseLocation() {
      const loc = uni.getStorageSync('location') || {}
      uni.chooseLocation({
        latitude: loc.lat,
        longitude: loc.lng,
        success: (res) => {
          const detail = res.name ? (res.address + ' ' + res.name) : res.address
          this.serviceAddress = (detail || '').trim()
        },
        fail: (err) => {
          if (err && err.errMsg && err.errMsg.indexOf('cancel') === -1) {
            uni.showToast({ title: '地图选点失败，请检查定位权限', icon: 'none' })
          }
        }
      })
    },
    onDate(e) {
      const d = new Date(e.value)
      this.dateValue = d.getTime()
      this.serviceTime = this.formatTime(d)
      this.showDate = false
    },
    submit() {
      if (!this.contactName) { uni.showToast({ title: '请输入联系人', icon: 'none' }); return }
      if (!isPhone(this.contactPhone)) { uni.showToast({ title: '联系电话格式不正确', icon: 'none' }); return }
      if (!this.serviceAddress) { uni.showToast({ title: '请选择或输入小区地址', icon: 'none' }); return }
      if (!this.houseNumber) { uni.showToast({ title: '请输入门牌号', icon: 'none' }); return }
      if (this.submitting) return
      this.submitting = true
      const userId = uni.getStorageSync('userId')
      const fullAddress = (this.serviceAddress + ' ' + this.houseNumber).trim()
      request(apiArr.orderCreate, 'POST', {
        user_id: userId,
        service_info_id: this.params.service_info_id,
        sku_id: this.params.sku_id,
        employee_id: this.params.employee_id,
        service_address: fullAddress,
        contact_name: this.contactName,
        contact_phone: this.contactPhone,
        service_time: this.serviceTime,
        remark: this.remark
      }).then(res => {
        this.payOrder(res.id, userId)
      }).catch(() => { this.submitting = false })
    },
    payOrder(orderId, userId) {
      request(apiArr.preorder, 'POST', { order_id: orderId, user_id: userId, trans_type: '71' }).then(pay => {
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: pay.timeStamp,
          nonceStr: pay.nonceStr,
          package: pay.package,
          signType: pay.signType || 'RSA',
          paySign: pay.paySign,
          success: () => {
            // 支付成功后查单回写
            request(apiArr.tradeQuery, 'POST', { order_id: orderId }, {}, false).finally(() => {
              uni.redirectTo({ url: '/packages/homeService/myOrders/index' })
            })
          },
          fail: () => {
            this.submitting = false
            uni.showToast({ title: '支付已取消', icon: 'none' })
            uni.redirectTo({ url: '/packages/homeService/myOrders/index' })
          }
        })
      }).catch(() => { this.submitting = false })
    }
  }
}
</script>

<style scoped>
.hso-page { background: #f5f5f5; min-height: 100vh; padding-bottom: 130rpx; }
.hso-card { background: #fff; padding: 28rpx 24rpx; display: flex; align-items: center; justify-content: space-between; }
.hso-svc { font-size: 30rpx; color: #222; font-weight: 600; }
.hso-deposit { font-size: 30rpx; color: #FF370B; font-weight: 600; }
.hso-form { background: #fff; margin-top: 16rpx; padding: 0 24rpx; }
.hso-row { display: flex; align-items: center; padding: 26rpx 0; border-bottom: 1rpx solid #f2f2f2; }
.hso-row--col { flex-direction: column; align-items: flex-start; }
.hso-label { width: 160rpx; font-size: 28rpx; color: #333; flex-shrink: 0; }
.hso-input { flex: 1; font-size: 28rpx; color: #222; }
.hso-input.ph { color: #b7b7b7; }
.hso-map-btn { flex-shrink: 0; margin-left: 16rpx; font-size: 26rpx; color: #FF370B; padding: 6rpx 16rpx; border: 1rpx solid #FF370B; border-radius: 28rpx; }
.hso-textarea { width: 100%; height: 120rpx; font-size: 28rpx; margin-top: 12rpx; }
.hso-bottom { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; display: flex; align-items: center; padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom)); box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.04); }
.hso-bottom-price { flex: 1; font-size: 26rpx; color: #333; }
.hso-bottom-price text { color: #FF370B; font-size: 36rpx; font-weight: 600; }
.hso-bottom-btn { background: linear-gradient(91deg, #FF7658, #FF370B); color: #fff; font-size: 30rpx; padding: 20rpx 60rpx; border-radius: 44rpx; }
</style>
