<template>
  <div class='app-zoey-demo'>
     <Card title="多个查询">
        <ks-search
          :searchOptions ='searchOptions'
          @onSearch='onSearch'
          hasDown
          hasRefresh
          @onExport="downloadFn"
        >
          我是左侧内容
        </ks-search>
      </Card>
   <Card title="多个查询-可重置">
    <ks-search
     :searchOptions ='searchOptions'
      @onSearch='onSearch'
      hasDown
      hasRefresh
      @onExport="downloadFn"
      ref='mySearch1'
    >
       <Button type='primary' @click='onReset("1")'> 重置搜索条件 </Button>   
    </ks-search>
    </Card>
    <Card title="单个查询">
    <ks-search
     :searchOptions ='searchOptions2'
      @onSearch='onSearch'
      hasDown
      hasRefresh
      @onExport="downloadFn"
    >
      <Button type='primary' > 左侧内容 </Button>   
    </ks-search>
    </Card>
<Card title="单个查询-可重置">
    <ks-search
     :searchOptions ='searchOptions2'
      @onSearch='onSearch'
      hasDown
      hasRefresh
      @onExport="downloadFn"
      ref='mySearch2'
    >
      <Button type='primary' @click='onReset("2")'> 重置搜索条件 </Button>   
    </ks-search>
    </Card>
    <Card title="单条带清除逻辑的搜索">
      <KsInput @onTransValue='ongetValue' placeholder="请输入名称"/>
    </Card>
  </div>
</template>
<script setup>
// import { KsSearch,KsInput } from '@ksconsole/components'
// import { Input,Button,Icon,Message,Card } from "@king-design/vue";
import { ref,reactive } from "vue";
const mySearch1 = ref(null)
const mySearch2 = ref(null)
// 搜索条件
const searchOptions = [
    {
        key: 'name',
        label: '实例名称',
        placeholder: '我是自定义的搜索条件',
    },
    {
        key: 'id',
        label: '实例ID',
    },
]

// 搜索条件2
const searchOptions2 = [
    {
        key: 'name2',
        label: '实例名称',
    },
]
const onSearch = (v) => {
    console.log("🚀 ~ onSearch ~ v:", v)
    Message.info({content: JSON.stringify(v)})
}
const downloadFn = (v) => {
  console.log("🚀 ~ downloadFn ~ v:", v)
   Message.info({content: v})
  
}
const ongetValue = (v) => {
  console.log("🚀 ~ ongetValue ~ v:", v)
   Message.info({content: v})
  
}
const onReset = (type) => {
  type === '1' ? mySearch1.value._reset() : mySearch2.value._reset()
}


</script>



<style scoped>
.app-zoey-demo {
  padding: 24px;
  
}
</style>
