<template>
  <view class="app-container pb-24">
    <TopBar title="发布任务" show-back />

    <view class="px-4 py-4 gap-y-4">
      <!-- 项目基本信息 -->
      <uni-card title="项目信息" icon="uniui-flag-filled" :is-shadow="true">
        <view class="gap-y-4 pt-2">
          <view>
            <text class="text-sm text-gray-600 block mb-2">
              <text class="text-red-500">*</text> 选择项目
            </text>
            <picker mode="selector" :range="projectNames" :value="selectedProjectIndex" @change="onProjectChange">
              <view class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm flex items-center justify-between bg-white">
                <text :class="selectedProject ? 'text-gray-800' : 'text-gray-400'">{{ selectedProject || '请选择项目' }}</text>
                <text class="uni-icons uniui-arrowright text-gray-400"></text>
              </view>
            </picker>
          </view>

          <view v-if="selectedProjectObj" class="bg-green-50 rounded-xl p-3">
            <view class="flex items-center justify-between mb-2">
              <text class="text-green-600 text-sm font-medium">已选择：{{ selectedProjectObj.name }}</text>
              <text class="text-green-500 text-xs" @click="selectedProject = ''; selectedProjectObj = null">重新选择</text>
            </view>
            <view class="gap-y-1">
              <view class="flex justify-between text-sm">
                <text class="text-gray-500">合作类型：</text>
                <text class="text-gray-700">{{ selectedProjectObj.type }}</text>
              </view>
              <view class="flex justify-between text-sm">
                <text class="text-gray-500">项目地址：</text>
                <text class="text-gray-700">{{ selectedProjectObj.address }}</text>
              </view>
            </view>
          </view>
        </view>
      </uni-card>

      <!-- 服务信息 -->
      <uni-card title="服务信息" icon="uniui-calendar-filled" :is-shadow="true">
        <view class="gap-y-4 pt-2">
          <view>
            <text class="text-sm text-gray-600 block mb-2">
              <text class="text-red-500">*</text> 服务时间
            </text>
            <picker mode="date" :value="serviceDate" @change="onServiceDateChange">
              <view class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm flex items-center justify-between bg-white">
                <text :class="serviceDate ? 'text-gray-800' : 'text-gray-400'">{{ serviceDate || '请选择日期' }}</text>
                <text class="uni-icons uniui-calendar-filled text-gray-400"></text>
              </view>
            </picker>
          </view>

          <view>
            <text class="text-sm text-gray-600 block mb-2">
              <text class="text-red-500">*</text> 故障位置
            </text>
            <input v-model="faultLocation" class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm text-gray-800 bg-white" placeholder="请输入故障位置" />
          </view>

          <view>
            <text class="text-sm text-gray-600 block mb-2">故障描述</text>
            <textarea v-model="faultDesc" class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm text-gray-800 bg-white" style="min-height: 80px;" placeholder="请描述故障情况..." />
          </view>

          <view>
            <text class="text-sm text-gray-600 block mb-2">服务方式</text>
            <picker mode="selector" :range="serviceModes" :value="selectedServiceModeIndex" @change="onServiceModeChange">
              <view class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm flex items-center justify-between bg-white">
                <text :class="serviceMode ? 'text-gray-800' : 'text-gray-400'">{{ serviceMode || '请选择服务方式' }}</text>
                <text class="uni-icons uniui-arrowright text-gray-400"></text>
              </view>
            </picker>
          </view>

          <view>
            <text class="text-sm text-gray-600 block mb-2">紧急程度</text>
            <view class="flex gap-3">
              <view
                class="flex-1 py-2 px-3 rounded-lg border text-center text-sm"
                :class="urgentLevel === 'normal' ? 'border-blue-500 bg-blue-50 text-blue-600' : 'border-gray-200 text-gray-600'"
                @click="urgentLevel = 'normal'"
              >
                <text class="uni-icons mr-1" :class="urgentLevel === 'normal' ? 'uniui-checkmarkempty' : ''"></text>
                普通
              </view>
              <view
                class="flex-1 py-2 px-3 rounded-lg border text-center text-sm"
                :class="urgentLevel === 'high' ? 'border-red-500 bg-red-50 text-red-600' : 'border-gray-200 text-gray-600'"
                @click="urgentLevel = 'high'"
              >
                <text class="uni-icons mr-1" :class="urgentLevel === 'high' ? 'uniui-checkmarkempty' : ''"></text>
                加急
              </view>
            </view>
          </view>
          <!-- 图片上传 -->
          <view>
            <text class="text-sm text-gray-600 block mb-2">现场照片</text>
            <ImageUploader v-model="taskImages" :max-count="6" tip="最多上传6张照片" />
          </view>

        </view>
      </uni-card>

      <!-- 施工信息 -->
      <uni-card title="施工信息" icon="uniui-cart-filled" :is-shadow="true">
        <view class="gap-y-4 pt-2">
          <view>
            <text class="text-sm text-gray-600 block mb-2">施工设施</text>
            <input v-model="facility" class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm text-gray-800 bg-white" placeholder="请输入施工设施" />
          </view>

          <view>
            <text class="text-sm text-gray-600 block mb-2">建议出车</text>
            <picker mode="selector" :range="vehicleOptions" :value="selectedVehicleIndex" @change="onVehicleSelectChange">
              <view class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm flex items-center justify-between bg-white">
                <text :class="selectedVehicle ? 'text-gray-800' : 'text-gray-400'">{{ selectedVehicle || '请选择车辆' }}</text>
                <text class="uni-icons uniui-arrowright text-gray-400"></text>
              </view>
            </picker>
          </view>

          <view>
            <text class="text-sm text-gray-600 block mb-2">预计工时</text>
            <input v-model="estimatedHours" class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm text-gray-800 bg-white" placeholder="例如：2小时" />
          </view>

          <view>
            <text class="text-sm text-gray-600 block mb-2">验收要求</text>
            <input v-model="acceptReq" class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm text-gray-800 bg-white" placeholder="请输入验收要求" />
          </view>

          <view>
            <text class="text-sm text-gray-600 block mb-2">备注</text>
            <textarea v-model="remark" class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm text-gray-800 bg-white" style="min-height: 80px;" placeholder="请输入备注信息..." />
          </view>
        </view>
      </uni-card>

      <!-- 提交按钮 -->
      <button class="w-full py-3 bg-blue-500 text-white rounded-xl font-medium flex items-center justify-center" @click="submitTask">
        <text class="uni-icons uniui-plusempty mr-2"></text>
        发布任务
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import TopBar from '../../components/common/TopBar.vue'
import UniCard from '../../components/uni-card/uni-card.vue'
import ImageUploader from '../../components/common/ImageUploader.vue'

