<template>
	<div class="app-field-box">
		<h3>表单分区</h3>
		<KsForm @onSubmit="onSubmit" ref='zyform'  labelWidth="100" >
      <div class='app-field-group' >
        <h3>负载均衡配置</h3>
        <FormItem>
          <Upload multiple
            :beforeRemove="beforeRemove"
            action="/products"
            accept=".jpg, .png"
            :maxSize="500"
            @error="showError"
          >
            <template v-slot:tip>只能上传JPG/PNG格式文件，且不超过500kb</template>
          </Upload>
        </FormItem>
        <KsField entityKey="upload" ></KsField>
        <KsField entityKey="treeSelect" @change="onChange" 
          itemClass='app-field-formItem111' class='app-field-input222' 
        >
          <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template>
        </KsField>
        <KsField entityKey="cascader" @change="onChange" >
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="spinner" @change="onChange"  >
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="transfer" @change="onChange"  >
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="buttonGroup" @change="onChange"  >
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="buttonGroup2" @change="onChange">
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="time" @change="onChange"  >
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="slider" @change="onChange"  >
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="checkboxType" @change="onChange">
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="textarea" @change="onChange"  >
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="switchType" @change="onChange">
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="readOnly" @change="onChange"  >
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="switchType2" @change="onChange">
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="radioType" @change="onChange"  >
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="modalName" @change="onChange"  >
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="inputCompose1" @change="onChange"  >
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="inputCompose2" @change="onChange" type='vertical'>
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
        <KsField entityKey="spinner" @change="onChange" :max="10" :min="0" :step="1.2">
          <!-- <template #unit>Mbps</template>
          <template #tip>我是下面的tips</template> -->
        </KsField>
      </div>

      <div class='app-field-group' >
        <h3>绑定弹性IP</h3>
        <KsField entityKey="name" @change="onChange" showCount maxlength="10">
				<template #tip>您还可以关联 0 个安全组，已关联 5 个</template>
        </KsField>
        <KsField entityKey="password" @change="onChange" type="password" showPassword />
        <KsField entityKey="textarea" @change="onChange" type="textarea" >
          <template #tip>您还可以关联 0 个安全组，已关联 5 个</template>
        </KsField>
        <KsField entityKey="readOnly" />
        <KsField entityKey="singletype" @change="onChange" >
          <template v-slot:label><i class="ion-person"></i> 姓名111</template>
        </KsField>
        <KsField entityKey="multipletype" />
        <KsField entityKey="treeSelect"  />
        <!-- 用自己写的 -->
        <FormItem label="测试input" :value="formState.zyinput">
          <Input v-model="formState.zyinput" />
        </FormItem>

         <FormItem label="有间隔的按钮组" :value="formState.city">
           <ButtonGroup checkType="radio" v-model="formState.city" separate>
            <Button value="beijing">北京</Button>
            <Button value="shanghai">上海</Button>
            <Button value="guangzhou">广州</Button>
            <Button value="shenzhen">深圳</Button>
          </ButtonGroup>
        </FormItem>
      </div>
			
			<template #footer>
				<Button type="primary" htmlType="submit" >自己写的按钮</Button>
        &nbsp;
				<Button type="primary"  @click='reset'>重置</Button>
			</template>
		</KsForm>


	</div>


  
</template>
<script setup>
import { reactive, provide,ref } from 'vue';
import { Form, FormItem, Upload,Input,Button,Message,ButtonGroup } from '@king-design/vue';
import { PageEntity,pageEntity } from './controllers/entity';
import { KsForm,KsField,KsFormModal,KsDialog } 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)

function beforeRemove(file) {
            return new Promise((resolve, reject) => {
                Dialog.confirm({content: `确认删除文件：${file.name}?`}).then(
                    () => resolve(true),
                    () => resolve(false),
                );
            });
        }
       function showError(e) {
            Message.error(e.message);
        }

KsForm.addMethod('check', function (value) {
  return value === '1234'
}, '请输入1234')
const formState = reactive({
	name: '',
	password: undefined,
	textarea: undefined,
	singletype: '1',
	multipletype: ['1', '2'],
	switchType: true,
	switchType2: false,
	radioType: '1',
	checkboxType: ['1', '2'],
	slider: 2,
	time: ["2024-06-03 00:00:00","2024-06-07 23:59:59"],
	buttonGroup: 'bj',
	buttonGroup2: ['bj','wh'],
	transfer: [],
	zyinput: 1,
	modalName: '',
	treeSelect:'0-0',
  readOnly: '我是只读的内容',
  inputCompose1: ['111','222'],
  inputCompose2: ['111','222'],
  city:'beijing',
  upload:[{name: 'test1.jpg', url: 'http://www.example.com/test1.jpg'},],
});

provide('formInfo', {
	formState,
  pageEntity,
	formType: 'details'
});
const toFormModal = () => {
	queryChange._toDetails('','formmodal')
}
const onChange1 = (v) =>{
	console.log('1111',v)
}
const onChange = (v) => {
	console.log('🚀 ~ onChange ~ v:', v);
};
const toDetail = () => {
	setTimeout(() => {
		queryChange._toDetails('','edit')
	}, 0);
	queryChange._toDetails('','_readonly')
}
const toAddOrEdit = () => {
	queryChange._toQuery({_readonly:false})
	setTimeout(() => {
		queryChange._toDetails('','edit')
	}, 0);
}
const zyform = ref(null)
const reset = ()=>{
  zyform.value.reset()
  formState.name = ''
}
const onSubmit = (formState) => {
	console.log("表单提交:", formState)
	Message.info({
		content: JSON.stringify(formState),
		duration: 10000,
		closable: true
	});
}
</script>

<style scoped lang="less">
.app-field-line {
	margin: 24px;
	border-bottom: 1px solid #e8e8e8;
}
.app-field-box {
  width: 100vw;
  background: #f5f5f5;
	padding: 24px;
}
.app-field-group {
  width: 100%;
  background: #fff;
  margin-bottom: 20px;
  padding: 16px 24px;
}
</style>
