<template>
  <view class="sub-page">
    <TopBar title="发布任务" show-back />

    <view class="px-4 pt-3">
      <!-- 项目基本信息 -->
      <view class="glass-card p-4">
        <view class="section-head-inner mb-3">
          <view class="section-bar mr-2"></view>
          <text class="section-title">项目基本信息</text>
        </view>

        <view class="hint-box">
          <text class="uni-icons uniui-info-filled hint-icon mr-2"></text>
          <text class="hint-text">请从项目库选择或新增项目</text>
        </view>

        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>选择项目
          </text>
          <picker mode="selector" :range="projectNames" :value="projectIndex" @change="onProjectSelectChange">
            <view class="form-select flex justify-between items-center">
              <text :class="selectedProject ? 'text-gray-800' : 'text-gray-400'">{{ selectedProject?.projectName || '请选择项目' }}</text>
              <text class="uni-icons uniui-arrowdown text-gray-400"></text>
            </view>
          </picker>
        </view>

        <view v-if="selectedProject" class="selected-box">
          <view class="flex items-center justify-between mb-3">
            <text class="text-green-600 text-sm font-medium">已选择：{{ selectedProject.projectName }}</text>
            <text class="text-green-500 text-xs" @click="resetProjectSelection">重新选择</text>
          </view>
          <view class="gap-y-2">
            <view class="flex justify-between text-sm">
              <text class="text-gray-500">合作类型：</text>
              <text class="text-gray-700">{{ form.cooperationType || '-' }}</text>
            </view>
            <view class="flex justify-between text-sm">
              <text class="text-gray-500">设施类型：</text>
              <text class="text-gray-700 flex-1 text-right">{{ form.facilityType || '-' }}</text>
            </view>
          </view>
        </view>

        <view class="form-group">
          <text class="form-label">选择服务点</text>
          <picker mode="selector" :range="servicePointNames" :value="servicePointIndex" @change="onServicePointChange" :disabled="servicePointNames.length === 0">
            <view class="form-select flex justify-between items-center">
              <text :class="form.servicePointName ? 'text-gray-800' : 'text-gray-400'">{{ selectedServicePointText }}</text>
              <text class="uni-icons uniui-arrowdown text-gray-400"></text>
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>项目地址
          </text>
          <uni-easyinput class="form-input" v-model="form.address" placeholder="选择项目或服务点后自动带出" />
        </view>

        <view class="form-group">
          <text class="form-label">主联系人姓名</text>
          <uni-easyinput class="form-input" v-model="form.contactName" placeholder="自动带出，可修改" />
        </view>

        <view class="form-group mb-0">
          <text class="form-label">主联系人电话</text>
          <uni-easyinput class="form-input" v-model="form.contactPhone" placeholder="自动带出，可修改" />
        </view>

        <view class="form-group">
          <text class="form-label">备用联系人</text>
          <view v-if="form.contacts.length > 0" class="gap-y-2 mb-2">
            <view
              v-for="(contact, index) in form.contacts"
              :key="index"
              class="contact-row"
            >
              <view class="flex-1">
                <input v-model="contact.name" class="contact-input" placeholder="姓名" />
              </view>
              <view class="flex-1 mx-2">
                <input v-model="contact.phone" class="contact-input" placeholder="电话" />
              </view>
              <text class="uni-icons uniui-close text-gray-400 ml-2" @click="removeContact(index)"></text>
            </view>
          </view>
          <view class="add-contact-btn" @click="addContact">
            <text class="uni-icons uniui-plus text-green-500 mr-1"></text>
            <text class="text-green-500 text-sm">添加备用联系人</text>
          </view>
        </view>
      </view>

      <!-- 服务信息 -->
      <view class="glass-card p-4">
        <view class="section-head-inner mb-3">
          <view class="section-bar mr-2"></view>
          <text class="section-title">服务信息</text>
        </view>

        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>服务时间
          </text>
          <view class="flex gap-2">
            <picker mode="date" :value="serviceTimeDate" @change="onServiceTimeDateChange" class="flex-1">
              <view class="form-select flex justify-between items-center">
                <text :class="serviceTimeDate ? 'text-gray-800' : 'text-gray-400'">{{ serviceTimeDate || '选择日期' }}</text>
                <text class="uni-icons uniui-calendar text-gray-400"></text>
              </view>
            </picker>
            <picker mode="time" :value="serviceTimeTime" @change="onServiceTimeTimeChange" style="flex: 0.6;">
              <view class="form-select flex justify-between items-center">
                <text :class="serviceTimeTime ? 'text-gray-800' : 'text-gray-400'">{{ serviceTimeTime || '选择时间' }}</text>
                <text class="uni-icons uniui-calendar-filled text-gray-400"></text>
              </view>
            </picker>
          </view>
        </view>

        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>故障位置
          </text>
          <uni-easyinput class="form-input" v-model="form.faultLocation" placeholder="如：3号楼东侧化粪池" />
        </view>

        <view class="form-group">
          <text class="form-label">地理位置</text>
          <view class="flex items-center gap-2">
            <uni-easyinput
              class="form-input flex-1"
              v-model="form.geoLocation"
              placeholder="请输入地理位置或点击地图选点"
            />
            <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="form.latitude && form.longitude" class="text-xs text-gray-400 mt-1">
            {{ form.latitude }}, {{ form.longitude }}
          </text>
        </view>

        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>故障描述
          </text>
          <textarea class="form-textarea" v-model="form.faultDescription" placeholder="请详细描述故障情况" />
        </view>

        <view class="form-group">
          <text class="form-label">故障图片/视频</text>
          <PhotoUploader v-model="form.faultPhotos" :max-count="9" />
        </view>

        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>施工类型
          </text>
          <picker mode="selector" :range="constructionTypeLabels" :value="constructionTypeIndex" @change="onConstructionTypeChange">
            <view class="form-select flex justify-between items-center">
              <text :class="form.constructionType ? 'text-gray-800' : 'text-gray-400'">{{ form.constructionType || '请选择施工类型' }}</text>
              <text class="uni-icons uniui-arrowdown text-gray-400"></text>
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>施工设施
          </text>
          <picker mode="selector" :range="constructionFacilityLabels" :value="constructionFacilityIndex" @change="onConstructionFacilityChange">
            <view class="form-select flex justify-between items-center">
              <text :class="form.constructionFacility ? 'text-gray-800' : 'text-gray-400'">{{ form.constructionFacility || '请选择施工设施' }}</text>
              <text class="uni-icons uniui-arrowdown text-gray-400"></text>
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>服务方式
          </text>
          <picker mode="selector" :range="serviceMethodLabels" :value="serviceMethodIndex" @change="onServiceMethodChange">
            <view class="form-select flex justify-between items-center">
              <text :class="form.serviceMethod ? 'text-gray-800' : 'text-gray-400'">{{ form.serviceMethod || '请选择服务方式' }}</text>
              <text class="uni-icons uniui-arrowdown text-gray-400"></text>
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>建议出车
          </text>
          <view class="flex flex-wrap gap-2">
            <view
              v-for="item in suggestedVehicleOptions"
              :key="item.value"
              class="fault-chip"
              :class="{ 'fault-chip-on': form.suggestedVehicles.includes(item.value) }"
              @click="toggleVehicle(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
        </view>

        <view class="form-group">
          <text class="form-label">取水距离</text>
          <picker mode="selector" :range="waterDistanceLabels" :value="waterDistanceIndex" @change="onWaterDistanceChange">
            <view class="form-select flex justify-between items-center">
              <text :class="form.waterDistance ? 'text-gray-800' : 'text-gray-400'">{{ form.waterDistance || '请选择取水距离' }}</text>
              <text class="uni-icons uniui-arrowdown text-gray-400"></text>
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="form-label">化粪池排口是否正常</text>
          <view class="flex flex-wrap gap-2">
            <view
              v-for="item in yesNoOptions"
              :key="item.value"
              class="radio-chip"
              :class="{ 'radio-chip-on': form.outletNormal === item.value }"
              @click="setOutletNormal(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
        </view>

        <view class="form-group">
          <text class="form-label">施工助力信息</text>
          <textarea class="form-textarea" v-model="form.constructionHelp" placeholder="如地库限高、需搭脚手架、登高作业等" />
        </view>

        <view class="form-group">
          <text class="form-label">预计作业量</text>
          <uni-easyinput class="form-input" v-model="form.estimatedQuantity" placeholder="如：2个堵点" />
        </view>

        <view class="form-group">
          <text class="form-label">预计工时</text>
          <uni-easyinput class="form-input" v-model="form.estimatedHours" placeholder="如：2小时" />
        </view>

        <view class="form-group">
          <text class="form-label">验收要求</text>
          <uni-easyinput class="form-input" v-model="form.acceptanceReq" placeholder="如：正常走水" />
        </view>

        <view class="form-group">
          <text class="form-label">是否有前期施工关联</text>
          <view class="flex flex-wrap gap-2">
            <view
              v-for="item in yesNoOptions"
              :key="item.value"
              class="radio-chip"
              :class="{ 'radio-chip-on': form.hasPreviousWork === item.value }"
              @click="setHasPreviousWork(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
        </view>

        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>验收方式
          </text>
          <picker mode="selector" :range="acceptanceMethods" :value="acceptanceMethodIndex" @change="onAcceptanceMethodChange">
            <view class="form-select flex justify-between items-center">
              <text :class="form.acceptanceMethod ? 'text-gray-800' : 'text-gray-400'">{{ form.acceptanceMethod || '请选择验收方式' }}</text>
              <text class="uni-icons uniui-arrowdown text-gray-400"></text>
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="form-label">甲方当事人</text>
          <view v-if="form.partyAContacts.length > 0" class="gap-y-2 mb-2">
            <view
              v-for="(contact, index) in form.partyAContacts"
              :key="index"
              class="contact-row"
            >
              <view class="flex-1">
                <input v-model="contact.name" class="contact-input" placeholder="姓名" />
              </view>
              <view class="flex-1 mx-2">
                <input v-model="contact.phone" class="contact-input" placeholder="电话" />
              </view>
              <view class="w-16">
                <input v-model="contact.position" class="contact-input" placeholder="职务" />
              </view>
              <text class="uni-icons uniui-close text-gray-400 ml-2" @click="removePartyAContact(index)"></text>
            </view>
          </view>
          <view class="add-contact-btn" @click="addPartyAContact">
            <text class="uni-icons uniui-plus text-green-500 mr-1"></text>
            <text class="text-green-500 text-sm">添加甲方当事人</text>
          </view>
        </view>

        <view class="form-group mb-0">
          <text class="form-label">备注</text>
          <textarea class="form-textarea" v-model="form.remark" placeholder="如有其他要求请备注" />
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="pt-2 pb-6">
        <button
          class="submit-btn"
          hover-class="submit-btn-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          :disabled="submitting"
          @click="submitTask"
        >
          {{ submitting ? '发布中...' : '发布任务' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import TopBar from '@/components/common/TopBar.vue'
import PhotoUploader from '@/components/common/PhotoUploader.vue'
import { usePublishTaskForm } from '@/composables/usePublishTaskForm'

const yesNoOptions = [
  { label: '是', value: 1 },
  { label: '否', value: 0 }
]

const {
  form,
  submitting,
  projectNames,
  projectIndex,
  selectedProject,
  servicePointNames,
  servicePointIndex,
  selectedServicePointText,
  constructionTypeLabels,
  constructionTypeIndex,
  constructionFacilityLabels,
  constructionFacilityIndex,
  serviceMethodLabels,
  serviceMethodIndex,
  suggestedVehicleLabels,
  suggestedVehicleOptions,
  waterDistanceLabels,
  waterDistanceIndex,
  acceptanceMethods,
  acceptanceMethodIndex,
  serviceTimeDate,
  serviceTimeTime,

  onProjectSelectChange,
  onServicePointChange,
  resetProjectSelection,
  onConstructionTypeChange,
  onConstructionFacilityChange,
  onServiceMethodChange,
  onWaterDistanceChange,
  onAcceptanceMethodChange,
  toggleVehicle,
  chooseLocation,
  addContact,
  removeContact,
  addPartyAContact,
  removePartyAContact,
  onServiceTimeDateChange,
  onServiceTimeTimeChange,
  setOutletNormal,
  setHasPreviousWork,
  submitTask
} = usePublishTaskForm()
</script>

<style scoped>
.sub-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f6fbf9;
  padding-bottom: 32px;
}

.glass-card {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(164, 216, 152, 0.35);
  border-radius: 24px;
  box-shadow: 0 18px 50px -12px rgba(54, 143, 111, 0.28);
  overflow: hidden;
  margin-bottom: 12px;
}

.section-head-inner {
  display: flex;
  align-items: center;
}

.section-bar {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #368f6f 0%, #5ab8d0 100%);
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.hint-box {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 12px;
  background-color: rgba(164, 216, 152, 0.14);
  border: 1px solid rgba(164, 216, 152, 0.3);
}

.hint-icon {
  font-size: 14px;
  color: #368f6f;
}

.hint-text {
  font-size: 13px;
  color: #368f6f;
}

.selected-box {
  padding: 12px;
  margin-bottom: 14px;
  border-radius: 14px;
  background-color: rgba(164, 216, 152, 0.14);
  border: 1px solid rgba(164, 216, 152, 0.3);
}

/* 选项标签：默认白底灰边，激活态绿色 */
.fault-chip {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: #6b7280;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

.fault-chip-on {
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(135deg, #368f6f 0%, #4ba98a 100%);
  border-color: transparent;
}

/* 单选标签 */
.radio-chip {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: #6b7280;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

.radio-chip-on {
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(135deg, #368f6f 0%, #4ba98a 100%);
  border-color: transparent;
}

.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.form-select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  font-size: 14px;
}

.form-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  font-size: 14px;
  color: #1f2937;
}

.contact-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background-color: #f9fafb;
}

.contact-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  font-size: 13px;
  color: #1f2937;
}

.add-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border-radius: 12px;
  border: 1px dashed #a7f3d0;
  background-color: rgba(164, 216, 152, 0.08);
}

.submit-btn {
  width: 100%;
  padding: 13px 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #368f6f 0%, #4ba98a 100%);
  box-shadow: 0 10px 24px -10px rgba(54, 143, 111, 0.7);
  line-height: 1.4;
}

.submit-btn-hover {
  opacity: 0.88;
}

.submit-btn[disabled] {
  opacity: 0.6;
}

.map-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #368f6f 0%, #4ba98a 100%);
  color: #ffffff;
  flex-shrink: 0;
}

.map-btn-icon {
  font-size: 16px;
  margin-bottom: 1px;
}

.map-btn-text {
  font-size: 10px;
  line-height: 1;
}

.text-xs {
  font-size: 12px;
}

.mt-1 {
  margin-top: 4px;
}
</style>
