<template>
  <view class="app-container detail-page">
    <TopBar :title="mode === 'edit' ? '编辑项目' : '新增项目'" show-back />

    <view v-if="loadingDetail" class="py-20 text-center">
      <text class="text-gray-400">加载中...</text>
    </view>

    <view v-else class="form-body">
      <!-- 关联合同 -->
      <view class="card">
        <view class="section-title">
          <view class="section-icon section-icon--green">
            <text class="uni-icons uniui-wallet-filled"></text>
          </view>
          <text class="section-text">关联合同</text>
        </view>

        <view class="form-group">
          <text class="form-label">选择合同</text>
          <picker mode="selector" :range="contractLabels" :value="selectedContractIndex" @change="onContractChange">
            <view class="form-select" :class="{ 'form-select--empty': selectedContractIndex < 0 }">
              <text class="truncate flex-1">{{ selectedContractIndex >= 0 ? contractLabels[selectedContractIndex] : '请选择合同（选填）' }}</text>
              <text class="uni-icons uniui-arrowdown text-gray-400 ml-2"></text>
            </view>
          </picker>
        </view>

        <view v-if="selectedContract" class="info-panel">
          <view class="info-row">
            <text class="info-label">客户</text>
            <text class="info-value">{{ form.customerName || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">主联系人</text>
            <text class="info-value">{{ form.primaryContactName || '-' }} {{ form.primaryContactPhone || '' }}</text>
          </view>
        </view>
      </view>

      <!-- 基本信息 -->
      <view class="card">
        <view class="section-title">
          <view class="section-icon section-icon--blue">
            <text class="uni-icons uniui-folder-add-filled"></text>
          </view>
          <text class="section-text">基本信息</text>
        </view>

        <view class="form-group">
          <text class="form-label">
            项目名称
            <text class="required">*</text>
          </text>
          <uni-easyinput class="form-input" placeholder="请输入项目名称" v-model="form.projectName" @blur="validateField('projectName')" />
          <text v-if="errors.projectName" class="error-text">{{ errors.projectName }}</text>
        </view>

        <view class="form-group">
          <text class="form-label">
            合作类型
            <text class="required">*</text>
          </text>
          <picker mode="selector" :range="cooperationLabels" :value="cooperationIndex" @change="onCooperationChange">
            <view class="form-select" :class="{ 'form-select--empty': !form.cooperationType }">
              <text class="uni-icons uniui-arrowdown text-gray-400 mr-2"></text>
              <text class="flex-1">{{ form.cooperationType ? getCooperationTypeText(form.cooperationType) : '请选择合作类型' }}</text>
            </view>
          </picker>
          <text v-if="errors.cooperationType" class="error-text">{{ errors.cooperationType }}</text>
        </view>

        <view class="form-group">
          <text class="form-label">
            设施类型
            <text class="required">*</text>
            <text class="form-hint">可多选</text>
          </text>
          <view class="chip-group">
            <view
              v-for="ft in facilityTypeOptions"
              :key="ft.value"
              class="chip"
              :class="form.facilityTypes.includes(ft.value) ? 'chip--active' : 'chip--default'"
              @click="toggleFacility(ft.value)"
            >
              {{ ft.label }}
            </view>
          </view>
          <text v-if="errors.facilityTypes" class="error-text">{{ errors.facilityTypes }}</text>
        </view>

        <view class="form-group">
          <text class="form-label">
            项目地址
            <text class="required">*</text>
          </text>
          <view class="flex items-center gap-2">
            <uni-easyinput
              class="form-input flex-1"
              placeholder="请输入项目地址或点击地图选点"
              v-model="form.address"
              @blur="validateField('address')"
            />
            <view class="map-btn" @click="chooseLocation">
              <text class="uni-icons uniui-location-filled map-btn-icon"></text>
              <text class="map-btn-text">地图</text>
            </view>
          </view>
          <text v-if="errors.address" class="error-text">{{ errors.address }}</text>
          <text v-if="form.latitude && form.longitude" class="geo-text">
            <text class="uni-icons uniui-location-filled mr-1"></text>
            {{ form.latitude }}, {{ form.longitude }}
          </text>
        </view>

        <view class="form-group">
          <text class="form-label">
            位置联系人
            <text class="required">*</text>
          </text>
          <view v-if="locationContacts.length > 0" class="contact-list">
            <view
              v-for="(contact, index) in locationContacts"
              :key="index"
              class="contact-card"
            >
              <view class="contact-header">
                <text class="contact-index">联系人 {{ index + 1 }}</text>
                <view class="contact-delete" @click="removeLocationContact(index)">
                  <text class="uni-icons uniui-trash text-sm mr-1"></text>
                  <text>删除</text>
                </view>
              </view>
              <view class="contact-fields">
                <view class="contact-field">
                  <text class="contact-field-label">姓名</text>
                  <input v-model="contact.name" class="contact-field-input" placeholder="请输入姓名" @blur="validateField('locationContacts')" />
                </view>
                <view class="contact-field">
                  <text class="contact-field-label">电话</text>
                  <input v-model="contact.phone" class="contact-field-input" placeholder="请输入手机号" maxlength="11" @blur="validateField('locationContacts')" />
                </view>
              </view>
            </view>
          </view>
          <view class="add-btn" @click="addLocationContact">
            <text class="uni-icons uniui-plus text-primary mr-1"></text>
            <text class="text-primary text-sm">添加联系人</text>
          </view>
          <text v-if="errors.locationContacts" class="error-text">{{ errors.locationContacts }}</text>
        </view>

        <view class="form-group mb-0">
          <text class="form-label">项目介绍</text>
          <textarea
            v-model="form.projectDescription"
            class="form-textarea"
            placeholder="请输入项目介绍..."
            :maxlength="500"
          />
        </view>
      </view>

      <!-- 服务有效期 -->
      <view class="card">
        <view class="section-title">
          <view class="section-icon section-icon--purple">
            <text class="uni-icons uniui-calendar"></text>
          </view>
          <text class="section-text">服务有效期</text>
        </view>
        <view class="date-range">
          <view class="date-field">
            <text class="form-label">开始日期</text>
            <picker mode="date" :value="form.serviceStartDate" @change="onServiceStartDateChange">
              <view class="form-select" :class="{ 'form-select--empty': !form.serviceStartDate }">
                <text class="uni-icons uniui-calendar text-gray-400 mr-2"></text>
                <text>{{ form.serviceStartDate || '选择日期' }}</text>
              </view>
            </picker>
          </view>
          <view class="date-divider">至</view>
          <view class="date-field">
            <text class="form-label">结束日期</text>
            <picker mode="date" :value="form.serviceEndDate" @change="onServiceEndDateChange">
              <view class="form-select" :class="{ 'form-select--empty': !form.serviceEndDate }">
                <text class="uni-icons uniui-calendar text-gray-400 mr-2"></text>
                <text>{{ form.serviceEndDate || '选择日期' }}</text>
              </view>
            </picker>
          </view>
        </view>
      </view>

      <!-- 费用信息 -->
      <view class="card">
        <view class="section-title">
          <view class="section-icon section-icon--yellow">
            <text class="uni-icons uniui-wallet-filled"></text>
          </view>
          <text class="section-text">费用信息</text>
        </view>

        <view class="form-group mb-0">
          <text class="form-label">合同总金额（元）</text>
          <uni-easyinput
            class="form-input"
            type="digit"
            placeholder="请输入合同总金额"
            v-model="form.contractAmount"
          />
        </view>
      </view>

      <!-- 服务点信息 -->
      <view class="card">
        <view class="section-title">
          <view class="section-icon section-icon--cyan">
            <text class="uni-icons uniui-location-filled"></text>
          </view>
          <text class="section-text">服务点与服务项</text>
        </view>

        <view v-if="form.servicePoints.length > 0" class="service-point-list">
          <view
            v-for="(point, index) in form.servicePoints"
            :key="index"
            class="service-point-card"
          >
            <view class="service-point-header">
              <view class="flex items-center">
                <view class="service-point-number">{{ index + 1 }}</view>
                <text class="service-point-title">{{ point.name || `服务点 ${index + 1}` }}</text>
              </view>
              <view class="service-point-delete" @click="removeServicePoint(index)">
                <text class="uni-icons uniui-trash text-sm mr-1"></text>
                <text>删除</text>
              </view>
            </view>
            <view class="service-point-body">
              <view class="form-row">
                <view class="form-col">
                  <text class="form-label">名称</text>
                  <uni-easyinput class="form-input" placeholder="服务点名称" v-model="point.name" />
                </view>
                <view class="form-col">
                  <text class="form-label">对应服务项</text>
                  <uni-easyinput class="form-input" placeholder="服务项" v-model="point.serviceItem" />
                </view>
              </view>
              <view class="form-group mb-0">
                <text class="form-label">地址</text>
                <uni-easyinput class="form-input" placeholder="服务点地址" v-model="point.address" />
              </view>
            </view>
          </view>
        </view>

        <view class="add-btn" @click="addServicePoint">
          <text class="uni-icons uniui-plusempty text-primary mr-1"></text>
          <text class="text-primary text-sm">添加服务点</text>
        </view>
      </view>

      <!-- 备注 -->
      <view class="card">
        <view class="section-title">
          <view class="section-icon section-icon--gray">
            <text class="uni-icons uniui-compose"></text>
          </view>
          <text class="section-text">备注</text>
        </view>
        <textarea
          v-model="form.remark"
          class="form-textarea"
          placeholder="请输入项目备注..."
          :maxlength="200"
        />
      </view>

      <!-- 底部占位 -->
      <view class="h-20"></view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-bar">
      <button
        class="submit-btn"
        @click="submitForm"
        :disabled="submitting"
      >
        <text v-if="submitting" class="uni-icons uniui-spinner-cycle mr-2 animate-spin"></text>
        <text class="uni-icons uniui-checkmarkempty mr-2" v-else></text>
        {{ submitting ? '提交中...' : (mode === 'edit' ? '保存修改' : '提交项目') }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import TopBar from '../../components/common/TopBar.vue'
import { createProject, updateProject, getProjectDetail } from '../../api/project'
import { getContractList } from '../../api/contract'
import { getCustomerDetail } from '../../api/customer'
import { getDictTree, buildDictOptions } from '../../api/dict'
import {
  getCooperationTypeText,
  formatMoney,
  parseJsonArray,
  parseLocationContacts,
  formatLocationContacts
} from '../../utils'
import type {
  Contract,
  CooperationType,
  FacilityType,
  PaymentMethod,
  ProjectStatus,
  ServicePoint
} from '../../types'

const mode = ref<'add' | 'edit'>('add')
const editId = ref<number | string>('')
const loadingDetail = ref(false)
const submitting = ref(false)

// 字典选项
const cooperationTypeOptions = ref<{ value: CooperationType; label: string }[]>([
  { value: 'annual', label: '包年' },
  { value: 'single', label: '单次' },
  { value: 'quarter', label: '季度' },
  { value: 'monthly', label: '月付' }
])
const facilityTypeOptions = ref<{ value: FacilityType; label: string }[]>([
  { value: 'septic_tank', label: '化粪池' },
  { value: 'direct_pump', label: '直抽直排' },
  { value: 'grease_pipe', label: '油污管+化粪池' },
  { value: 'pvc_pipe', label: 'PVC+化粪池' }
])

async function loadDictOptions() {
  try {
    const coopData = await getDictTree('cooperation_type')
    const coopOpts = buildDictOptions(coopData)
    if (coopOpts.options.length > 0) {
      cooperationTypeOptions.value = coopOpts.options as { value: CooperationType; label: string }[]
    }
  } catch {
    // 失败时使用硬编码兜底
  }

  try {
    const facilityData = await getDictTree('facility_type')
    const facilityOpts = buildDictOptions(facilityData)
    if (facilityOpts.options.length > 0) {
      facilityTypeOptions.value = facilityOpts.options as { value: FacilityType; label: string }[]
    }
  } catch {
    // 失败时使用硬编码兜底
  }
}

const cooperationLabels = computed(() => cooperationTypeOptions.value.map(t => t.label))

const contracts = ref<Contract[]>([])
const contractLabels = computed(() =>
  contracts.value.map(c => `${c.contractNo}${c.customerName ? ' - ' + c.customerName : ''}`)
)
const selectedContractIndex = computed(() => {
  if (!form.contractId) return -1
  return contracts.value.findIndex(c => String(c.id) === String(form.contractId))
})
const selectedContract = computed(() =>
  selectedContractIndex.value >= 0 ? contracts.value[selectedContractIndex.value] : null
)

interface ProjectForm {
  projectName: string
  contractId: number | string
  cooperationType: CooperationType | ''
  facilityTypes: FacilityType[]
  projectDescription: string
  servicePoints: ServicePoint[]
  remark: string
  customerId: number | string
  customerName: string
  customerPhone: string
  contractNo: string
  contractAmount?: number
  paymentMethod: PaymentMethod | ''
  address: string
  latitude: string
  longitude: string
  primaryContactName: string
  primaryContactPhone: string
  serviceStartDate: string
  serviceEndDate: string
  status: ProjectStatus
}

const form = reactive<ProjectForm>({
  projectName: '',
  contractId: '',
  cooperationType: '',
  facilityTypes: [],
  projectDescription: '',
  servicePoints: [],
  remark: '',
  customerId: '',
  customerName: '',
  customerPhone: '',
  contractNo: '',
  contractAmount: undefined,
  paymentMethod: '',
  address: '',
  latitude: '',
  longitude: '',
  primaryContactName: '',
  primaryContactPhone: '',
  serviceStartDate: '',
  serviceEndDate: '',
  status: 'pending'
})

const locationContacts = ref<{ name: string; phone: string }[]>([])

const errors = reactive<Record<string, string>>({
  contractId: '',
  projectName: '',
  cooperationType: '',
  facilityTypes: '',
  address: '',
  locationContacts: ''
})

const cooperationIndex = computed(() =>
  cooperationTypeOptions.value.findIndex(t => t.value === form.cooperationType)
)

function onContractChange(e: any) {
  const idx = Number(e.detail.value)
  const contract = contracts.value[idx]
  if (!contract) {
    form.contractId = ''
    return
  }

  form.contractId = contract.id
  form.customerId = contract.customerId
  form.customerName = contract.customerName || ''
  form.contractNo = contract.contractNo
  form.contractAmount = contract.contractAmount
  form.paymentMethod = contract.paymentMethod

  // 若未手动填写服务有效期，尝试用合同服务期回填
  const period = splitServicePeriod(contract.servicePeriod)
  if (!form.serviceStartDate) form.serviceStartDate = period.start
  if (!form.serviceEndDate) form.serviceEndDate = period.end

  // 尝试获取客户详情以回填联系人/地址
  getCustomerDetail(contract.customerId)
    .then((customer) => {
      if (customer) {
        form.customerName = customer.customerName || form.customerName
        form.customerPhone = customer.phone || ''
        form.primaryContactName = customer.contactName || ''
        form.primaryContactPhone = customer.phone || ''
        if (!form.address) {
          form.address = customer.address || ''
        }
        if (!form.latitude) form.latitude = customer.latitude || ''
        if (!form.longitude) form.longitude = customer.longitude || ''
      }
    })
    .catch(() => {
      // 客户详情获取失败不阻断
    })

  if (!form.projectName && form.customerName) {
    form.projectName = `${form.customerName}项目`
  }
}

function onCooperationChange(e: any) {
  form.cooperationType = cooperationTypeOptions.value[Number(e.detail.value)].value
  errors.cooperationType = ''
}

function toggleFacility(value: FacilityType) {
  const idx = form.facilityTypes.indexOf(value)
  if (idx >= 0) form.facilityTypes.splice(idx, 1)
  else form.facilityTypes.push(value)
  errors.facilityTypes = ''
}

function onServiceStartDateChange(e: any) {
  form.serviceStartDate = e.detail.value
}

function onServiceEndDateChange(e: any) {
  form.serviceEndDate = e.detail.value
}

function addLocationContact() {
  locationContacts.value.push({ name: '', phone: '' })
}

function removeLocationContact(index: number) {
  locationContacts.value.splice(index, 1)
}

function chooseLocation() {
  uni.authorize({
    scope: 'scope.userLocation',
    success: () => {
      uni.chooseLocation({
        success: (res) => {
          form.address = res.address || res.name || form.address
          form.latitude = String(res.latitude ?? '')
          form.longitude = String(res.longitude ?? '')
          errors.address = ''
        },
        fail: (err) => {
          console.error('chooseLocation fail', err)
          uni.showToast({ title: '选择位置失败', icon: 'none' })
        }
      })
    },
    fail: () => {
      uni.showModal({
        title: '需要位置权限',
        content: '请在设置中允许使用位置信息',
        success: (res) => {
          if (res.confirm) {
            uni.openSetting()
          }
        }
      })
    }
  })
}

function addServicePoint() {
  form.servicePoints.push({ name: '', address: '', serviceItem: '' })
}

function removeServicePoint(index: number) {
  form.servicePoints.splice(index, 1)
}

function splitServicePeriod(period?: string) {
  if (!period) return { start: '', end: '' }
  const parts = period.split(/\s*至\s*/)
  return { start: parts[0] || '', end: parts[1] || '' }
}

function validateField(field: string) {
  errors[field] = ''
  const phonePattern = /^1[3-9]\d{9}$/
  switch (field) {
    case 'projectName':
      if (!form.projectName.trim()) errors.projectName = '请输入项目名称'
      break
    case 'address':
      if (!form.address.trim()) errors.address = '请输入项目地址'
      break
    case 'locationContacts':
      if (locationContacts.value.length === 0) {
        errors.locationContacts = '请至少添加一个位置联系人'
      } else if (locationContacts.value.some(c => !c.name.trim() || !c.phone.trim())) {
        errors.locationContacts = '请填写完整的联系人姓名和电话'
      } else if (locationContacts.value.some(c => !phonePattern.test(c.phone.trim()))) {
        errors.locationContacts = '请填写正确的手机号'
      }
      break
  }
  return !errors[field]
}

function validateForm() {
  let valid = true
  const phonePattern = /^1[3-9]\d{9}$/
  if (!form.projectName.trim()) { errors.projectName = '请输入项目名称'; valid = false } else errors.projectName = ''
  if (!form.cooperationType) { errors.cooperationType = '请选择合作类型'; valid = false } else errors.cooperationType = ''
  if (form.facilityTypes.length === 0) { errors.facilityTypes = '请选择设施类型'; valid = false } else errors.facilityTypes = ''
  if (!form.address.trim()) { errors.address = '请输入项目地址'; valid = false } else errors.address = ''
  if (locationContacts.value.length === 0) {
    errors.locationContacts = '请至少添加一个位置联系人'
    valid = false
  } else if (locationContacts.value.some(c => !c.name.trim() || !c.phone.trim())) {
    errors.locationContacts = '请填写完整的联系人姓名和电话'
    valid = false
  } else if (locationContacts.value.some(c => !phonePattern.test(c.phone.trim()))) {
    errors.locationContacts = '请填写正确的手机号'
    valid = false
  } else {
    errors.locationContacts = ''
  }
  return valid
}

function buildPayload() {
  const points = form.servicePoints
    .filter(p => p.name || p.address)
    .map(p => ({
      name: p.name || '',
      address: p.address,
      serviceItem: p.serviceItem
    }))

  // 主联系人从第一个位置联系人推导，回退客户联系人
  const firstContact = locationContacts.value[0]
  const primaryContactName = firstContact?.name?.trim() || form.primaryContactName || undefined
  const primaryContactPhone = firstContact?.phone?.trim() || form.primaryContactPhone || undefined

  return {
    projectName: form.projectName.trim(),
    contractId: form.contractId || undefined,
    customerId: form.customerId || undefined,
    customerName: form.customerName || form.projectName.trim() || undefined,
    customerPhone: form.customerPhone || undefined,
    contractNo: form.contractNo || undefined,
    cooperationType: form.cooperationType as CooperationType,
    industry: 'commercial',
    facilityTypes: JSON.stringify(form.facilityTypes),
    contractAmount: form.contractAmount,
    serviceStartDate: form.serviceStartDate || undefined,
    serviceEndDate: form.serviceEndDate || undefined,
    projectDescription: form.projectDescription || undefined,
    servicePoints: JSON.stringify(points),
    locationContacts: formatLocationContacts(locationContacts.value),
    address: form.address.trim(),
    latitude: form.latitude || undefined,
    longitude: form.longitude || undefined,
    primaryContactName,
    primaryContactPhone,
    paymentMethod: (form.paymentMethod || undefined) as PaymentMethod | undefined,
    contractStatus: form.contractId ? 'active' : undefined,
    status: form.status,
    remark: form.remark || undefined
  }
}

async function submitForm() {
  if (!validateForm()) {
    uni.showToast({ title: '请完善必填信息', icon: 'none' })
    return
  }

  submitting.value = true
  try {
    if (mode.value === 'edit') {
      await updateProject({ ...buildPayload(), projectId: editId.value })
    } else {
      await createProject(buildPayload())
    }
    uni.showToast({ title: mode.value === 'edit' ? '保存成功' : '创建成功', icon: 'success' })
    setTimeout(() => uni.navigateBack(), 1500)
  } catch (e) {
    uni.showToast({ title: mode.value === 'edit' ? '保存失败' : '创建失败', icon: 'none' })
  } finally {
    submitting.value = false
  }
}

async function loadContracts() {
  try {
    const res = await getContractList(1, 1000)
    contracts.value = res.rows || []
  } catch (e) {
    contracts.value = []
  }
}

async function loadDetail(id: number | string) {
  loadingDetail.value = true
  try {
    const p = await getProjectDetail(id)
    form.projectName = p.projectName || ''
    form.contractId = p.contractId || ''
    form.cooperationType = (p.cooperationType || '') as CooperationType | ''
    form.facilityTypes = parseJsonArray<FacilityType>(p.facilityTypes)
    form.projectDescription = p.projectDescription || ''
    form.servicePoints = parseJsonArray<ServicePoint>(p.servicePoints).map(sp => ({
      name: sp.name || '',
      address: sp.address,
      serviceItem: sp.serviceItem || (sp as any).serviceType
    }))
    form.remark = p.remark || ''
    form.customerId = p.customerId || ''
    form.customerName = p.customerName || ''
    form.customerPhone = p.customerPhone || ''
    form.contractNo = p.contractNo || ''
    form.contractAmount = p.contractAmount
    form.paymentMethod = (p.paymentMethod || '') as PaymentMethod | ''
    form.address = p.address || ''
    form.latitude = p.latitude || ''
    form.longitude = p.longitude || ''
    form.primaryContactName = p.primaryContactName || ''
    form.primaryContactPhone = p.primaryContactPhone || ''
    form.serviceStartDate = p.serviceStartDate || ''
    form.serviceEndDate = p.serviceEndDate || ''
    form.status = p.status || 'pending'

    locationContacts.value = parseLocationContacts(p.locationContacts)
    // 若后台未存储 locationContacts 但存储了主联系人，则至少回填一个
    if (locationContacts.value.length === 0 && (form.primaryContactName || form.primaryContactPhone)) {
      locationContacts.value.push({
        name: form.primaryContactName || '',
        phone: form.primaryContactPhone || ''
      })
    }
  } catch (e) {
    uni.showToast({ title: '加载项目失败', icon: 'none' })
  } finally {
    loadingDetail.value = false
  }
}

onLoad(async (options) => {
  await loadDictOptions()
  await loadContracts()
  if (options?.mode === 'edit' && options?.id) {
    mode.value = 'edit'
    editId.value = options.id
    await loadDetail(options.id)
  }
})
</script>

<style scoped>
/* 页面基调 */
.detail-page {
  background-color: #f6fbf9;
  min-height: 100vh;
}

.form-body {
  padding: 12px 16px 80px;
}

/* 卡片 */
.card {
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 20px -4px rgba(54, 143, 111, 0.12);
  border: 1px solid rgba(164, 216, 152, 0.25);
}

/* 区块标题 */
.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.section-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 16px;
}
.section-icon--green {
  background: linear-gradient(135deg, #e6f7ef 0%, #d1f2e3 100%);
  color: #368f6f;
}
.section-icon--blue {
  background: linear-gradient(135deg, #e6f4fb 0%, #d1ecf7 100%);
  color: #3a8fb0;
}
.section-icon--purple {
  background: linear-gradient(135deg, #f3e8ff 0%, #ede0fc 100%);
  color: #8b5cf6;
}
.section-icon--yellow {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  color: #f59e0b;
}
.section-icon--cyan {
  background: linear-gradient(135deg, #e6fffa 0%, #d0f7f0 100%);
  color: #0d9488;
}
.section-icon--gray {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #6b7280;
}
.section-text {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

/* 表单组 */
.form-group {
  margin-bottom: 18px;
}
.form-group:last-child,
.form-group.mb-0 {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 8px;
}
.required {
  color: #ef4444;
  margin-left: 2px;
}
.form-hint {
  font-weight: 400;
  color: #9ca3af;
  margin-left: 6px;
}

/* 输入框 */
.form-input :deep(.uni-easyinput__content) {
  min-height: 44px;
  border-radius: 12px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}
.form-input :deep(.uni-easyinput__content.focus) {
  background-color: #ffffff;
  border-color: #368f6f;
  box-shadow: 0 0 0 3px rgba(54, 143, 111, 0.1);
}
.form-input :deep(.uni-easyinput__placeholder-class) {
  color: #9ca3af;
  font-size: 14px;
}

/* 选择器 */
.form-select {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  color: #1f2937;
  transition: all 0.2s ease;
}
.form-select--empty {
  color: #9ca3af;
}

/* 标签组 */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.chip--default {
  background-color: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}
.chip--active {
  background: linear-gradient(135deg, #368f6f 0%, #5ab8d0 100%);
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px -4px rgba(54, 143, 111, 0.4);
}

/* 错误提示 */
.error-text {
  display: block;
  font-size: 12px;
  color: #ef4444;
  margin-top: 6px;
}

/* 地图按钮 */
.map-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #368f6f 0%, #5ab8d0 100%);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(54, 143, 111, 0.4);
}
.map-btn-icon {
  font-size: 16px;
  margin-bottom: 1px;
}
.map-btn-text {
  font-size: 10px;
  line-height: 1;
}

/* 经纬度提示 */
.geo-text {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #368f6f;
  margin-top: 6px;
}

/* 信息面板 */
.info-panel {
  background: #f9fafb;
  border-radius: 14px;
  padding: 14px;
  margin-top: 8px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 6px 0;
}
.info-row:first-child {
  padding-top: 0;
}
.info-row:last-child {
  padding-bottom: 0;
}
.info-label {
  color: #6b7280;
}
.info-value {
  color: #1f2937;
  font-weight: 500;
}

/* 联系人卡片 */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.contact-card {
  background: #f9fafb;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}
.contact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}
.contact-index {
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
}
.contact-delete {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #ef4444;
  padding: 2px 6px;
  border-radius: 6px;
}
.contact-delete:active {
  background: rgba(239, 68, 68, 0.1);
}
.contact-fields {
  display: flex;
  gap: 10px;
  padding: 12px;
}
.contact-field {
  flex: 1;
}
.contact-field-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
}
.contact-field-input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  font-size: 14px;
  color: #1f2937;
}
.contact-field-input:focus {
  border-color: #368f6f;
}

/* 添加按钮 */
.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  border-radius: 12px;
  border: 1px dashed #a7f3d0;
  background-color: rgba(164, 216, 152, 0.08);
  transition: all 0.15s ease;
}
.add-btn:active {
  background-color: rgba(164, 216, 152, 0.18);
}
.text-primary {
  color: #368f6f;
}

/* 日期范围 */
.date-range {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.date-field {
  flex: 1;
}
.date-divider {
  padding-bottom: 12px;
  font-size: 13px;
  color: #9ca3af;
  font-weight: 500;
}

/* 文本域 */
.form-textarea {
  width: 100%;
  min-height: 90px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  font-size: 14px;
  color: #1f2937;
  line-height: 1.5;
}
.form-textarea:focus {
  background-color: #ffffff;
  border-color: #368f6f;
  box-shadow: 0 0 0 3px rgba(54, 143, 111, 0.1);
}

/* 服务点卡片 */
.service-point-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}
.service-point-card {
  background: #f9fafb;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}
.service-point-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(135deg, #e6fffa 0%, #d0f7f0 100%);
  border-bottom: 1px solid #e5e7eb;
}
.service-point-number {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0d9488;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.service-point-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f766e;
}
.service-point-delete {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #ef4444;
  padding: 2px 6px;
  border-radius: 6px;
}
.service-point-delete:active {
  background: rgba(239, 68, 68, 0.1);
}
.service-point-body {
  padding: 14px;
}
.form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.form-row:last-child {
  margin-bottom: 0;
}
.form-col {
  flex: 1;
}

/* 提交栏 */
.submit-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1px solid rgba(164, 216, 152, 0.3);
  box-shadow: 0 -4px 20px -4px rgba(0, 0, 0, 0.06);
  z-index: 50;
}
.submit-btn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #368f6f 0%, #5ab8d0 100%);
  box-shadow: 0 8px 20px -6px rgba(54, 143, 111, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.submit-btn[disabled] {
  opacity: 0.7;
}
.submit-btn::after {
  border: none;
}

/* 动画 */
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
