<template>
  <!-- 按钮群组 -->
  <template v-if="item.type === 'buttons'">
    <template v-for="(v, i) in item.children" :key="i">
      <t-button v-bind="v.attrs" @click="v.onClick" v-if="v.type === 'button'">
        {{ v.text }}
      </t-button>
      <t-dropdown
        v-bind="v.attrs"
        @click="v.onClick"
        v-if="v.type === 'dropdown'"
      >
        <t-button v-bind="v.buttonAttrs"
          >{{ v.text }}
          <template #suffix><chevron-down-icon size="16" /></template>
        </t-button>
      </t-dropdown>
    </template>
  </template>
  <!-- 按钮 -->
  <template v-if="item.type === 'button'">
    <t-button v-bind="attrs" @click="item.onClick">
      {{ item.text }}
    </t-button>
  </template>
  <!-- 下拉菜单按钮 -->
  <template v-if="item.type === 'dropdown'"
    ><t-dropdown v-bind="attrs" @click="item.onClick">
      <t-button
        >{{ item.text }}
        <template #suffix><chevron-down-icon size="16" /></template>
      </t-button> </t-dropdown
  ></template>
  <!-- 文本框 -->
  <template v-if="item.type == undefined || item.type == 'text'">
    <t-input
      v-model="params[item.prop]"
      v-bind="attrs"
      @enter="
        () => {
          search();
        }
      "
    />
  </template>
  <!-- 数字 -->
  <template v-if="item.type == 'number'">
    <t-input-number v-model="params[item.prop]" v-bind="attrs" />
  </template>
  <!-- 下拉选择框 -->
  <template v-if="item.type == 'select' || item.type == 'multipleSelect'">
    <t-select
      v-model="params[item.prop]"
      :multiple="item.type == 'multipleSelect'"
      v-bind="attrs"
    >
      <t-option
        v-for="itemValue in item.options"
        :key="itemValue.value"
        :label="itemValue.label"
        :value="itemValue.value"
        :disabled="itemValue.disabled"
      />
    </t-select>
  </template>
  <!-- 下拉树形选择框 -->
  <template
    v-if="item.type == 'treeSelect' || item.type == 'multipleTreeSelect'"
  >
    <t-tree-select
      v-model="params[item.prop]"
      :multiple="item.type == 'multipleTreeSelect'"
      :data="item.options"
      v-bind="attrs"
    />
  </template>
  <!-- 日期选择 -->
  <template v-if="item.type == 'date'">
    <t-date-picker
      v-model="params[item.prop]"
      :mode="item.mode || 'date'"
      value-type="time-stamp"
      v-bind="attrs"
    />
  </template>
  <!-- 时间选择 -->
  <template v-if="item.type == 'time'">
    <t-time-picker
      v-model="params[item.prop]"
      format="HH:mm:ss"
      v-bind="attrs"
    />
  </template>
  <!-- 时间范围选择 -->
  <template v-if="item.type == 'timerange'">
    <t-time-range-picker
      v-model="params[item.prop]"
      format="HH:mm:ss"
      v-bind="attrs"
    />
  </template>
  <!-- 日期范围选择，精确到时分 -->
  <template v-if="item.type == 'daterange'">
    <t-date-range-picker
      v-model="params[item.prop]"
      value-type="time-stamp"
      enable-time-picker
      format="YYYY/MM/DD HH:mm"
      :time-picker-props="{ format: 'HH:mm' }"
      v-bind="attrs"
    />
  </template>
  <!-- 日期范围选择 -->
  <template v-if="item.type == 'dateDayrange'">
    <t-date-range-picker
      v-model="params[item.prop]"
      value-type="time-stamp"
      v-bind="attrs"
    />
  </template>
</template>

<script setup name="SearchFormItem">
import { computed } from 'vue';
import { ChevronDownIcon } from 'tdesign-icons-vue-next';
const props = defineProps({
  item: Object,
  params: Object,
  search: { type: Function, default: () => {} },
});
const attrs = computed(() => {
  let obj = {};
  Object.entries(props.item.attrs || {}).forEach((v) => {
    obj[v[0]] = v[1];
  });
  return obj;
});
</script>
