<template>
  <!-- 搜索框入口 -->
  <view @click="visible = true">
    <wd-search :placeholder="placeholder" hide-cancel disabled />
  </view>

  <!-- 搜索弹窗 -->
  <wd-popup v-model="visible" position="top" @close="visible = false">
    <view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
      <view class="yd-search-form-item">
        <view class="yd-search-form-label">
          采摘编号
        </view>
        <wd-input
          v-model="formData.pickCode"
          placeholder="请输入采摘编号"
          clearable
        />
      </view>
      <view class="yd-search-form-item">
        <view class="yd-search-form-label">
          采摘人员
        </view>
        <wd-input
          v-model="formData.userName"
          placeholder="请输入采摘人员姓名"
          clearable
        />
      </view>
      <view class="yd-search-form-item">
        <view class="yd-search-form-label">
          状态
        </view>
        <wd-radio-group v-model="formData.status" shape="button">
          <wd-radio :value="-1">
            全部
          </wd-radio>
          <wd-radio :value="1">
            已采摘
          </wd-radio>
          <wd-radio :value="2">
            已装框
          </wd-radio>
          <wd-radio :value="3">
            已装车
          </wd-radio>
          <wd-radio :value="4">
            已入库
          </wd-radio>
        </wd-radio-group>
      </view>
      <view class="yd-search-form-actions">
        <wd-button class="flex-1" plain @click="handleReset">
          重置
        </wd-button>
        <wd-button class="flex-1" type="primary" @click="handleSearch">
          搜索
        </wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import { getNavbarHeight } from '@/utils'

const emit = defineEmits<{
  search: [data: Record<string, any>]
  reset: []
}>()

const visible = ref(false)
const formData = reactive({
  pickCode: undefined as string | undefined,
  userName: undefined as string | undefined,
  status: -1,
})

const statusMap: Record<number, string> = {
  1: '已采摘',
  2: '已装框',
  3: '已装车',
  4: '已入库',
}

/** 搜索条件 placeholder 拼接 */
const placeholder = computed(() => {
  const conditions: string[] = []
  if (formData.pickCode) {
    conditions.push(`编号:${formData.pickCode}`)
  }
  if (formData.userName) {
    conditions.push(`人员:${formData.userName}`)
  }
  if (formData.status !== -1) {
    conditions.push(`状态:${statusMap[formData.status] || formData.status}`)
  }
  return conditions.length > 0 ? conditions.join(' | ') : '搜索采摘记录'
})

/** 搜索 */
function handleSearch() {
  visible.value = false
  const params: Record<string, any> = {}
  if (formData.pickCode) {
    params.pickCode = formData.pickCode
  }
  if (formData.userName) {
    params.userName = formData.userName
  }
  if (formData.status !== -1) {
    params.status = formData.status
  }
  emit('search', params)
}

/** 重置 */
function handleReset() {
  formData.pickCode = undefined
  formData.userName = undefined
  formData.status = -1
  visible.value = false
  emit('reset')
}
</script>
