<template>
  <a-card>
    <a-form
      :model="searchInfo"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      layout="inline"
    >
      <div v-for="(item, index) in searchData" :key="index">
        <a-form-item v-if="item.type == 'input'" :label="item.label">
          <a-input v-model="searchInfo[item.value]" />
        </a-form-item>
        <a-form-item v-if="item.type == 'select'" :label="item.label">
          <a-select
            v-model="searchInfo[item.value]"
            :placeholder="item.placeholder"
            :options="item.menu"
            style="width: 120px"
          >
          </a-select>
        </a-form-item>
        <a-form-item v-if="item.type === 'picker'" :label="item.label">
          <a-date-picker
            v-model:value="searchInfo[item.value]"
            show-time
            type="date"
            :placeholder="item.placeholder"
            style="width: 100%"
          />
        </a-form-item>
      </div>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">搜索</a-button>
      </a-form-item>
      <a-form-item>
        <a-button style="margin-left: 10px">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
export default {
  name: 'Search',
  props: {
    searchInfo: {
      type: Object,
      default: () => ({})
    },
    searchData: {
      type: Array,
      default: () => ({})
    }
  },
  setup (props: any, ctx) {
    const searchInfo: any = reactive(props.searchInfo)
    const searchData = reactive(props.searchData)
    const onSubmit = () => {
      console.log('submit!', toRaw(searchInfo))
      ctx.emit('submit-data', toRaw(searchInfo))
    }
    console.log(searchInfo)
    console.log(searchData)
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      searchInfo,
      onSubmit,
      searchData
    }
  }
}
</script>

<style scoped>

</style>
