<script setup>
// import { Input,Button,Icon,Message } from "@king-design/vue";
import { ref,reactive } from "vue";
import {isObject,has,assign,unset,mapKeys,eq,get} from 'lodash-es'
import { KsSearch } from '@ksconsole/components'
import {QueryChange} from "@ksconsole/hooks";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const queryChange = new QueryChange(router,route)

// 搜索条件
const searchOptions = [
    {
        key: 'name',
        label: '实例名称',
    },
    {
        key: 'id',
        label: '实例ID',
    },
]
const onSearch = (v) => {
    console.log("🚀 ~ onSearch ~ v:", v)
}
const downloadFn = (v) => {
  console.log("🚀 ~ downloadFn ~ v:", v)
  
}

const submitloading = ref(false)
const onSubmit = () => {
  console.log('我是确认')
  let isClose = true
  submitloading.value = true
  setTimeout(() => {
      submitloading.value = false
      isClose = false
      if(!isClose) {
        Message.error('操作失败')
      }else {
        queryChange._backDetails('memberAdd')
      }
  }, 2000);
}

const onAddInfo = () => {
  queryChange._toDetails('222','memberAdd')
}
const onEdit = () => {
  queryChange._toDetails('1111','memberEdit')
}
const onCusDia = () => {
  queryChange._toDetails('222','memberCusDia')
}
const onCusDra = () => {
  queryChange._toDetails('222','memberCusDra')
}

const onCancel = (key) => {
  queryChange._backDetails(key)
} 
</script>

<template>
  <div>
     <ks-dialog 
      title = '关联成员'
      querykey='memberAdd'
      @onSubmit='onSubmit'
      :submitloading ='submitloading'
     >
      我是内容
     </ks-dialog>
     <ks-dialog 
      title = '编辑'
      querykey='memberEdit'
      dialogType='drawer'
      @onSubmit='onSubmit'
      :submitloading ='submitloading'
     >
      我是编辑
     </ks-dialog>
    <ks-dialog 
      title = '自定义按钮'
      querykey='memberCusDia'
      @onSubmit='onSubmit'
      :submitloading ='submitloading'
     >
      我是内容
      <template #myfooter>
        <Button @click='onCancel("memberCusDia")'>取消</Button>
     </template>
     </ks-dialog>
     <ks-dialog 
      title = '自定义按钮'
      querykey='memberCusDra'
      dialogType='drawer'
      @onSubmit='onSubmit'
      :submitloading ='submitloading'
     >
      <template #myfooter>
        <Button @click='onCancel("memberCusDra")'>取消</Button>
     </template>
     </ks-dialog>
    
    <ks-search
     :searchOptions ='searchOptions'
      @onSearch='onSearch'
      hasDown
      @export="downloadFn"
    >
      <Button type='primary' @click='onAddInfo' class='app-add'><Icon class="k-icon-add" /> 关联成员 </Button>   
      <Button @click='onEdit'> 编辑</Button>
    </ks-search>
    <Button @click='onCusDia'> 自定义按钮-弹框</Button>
    <Button @click='onCusDra'> 自定义按钮-抽屉</Button>
  </div>
</template>

<style scoped lang='less'>
.app-add {
  margin-right: 10px;
}
</style>
