<template>
  <view class="rental-add-page">
    <!-- 顶部导航 -->
    <view class="custom-nav safe-area-top">
      <view class="nav-content">
        <view class="nav-btn back-btn" @click="goBack">
          <uni-icons type="left" size="22" color="#1E293B"></uni-icons>
        </view>
        <text class="nav-title">{{isEdit ? '编辑租赁' : '办理入住'}}</text>
        <view class="nav-btn placeholder"></view>
      </view>
    </view>

    <!-- 表单内容 -->
    <scroll-view scroll-y class="form-scroll" :scroll-into-view="scrollIntoView" scroll-with-animation>
      <view class="form-container">
        <!-- 房间信息卡片 -->
        <view class="section-card" id="section-room">
          <view class="section-header">
            <view class="section-icon room-icon">
              <uni-icons type="home-filled" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="section-title">房间信息</text>
            <text class="section-badge" v-if="form.roomId">已选择</text>
          </view>
          
          <!-- 公寓选择 -->
          <view class="form-group">
            <text class="group-label">选择公寓 <text class="required">*</text></text>
            <view class="apartment-selector">
              <scroll-view scroll-x class="apartment-scroll" show-scrollbar="false">
                <view class="apartment-list">
                  <view
                    v-for="apt in apartments"
                    :key="apt.id"
                    class="apartment-item"
                    :class="{ active: selectedApartmentId === apt.id }"
                    @click="selectApartment(apt.id)"
                  >
                    <view class="apt-content">
                      <text class="apt-name">{{apt.name}}</text>
                    </view>
                    <view class="apt-check" v-if="selectedApartmentId === apt.id">
                      <uni-icons type="checkmarkempty" size="14" color="#FFFFFF"></uni-icons>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>

          <!-- 房间选择 -->
          <view class="form-group" v-if="selectedApartmentId">
            <text class="group-label">选择房间 <text class="required">*</text></text>
            <view class="room-grid">
              <view 
                v-for="room in availableRooms" 
                :key="room.id"
                class="room-card"
                :class="{ active: form.roomId === room.id }"
                @click="selectRoom(room)"
              >
                <view class="room-header">
                  <text class="room-number">{{room.roomNumber}}</text>
                  <view class="room-check" v-if="form.roomId === room.id">
                    <uni-icons type="checkmarkempty" size="12" color="#FFFFFF"></uni-icons>
                  </view>
                </view>
                <view class="room-info">
                  <text class="room-price">¥{{room.rent || 0}}<text class="price-unit">/月</text></text>
                  <text class="room-area" v-if="room.area">{{room.area}}m²</text>
                </view>
              </view>
              <view v-if="availableRooms.length === 0" class="empty-rooms">
                <uni-icons type="info-filled" size="32" color="#CBD5E1"></uni-icons>
                <text>该公寓暂无空房</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 租客信息卡片 -->
        <view class="section-card" id="section-renter">
          <view class="section-header">
            <view class="section-icon renter-icon">
              <uni-icons type="person-filled" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="section-title">租客信息</text>
          </view>
          
          <view class="form-group">
            <text class="group-label">租客姓名 <text class="required">*</text></text>
            <view class="input-wrapper">
              <uni-icons type="person" size="18" color="#94A3B8" class="input-icon"></uni-icons>
              <input 
                type="text" 
                v-model="form.renterName" 
                placeholder="请输入租客姓名"
                class="form-input"
                maxlength="20"
              />
            </view>
          </view>

          <view class="form-row">
            <view class="form-group half">
              <text class="group-label">联系电话</text>
              <view class="input-wrapper">
                <uni-icons type="phone-filled" size="18" color="#94A3B8" class="input-icon"></uni-icons>
                <input 
                  type="number" 
                  v-model="form.renterPhone" 
                  placeholder="选填"
                  class="form-input"
                  maxlength="11"
                />
              </view>
            </view>
            <view class="form-group half">
              <text class="group-label">身份证号</text>
              <view class="input-wrapper">
                <uni-icons type="wallet-filled" size="18" color="#94A3B8" class="input-icon"></uni-icons>
                <input 
                  type="idcard" 
                  v-model="form.renterIdCard" 
                  placeholder="选填"
                  class="form-input"
                  maxlength="18"
                />
              </view>
            </view>
          </view>
        </view>

        <!-- 合同信息卡片 -->
        <view class="section-card" id="section-contract">
          <view class="section-header">
            <view class="section-icon contract-icon">
              <uni-icons type="compose" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="section-title">合同信息</text>
          </view>

          <!-- 付租方式 -->
          <view class="form-group">
            <text class="group-label">付租方式 <text class="required">*</text></text>
            <view class="payment-grid">
              <view 
                v-for="type in paymentTypes" 
                :key="type.value"
                class="payment-item"
                :class="{ active: form.paymentType === type.value }"
                @click="selectPaymentType(type.value)"
              >
                <text class="payment-label">{{type.label}}</text>
                <text class="payment-desc">{{type.desc}}</text>
                <view class="payment-indicator" v-if="form.paymentType === type.value">
                  <uni-icons type="checkmarkempty" size="12" color="#FFFFFF"></uni-icons>
                </view>
              </view>
            </view>
          </view>

          <!-- 租期 -->
          <view class="form-group" v-if="!isEdit">
            <text class="group-label">租期 <text class="required">*</text></text>
            <view class="period-scroll">
              <scroll-view scroll-x show-scrollbar="false">
                <view class="period-list">
                  <view 
                    v-for="period in periodOptions" 
                    :key="period.value"
                    class="period-tag"
                    :class="{ active: leasePeriod === period.value }"
                    @click="selectPeriod(period.value)"
                  >
                    {{period.label}}
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>

          <!-- 日期选择 -->
          <view class="form-row">
            <view class="form-group half">
              <text class="group-label">开始日期 <text class="required">*</text></text>
              <picker mode="date" :value="form.startDate" @change="onStartDateChange">
                <view class="picker-box">
                  <text class="picker-text" :class="{ placeholder: !form.startDate }">{{form.startDate || '请选择'}}</text>
                  <uni-icons type="calendar" size="18" color="#64748B"></uni-icons>
                </view>
              </picker>
            </view>
            <view class="form-group half">
              <text class="group-label">结束日期 <text class="required">*</text></text>
              <picker mode="date" :value="form.endDate" @change="onEndDateChange" v-if="isEdit">
                <view class="picker-box">
                  <text class="picker-text" :class="{ placeholder: !form.endDate }">{{form.endDate || '请选择'}}</text>
                  <uni-icons type="calendar" size="18" color="#64748B"></uni-icons>
                </view>
              </picker>
              <view class="static-box" v-else>
                <text class="static-text">{{form.endDate || '自动计算'}}</text>
                <uni-icons type="calendar-filled" size="18" color="#CBD5E1"></uni-icons>
              </view>
            </view>
          </view>

          <!-- 金额信息 -->
          <view class="form-row">
            <view class="form-group half">
              <text class="group-label">{{form.paymentType === 'yearly' ? '年租金' : '月租金'}} <text class="required">*</text></text>
              <view class="input-wrapper money">
                <text class="currency">¥</text>
                <input 
                  type="digit" 
                  v-model="form.rent" 
                  :placeholder="form.paymentType === 'yearly' ? '年租金' : '月租金'"
                  class="form-input"
                />
              </view>
            </view>
            <view class="form-group half">
              <text class="group-label">押金</text>
              <view class="input-wrapper money">
                <text class="currency">¥</text>
                <input 
                  type="digit" 
                  v-model="form.deposit" 
                  placeholder="押金金额"
                  class="form-input"
                />
              </view>
            </view>
          </view>

          <!-- 经办人 -->
          <view class="form-group">
            <text class="group-label">经办人</text>
            <view class="input-wrapper">
              <uni-icons type="personadd-filled" size="18" color="#94A3B8" class="input-icon"></uni-icons>
              <input 
                type="text" 
                v-model="form.operator" 
                placeholder="请输入经办人"
                class="form-input"
                maxlength="20"
              />
            </view>
          </view>
        </view>

        <!-- 水电表读数卡片 -->
        <view class="section-card" id="section-meter">
          <view class="section-header">
            <view class="section-icon meter-icon">
              <uni-icons type="settings-filled" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="section-title">水电表读数</text>
            <text class="section-hint">选填</text>
          </view>
          
          <view class="meter-grid">
            <view class="meter-item">
              <view class="meter-icon-box water">
                <uni-icons type="info-filled" size="24" color="#3B82F6"></uni-icons>
              </view>
              <view class="meter-content">
                <text class="meter-label">水表起始读数</text>
                <view class="meter-input-box">
                  <input 
                    type="digit" 
                    v-model="form.waterStartReading" 
                    placeholder="0"
                    class="meter-input"
                  />
                  <text class="meter-unit">吨</text>
                </view>
              </view>
            </view>
            <view class="meter-item">
              <view class="meter-icon-box electric">
                <uni-icons type="info-filled" size="24" color="#F59E0B"></uni-icons>
              </view>
              <view class="meter-content">
                <text class="meter-label">电表起始读数</text>
                <view class="meter-input-box">
                  <input 
                    type="digit" 
                    v-model="form.electricStartReading" 
                    placeholder="0"
                    class="meter-input"
                  />
                  <text class="meter-unit">度</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 备注卡片 -->
        <view class="section-card" id="section-remark">
          <view class="section-header">
            <view class="section-icon remark-icon">
              <uni-icons type="chatbubble-filled" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="section-title">备注信息</text>
            <text class="section-hint">选填</text>
          </view>
          <view class="textarea-wrapper">
            <textarea
              v-model="form.remark"
              placeholder="添加备注信息..."
              class="form-textarea"
              maxlength="200"
            />
            <text class="char-count">{{form.remark.length}}/200</text>
          </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-section">
          <button
            class="submit-btn"
            :class="{ active: canSubmit, loading: submitLoading }"
            :disabled="!canSubmit || submitLoading"
            @click="submitForm"
          >
            <text v-if="!submitLoading">{{isEdit ? '保存修改' : '确认办理'}}</text>
            <view v-else class="btn-loading">
              <view class="loading-dot"></view>
              <view class="loading-dot"></view>
              <view class="loading-dot"></view>
            </view>
          </button>
        </view>

        <!-- 底部安全区域 -->
        <view class="safe-area-bottom" style="height: 160rpx;"></view>
      </view>
    </scroll-view>

    <!-- 成功弹窗 -->
    <view class="success-modal" v-if="showSuccess" @click="closeSuccess">
      <view class="success-content" @click.stop>
        <view class="success-icon">
          <view class="success-circle">
            <uni-icons type="checkmarkempty" size="48" color="#FFFFFF"></uni-icons>
          </view>
        </view>
        <text class="success-title">{{isEdit ? '修改成功' : '办理成功'}}</text>
        <text class="success-desc">{{isEdit ? '租赁信息已更新' : '租客入住登记已完成'}}</text>
        <button class="success-btn" @click="closeSuccess">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
  import rentalApi from '@/api/rental.js'
  import apartmentApi from '@/api/apartment.js'
  import roomApi from '@/api/room.js'
  
  export default {
    data() {
      return {
        isEdit: false,
        rentalId: null,
        submitLoading: false,
        showSuccess: false,
        scrollIntoView: '',
        apartments: [],
        rooms: [],
        selectedApartmentId: null,
        leasePeriod: 1,
        form: {
          roomId: '',
          renterName: '',
          renterPhone: '',
          renterIdCard: '',
          paymentType: 'monthly',
          startDate: '',
          endDate: '',
          rent: '',
          deposit: '',
          operator: '',
          waterStartReading: '',
          electricStartReading: '',
          remark: ''
        },
        paymentTypes: [
          { label: '月租', value: 'monthly', desc: '每月支付' },
          { label: '年租', value: 'yearly', desc: '每年支付' }
        ]
      }
    },
    computed: {
      availableRooms() {
        // 编辑模式下显示所有房间，新增模式下只显示空置房间
        if (this.isEdit) {
          return this.rooms
        }
        return this.rooms.filter(room => room.status === 'empty' || room.status === 'vacant')
      },
      periodOptions() {
        if (this.form.paymentType === 'monthly') {
          return Array.from({ length: 24 }, (_, i) => ({
            label: `${i + 1}个月`,
            value: i + 1
          }))
        } else if (this.form.paymentType === 'quarterly') {
          return Array.from({ length: 8 }, (_, i) => ({
            label: `${i + 1}个季度`,
            value: i + 1
          }))
        } else if (this.form.paymentType === 'half_year') {
          return Array.from({ length: 6 }, (_, i) => ({
            label: `${i + 1}个半年`,
            value: i + 1
          }))
        } else {
          return Array.from({ length: 10 }, (_, i) => ({
            label: `${i + 1}年`,
            value: i + 1
          }))
        }
      },
      canSubmit() {
        return this.form.roomId && this.form.renterName.trim() && this.form.startDate && this.form.endDate && this.form.rent
      }
    },
    onLoad(options) {
      this.loadApartments()
      this.form.startDate = this.formatDate(new Date())
      
      if (options.id) {
        // 编辑模式
        this.isEdit = true
        this.rentalId = options.id
        this.loadRentalDetail(options.id)
      } else if (options.roomId) {
        // 从房间预选
        this.preSelectRoom(options.roomId)
      }
    },
    watch: {
      'form.paymentType': function() {
        if (!this.isEdit) {
          this.leasePeriod = 1
          this.updateEndDate()
        }
      },
      leasePeriod: function() {
        if (!this.isEdit) {
          this.updateEndDate()
        }
      },
      'form.startDate': function() {
        if (!this.isEdit) {
          this.updateEndDate()
        }
      }
    },
    methods: {
      async loadApartments() {
        try {
          const res = await apartmentApi.list()
          if (res.data) {
            this.apartments = res.data
          }
        } catch (error) {
          console.error('加载公寓列表失败:', error)
        }
      },

      async loadRooms(apartmentId) {
        try {
          const res = await roomApi.list({ apartmentId })
          if (res.data) {
            this.rooms = res.data
          }
        } catch (error) {
          console.error('加载房间列表失败:', error)
        }
      },
      
      async loadRentalDetail(id) {
        try {
          const res = await rentalApi.getDetail(id)
          if (res.data) {
            const data = res.data
            this.selectedApartmentId = data.Room?.Apartment?.id
            await this.loadRooms(this.selectedApartmentId)
            
            this.form = {
              roomId: data.roomId,
              renterName: data.Renter?.name || '',
              renterPhone: data.Renter?.phone || '',
              renterIdCard: data.Renter?.idCard || '',
              paymentType: data.paymentType || 'monthly',
              startDate: data.startDate,
              endDate: data.endDate,
              rent: String(data.rent || ''),
              deposit: String(data.deposit || ''),
              operator: data.operator || '',
              waterStartReading: String(data.waterMeterStart || ''),
              electricStartReading: String(data.electricityMeterStart || ''),
              remark: data.remark || ''
            }
          }
        } catch (error) {
          console.error('加载租赁详情失败:', error)
          uni.showToast({ title: '加载详情失败', icon: 'none' })
        }
      },
      
      async preSelectRoom(roomId) {
        try {
          const res = await roomApi.getDetail(roomId)
          if (res.data) {
            const room = res.data
            this.selectedApartmentId = room.apartmentId
            await this.loadRooms(room.apartmentId)
            this.form.roomId = roomId
            this.form.rent = room.rent || ''
          }
        } catch (error) {
          console.error('加载房间详情失败:', error)
        }
      },
      
      selectApartment(id) {
        this.selectedApartmentId = id
        this.form.roomId = ''
        this.loadRooms(id)
      },
      
      selectRoom(room) {
        // 新增模式下检查房间是否已出租
        if (!this.isEdit && room.status === 'rented') {
          uni.showToast({ title: '该房间已出租', icon: 'none' })
          return
        }
        this.form.roomId = room.id
        this.form.rent = room.rent || ''
      },
      
      selectPaymentType(type) {
        this.form.paymentType = type
      },
      
      selectPeriod(period) {
        this.leasePeriod = period
      },
      
      onStartDateChange(e) {
        this.form.startDate = e.detail.value
      },
      
      onEndDateChange(e) {
        this.form.endDate = e.detail.value
      },
      
      updateEndDate() {
        if (!this.form.startDate) return
        const startDate = new Date(this.form.startDate)
        const endDate = new Date(startDate)
        
        if (this.form.paymentType === 'monthly') {
          endDate.setMonth(endDate.getMonth() + this.leasePeriod)
        } else if (this.form.paymentType === 'quarterly') {
          endDate.setMonth(endDate.getMonth() + this.leasePeriod * 3)
        } else if (this.form.paymentType === 'half_year') {
          endDate.setMonth(endDate.getMonth() + this.leasePeriod * 6)
        } else {
          endDate.setFullYear(endDate.getFullYear() + this.leasePeriod)
        }
        
        this.form.endDate = this.formatDate(endDate)
      },
      
      async submitForm() {
        if (!this.canSubmit) return
        
        this.submitLoading = true
        try {
          const submitData = {
            roomId: this.form.roomId,
            renterName: this.form.renterName.trim(),
            renterPhone: this.form.renterPhone.trim() || null,
            renterIdCard: this.form.renterIdCard.trim() || null,
            paymentType: this.form.paymentType,
            startDate: this.form.startDate,
            endDate: this.form.endDate,
            rent: parseFloat(this.form.rent),
            deposit: parseFloat(this.form.deposit) || 0,
            operator: this.form.operator.trim() || null,
            waterStartReading: this.form.waterStartReading ? parseFloat(this.form.waterStartReading) : null,
            electricStartReading: this.form.electricStartReading ? parseFloat(this.form.electricStartReading) : null,
            remark: this.form.remark.trim() || null
          }
          
          if (this.isEdit) {
            await rentalApi.update(this.rentalId, submitData)
          } else {
            await rentalApi.createWithRenter(submitData)
          }
          
          this.showSuccess = true
        } catch (error) {
          console.error(this.isEdit ? '修改失败:' : '办理入住失败:', error)
          uni.showToast({
            title: this.isEdit ? '修改失败' : '办理失败',
            icon: 'none'
          })
        } finally {
          this.submitLoading = false
        }
      },
      
      closeSuccess() {
        this.showSuccess = false
        uni.navigateBack()
      },
      
      formatDate(date) {
        const d = new Date(date)
        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
      },
      
      goBack() {
        uni.navigateBack()
      }
    }
  }