const selectedProject = ref('')
const selectedProjectObj = ref<any>(null)
const serviceDate = ref('')
const faultLocation = ref('')
const faultDesc = ref('')
const serviceMode = ref('')
const urgentLevel = ref<'normal' | 'high'>('normal')
const facility = ref('')
const selectedVehicle = ref('')
const estimatedHours = ref('')
const acceptReq = ref('')
const remark = ref('')
const taskImages = ref<string[]>([])

// 模拟项目数据
const mockProjects = [
  { name: '积丹白鹭小区', type: '包年', address: 'XX市XX区XX路123号' },
  { name: '俊发城', type: '单次', address: 'XX市XX区XX路456号' },
  { name: '万科金域华府', type: '季度', address: 'XX市XX区XX路789号' },
]

const projectNames = mockProjects.map(p => p.name)
const serviceModes = ['常规', '应急']
const vehicleOptions = ['清洁车', '垃圾清运车', '高压清洗车', '洒水车']

const selectedProjectIndex = computed(() => projectNames.indexOf(selectedProject.value))
const selectedServiceModeIndex = computed(() => serviceModes.indexOf(serviceMode.value))
const selectedVehicleIndex = computed(() => vehicleOptions.indexOf(selectedVehicle.value))

function onProjectChange(e: any) {
  const index = e.detail.value
  selectedProject.value = projectNames[index]
  selectedProjectObj.value = mockProjects[index]
}

function onServiceDateChange(e: any) {
  serviceDate.value = e.detail.value
}

function onServiceModeChange(e: any) {
  serviceMode.value = serviceModes[e.detail.value]
}

function onVehicleSelectChange(e: any) {
  selectedVehicle.value = vehicleOptions[e.detail.value]
}

function submitTask() {
  if (!selectedProject.value) {
    uni.showToast({ title: '请选择项目', icon: 'none' })
    return
  }
  if (!serviceDate.value) {
    uni.showToast({ title: '请选择服务时间', icon: 'none' })
    return
  }
  if (!faultLocation.value) {
    uni.showToast({ title: '请输入故障位置', icon: 'none' })
    return
  }

  uni.showToast({ title: '任务发布成功', icon: 'success' })
  setTimeout(() => {
    uni.switchTab({ url: '/pages/task/task' })
  }, 1500)
}
</script>
