<template>
  <div class='app-zoey-demo'>
    <KsDateSelect @onChangeDate='onChangeDate'/>
    <p v-line>我是测试</p>
     <ks-dialog 
      title = '关联成员12'
      querykey='memberAdd'
      @onSubmit='onSubmit'
      :loading ='submitloading'
      okText='我是确认按钮'
     >
     <template v-slot:header>
     	 <div><span> > </span>我是头部1111</div>
    </template>
      我是内容
     </ks-dialog>
     <ks-dialog 
      title = '编辑'
      querykey='memberEdit'
      dialogType='drawer'
      @onSubmit='onSubmit'
      :disabledOk='true'
      :loading ='submitloading'
      okText='我是确认按钮'
     >
     <template v-slot:header>
     	 <div><span> > </span>我是头部1111</div>
    </template>
      我是编辑
     </ks-dialog>
  
    <ks-search
     :searchOptions ='searchOptions'
      @onSearch='onSearch'
      hasDown
      hasRefresh
      :columnDatas="columnDatas"
      @export="downloadFn"
      ref='mySearch1'
    >
      <Button type='primary' @click='onAddInfo'><Icon class="k-icon-add" /> 关联成员 </Button>   &nbsp;&nbsp;
      <Button @click='onEdit'> 编辑</Button> &nbsp;&nbsp;
      <Button @click='updateRouter'> 更新路由</Button>&nbsp;&nbsp;
      <Button @click='onReset("1")'> 重置查询条件 </Button>
    </ks-search>
    <!-- <ks-search
     :searchOptions ='searchOptions2'
      @onSearch='onSearch'
      hasDown
      hasRefresh
      @export="downloadFn"
      ref='mySearch2'
    >
      <Button type='primary' @click='onAddInfo'><Icon class="k-icon-add" /> 关联成员 </Button>   
      <Button @click='onReset("2")'> 重置查询条件 </Button>

    </ks-search> -->
    <KsInput @onTransValue='ongetValue' placeholder="请输入11" ref="demo"/>
    <Button @click='onReset1()'> 重置单条查询条件 </Button>
    <div :style="{margin: '20px'}" ></div>
    <h4>下拉使用</h4>
    <KsSelect
        v-model="selectValue1"
        :data="data"
        label="云环境1"
        clearable
        width="300px"
    />
    选择的值：{{selectValue1}}
    <h4>自定义placeholder</h4>
    <KsSelect
        v-model="selectValue2"
        :data="data"
        label="云环境2"
        :nodefalut="true"
        placeholder="请选择所需要的数据"
    />
    选择的值：{{selectValue2}}

    <h4>不需要默认值</h4>
    <KsSelect
        v-model="selectValue3"
        :data="data"
        label="云环境3"
        :nodefalut="true"
    />
    选择的值：{{selectValue3}}

    <h4>不带label</h4>
    <KsSelect
        v-model="selectValue4"
        :data="data"
        :nodefalut="true"
    />
    选择的值：{{selectValue4}}
  </div>
</template>
<script setup>
import { CommonTable,KsSearch,KsPagin,KSTree,KsDialog,KsInput,KsSelect, KsDateSelect} from '../../../packages/components/index';
import { Input,Button,Icon,Message,ButtonGroup } from "@king-design/vue";
import { ref,reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { isObject, has, assign, unset, mapKeys, eq, get, map } from 'lodash-es';
import {QueryChange,useRouteChange} from "@ksconsole/hooks";
const router = useRouter();
const route = useRoute();
const queryChange = new QueryChange(router,route)
const { addRouteKey,removeRouteKey,toQuery} = useRouteChange(router,route)
const mySearch1 = ref(null)
const mySearch2 = ref(null)
const demo = ref(null)
const onReset1 = () => {
  demo.value._reset() 
}
const city = ref('beijing')
const selectValue1 = ref('')
const selectValue2 = ref('')
const selectValue3 = ref('')
const selectValue4 = ref('')
const data = [
          { label: '数据1', value: '1' },
          { label: '数据2', value: '2' },
        ]
// 当前页面的列配置
const columnDatas = ref([
    {key:'111',title:'111',disabled: true},
    {key:'222',title:'222'},
    {key:'333',title:'333'},
    {key:'444',title:'444'},
    {key:'555',title:'555'},
    {key:'666',title:'666'},
    {key:'777',title:'777'},
    {key:'888',title:'888'},
])
// 搜索条件
const searchOptions = [
    {
        key: 'name',
        label: '实例名称',
    },
    // {
    //     key: 'id',
    //     label: '实例ID',
    // },
]

// 搜索条件2
const searchOptions2 = [
    {
        key: 'name2',
        label: '实例名称',
        placeholder: '我是自定义的搜索条件',
    },
]
const onSearch = (v) => {
    console.log("🚀 ~ onSearch ~ v:", v)
}
const downloadFn = (v) => {
  console.log("🚀 ~ downloadFn ~ v:", v)
  
}
const ongetValue = (v) => {
  console.log("🚀 ~ ongetValue ~ v:", v)
  
}

const onReset = (type) => {
  type === '1' ? mySearch1.value._reset() : mySearch2.value._reset()
}

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 {
        removeRouteKey('memberAdd')
      }
  }, 2000);
}

const onAddInfo = () => {
  addRouteKey('222','memberAdd')

}
const onEdit = () => {
  addRouteKey('1111','memberEdit')
}

const updateRouter = () => {
  toQuery({'active':'111',aaa:''})
}

const onChangeDate = (v) => {
  console.log("🚀 ~ onChangeDate ~ v:", v)
}

</script>



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