<template>
  <search-bar :search-config="searchConfig" @search="handleSearch">
    <el-button type="primary">右侧按钮</el-button>
  </search-bar>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { ISearchConfig } from './model'
import { ElButton } from 'element-plus'

const searchConfig: ISearchConfig[] = [
  {
    label: '状态',
    field: 'stautus',
    type: 'select',
    defaultShow: true,
    options: [
      {
        label: '正在进行',
        value: 'running'
      },
      {
        label: '已完成',
        value: 'finished'
      }
    ],
    multiple: false
  },
  {
    label: '项目名称',
    field: 'name',
    defaultShow: true,
    type: 'input'
  },
  {
    label: '型号',
    field: 'model',
    type: 'select',
    options: []
  },
  {
    label: '是否修正',
    field: 'modified',
    type: 'switch',
    default: true
  },
  {
    label: '创建日期',
    field: 'createDate',
    type: 'datetimerange'
  },
  {
    label: '模态不变量',
    field: 'const',
    type: 'inputrange'
  },
  {
    label: '项目名称2',
    field: 'name2',
    defaultShow: true,
    type: 'input'
  }
]

function handleSearch () {
  console.log('search')
}

onMounted(async () => {
  // 模拟异步请求回来的数据
  setTimeout(() => {
    searchConfig.forEach(item => {
      if (item.field === 'model') {
        item.options = ['model1', 'model2'].map(item => ({ label: item, value: item }))
      }
    })
  }, 500)
})
</script>

<style lang="scss">

</style>