</script>

<style scoped>
  .rental-add-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #F0F7FF 0%, #F8FAFC 200rpx);
    display: flex;
    flex-direction: column;
  }

  /* 导航栏 */
  .custom-nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20rpx);
    border-bottom: 1rpx solid rgba(226, 232, 240, 0.6);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 24rpx;
    height: 96rpx;
  }

  .nav-btn {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
  }

  .back-btn:active {
    background: rgba(37, 99, 235, 0.1);
  }

  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #1E293B;
  }

  .placeholder {
    width: 72rpx;
  }

  /* 表单滚动区 */
  .form-scroll {
    flex: 1;
  }

  .form-container {
    padding: 32rpx;
  }

  /* 页面标题 */
  .page-header {
    margin-bottom: 40rpx;
  }

  .header-title {
    display: block;
    font-size: 44rpx;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 12rpx;
  }

  .header-subtitle {
    font-size: 28rpx;
    color: #64748B;
  }

  /* 卡片样式 */
  .section-card {
    background: #FFFFFF;
    border-radius: 28rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
    border: 1rpx solid rgba(226, 232, 240, 0.5);
  }

  .section-header {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 28rpx;
  }

  .section-icon {
    width: 48rpx;
    height: 48rpx;
    border-radius: 14rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .room-icon { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); }
  .renter-icon { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
  .contract-icon { background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); }
  .meter-icon { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }
  .remark-icon { background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%); }

  .section-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #1E293B;
    flex: 1;
  }

  .section-badge {
    font-size: 22rpx;
    color: #10B981;
    background: rgba(16, 185, 129, 0.1);
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
  }

  .section-hint {
    font-size: 24rpx;
    color: #94A3B8;
  }

  /* 表单组 */
  .form-group {
    margin-bottom: 28rpx;
  }

  .form-group:last-child {
    margin-bottom: 0;
  }

  .form-row {
    display: flex;
    gap: 24rpx;
  }

  .form-group.half {
    flex: 1;
    margin-bottom: 0;
  }

  .group-label {
    display: block;
    font-size: 26rpx;
    color: #475569;
    margin-bottom: 16rpx;
    font-weight: 500;
  }

  .required {
    color: #EF4444;
  }

  /* 输入框 */
  .input-wrapper {
    display: flex;
    align-items: center;
    background: #F8FAFC;
    border-radius: 16rpx;
    padding: 0 24rpx;
    height: 88rpx;
    border: 2rpx solid transparent;
    transition: all 0.2s ease;
  }

  .input-wrapper:focus-within {
    background: #FFFFFF;
    border-color: #3B82F6;
    box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.1);
  }

  .input-icon {
    margin-right: 16rpx;
  }

  .form-input {
    flex: 1;
    height: 100%;
    font-size: 30rpx;
    color: #1E293B;
    background: transparent;
  }

  .input-wrapper.money {
    padding-left: 32rpx;
  }

  .currency {
    font-size: 32rpx;
    color: #3B82F6;
    font-weight: 600;
    margin-right: 12rpx;
  }

  /* 公寓选择器 */
  .apartment-selector {
    margin: 0 -32rpx;
    padding: 0 32rpx;
  }

  .apartment-scroll {
    width: 100%;
  }

  .apartment-list {
    display: flex;
    gap: 16rpx;
    padding-bottom: 8rpx;
  }

  .apartment-item {
    flex-shrink: 0;
    min-width: 200rpx;
    background: #F8FAFC;
    border-radius: 20rpx;
    padding: 20rpx 24rpx;
    border: 2rpx solid transparent;
    position: relative;
    transition: all 0.2s ease;
  }

  .apartment-item.active {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-color: #3B82F6;
  }

  .apt-content {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
  }

  .apt-name {
    font-size: 28rpx;
    font-weight: 600;
    color: #1E293B;
  }

  .apt-count {
    font-size: 22rpx;
    color: #64748B;
  }

  .apt-check {
    position: absolute;
    top: -8rpx;
    right: -8rpx;
    width: 32rpx;
    height: 32rpx;
    background: #3B82F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.4);
  }

  /* 房间网格 */
  .room-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16rpx;
  }

  .room-card {
    background: #F8FAFC;
    border-radius: 20rpx;
    padding: 20rpx;
    border: 2rpx solid transparent;
    transition: all 0.2s ease;
  }

  .room-card.active {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-color: #3B82F6;
  }

  .room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12rpx;
  }

  .room-number {
    font-size: 32rpx;
    font-weight: 700;
    color: #1E293B;
  }

  .room-check {
    width: 28rpx;
    height: 28rpx;
    background: #3B82F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .room-info {
    display: flex;
    flex-direction: column;
    gap: 4rpx;
  }

  .room-price {
    font-size: 26rpx;
    color: #EF4444;
    font-weight: 600;
  }

  .price-unit {
    font-size: 20rpx;
    font-weight: 400;
  }

  .room-area {
    font-size: 22rpx;
    color: #94A3B8;
  }

  .empty-rooms {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48rpx;
    color: #94A3B8;
    font-size: 26rpx;
    gap: 16rpx;
  }

  /* 付租方式 */
  .payment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16rpx;
  }

  .payment-item {
    background: #F8FAFC;
    border-radius: 16rpx;
    padding: 20rpx 12rpx;
    text-align: center;
    border: 2rpx solid transparent;
    position: relative;
    transition: all 0.2s ease;
  }

  .payment-item.active {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-color: #3B82F6;
  }

  .payment-label {
    display: block;
    font-size: 28rpx;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 4rpx;
  }

  .payment-desc {
    display: block;
    font-size: 20rpx;
    color: #64748B;
  }

  .payment-item.active .payment-label {
    color: #3B82F6;
  }

  .payment-indicator {
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    width: 24rpx;
    height: 24rpx;
    background: #3B82F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 租期选择 */
  .period-scroll {
    margin: 0 -32rpx;
    padding: 0 32rpx;
  }

  .period-list {
    display: flex;
    gap: 12rpx;
    padding-bottom: 8rpx;
  }

  .period-tag {
    flex-shrink: 0;
    padding: 16rpx 28rpx;
    background: #F8FAFC;
    border-radius: 12rpx;
    font-size: 26rpx;
    color: #475569;
    border: 2rpx solid transparent;
    transition: all 0.2s ease;
  }

  .period-tag.active {
    background: #3B82F6;
    color: #FFFFFF;
    border-color: #3B82F6;
  }

  /* 日期选择 */
  .picker-box, .static-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8FAFC;
    border-radius: 16rpx;
    padding: 0 24rpx;
    height: 88rpx;
  }

  .picker-text {
    font-size: 30rpx;
    color: #1E293B;
  }

  .picker-text.placeholder {
    color: #94A3B8;
  }

  .static-text {
    font-size: 30rpx;
    color: #64748B;
  }

  /* 水电表 */
  .meter-grid {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .meter-item {
    display: flex;
    align-items: center;
    gap: 20rpx;
    background: #F8FAFC;
    border-radius: 20rpx;
    padding: 20rpx 24rpx;
  }

  .meter-icon-box {
    width: 64rpx;
    height: 64rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .meter-icon-box.water { background: rgba(59, 130, 246, 0.1); }
  .meter-icon-box.electric { background: rgba(245, 158, 11, 0.1); }

  .meter-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .meter-label {
    font-size: 28rpx;
    color: #475569;
  }

  .meter-input-box {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }

  .meter-input {
    width: 120rpx;
    height: 56rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #1E293B;
    border: 2rpx solid #E2E8F0;
  }

  .meter-unit {
    font-size: 24rpx;
    color: #64748B;
  }

  /* 备注 */
  .textarea-wrapper {
    position: relative;
  }

  .form-textarea {
    width: 100%;
    height: 180rpx;
    background: #F8FAFC;
    border-radius: 16rpx;
    padding: 24rpx;
    font-size: 30rpx;
    color: #1E293B;
    border: 2rpx solid transparent;
    transition: all 0.2s ease;
  }

  .form-textarea:focus {
    background: #FFFFFF;
    border-color: #3B82F6;
  }

  .char-count {
    position: absolute;
    bottom: 16rpx;
    right: 20rpx;
    font-size: 22rpx;
    color: #94A3B8;
  }

  /* 提交按钮区域 */
  .submit-section {
    margin-top: 32rpx;
    margin-bottom: 32rpx;
  }

  .submit-section .submit-btn {
    width: 100%;
    height: 96rpx;
    background: #CBD5E1;
    border-radius: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #FFFFFF;
    border: none;
    transition: all 0.3s ease;
  }

  .submit-section .submit-btn.active {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.35);
  }

  .submit-section .submit-btn.active:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
  }

  /* 底部提交栏 */
  .submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20rpx);
    border-top: 1rpx solid rgba(226, 232, 240, 0.6);
    padding: 20rpx 32rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    z-index: 100;
  }

  .submit-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24rpx;
  }

  .submit-info {
    display: flex;
    flex-direction: column;
    gap: 4rpx;
  }

  .info-label {
    font-size: 22rpx;
    color: #94A3B8;
  }

  .info-value {
    font-size: 28rpx;
    font-weight: 600;
    color: #10B981;
  }

  .info-value.incomplete {
    color: #F59E0B;
  }

  .submit-btn {
    min-width: 240rpx;
    height: 88rpx;
    background: #CBD5E1;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    font-weight: 600;
    color: #FFFFFF;
    border: none;
    transition: all 0.3s ease;
  }

  .submit-btn.active {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.35);
  }

  .submit-btn.active:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
  }

  .btn-loading {
    display: flex;
    gap: 12rpx;
    align-items: center;
  }

  .loading-dot {
    width: 12rpx;
    height: 12rpx;
    background: #FFFFFF;
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite both;
  }

  .loading-dot:nth-child(1) { animation-delay: -0.32s; }
  .loading-dot:nth-child(2) { animation-delay: -0.16s; }

  @keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
  }

  /* 成功弹窗 */
  .success-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
  }

  .success-content {
    background: #FFFFFF;
    border-radius: 32rpx;
    padding: 56rpx 64rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: scaleIn 0.3s ease;
  }

  .success-icon {
    margin-bottom: 32rpx;
  }

  .success-circle {
    width: 120rpx;
    height: 120rpx;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.35);
  }

  .success-title {
    font-size: 40rpx;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 12rpx;
  }

  .success-desc {
    font-size: 28rpx;
    color: #64748B;
    margin-bottom: 40rpx;
  }

  .success-btn {
    width: 320rpx;
    height: 88rpx;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    border-radius: 44rpx;
    font-size: 30rpx;
    font-weight: 600;
    color: #FFFFFF;
    border: none;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }
</style>
