<!--
 * @Date: 2022-07-18 10:22:22
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-08-30 14:35:02
 * @FilePath: /data-table/src/views/index.vue
 * @Description: 首页
-->
<template>
  <van-image width="100%" height="200" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
  <div style="padding: 1rem;">表单描述</div>
  <div style="padding: 1rem;">
    <van-form @submit="onSubmit">
      <van-cell-group>
        <component v-for="(item, index) in mockData" :key="index" :is="item.component" :item="item" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>

</template>

<script setup>
import { createComponentType } from '@/hooks/useComponentType'

const mockData = ref([]);
onMounted(() => {
  mockData.value = [{
    key: 'username',
    value: 'Hooke',
    label: '用户名',
    placeholder: '请输入用户名',
    component: '',
    component_type: 'text',
    required: true,
  }, {
    key: 'age',
    value: '',
    label: '年龄',
    placeholder: '请输入年龄',
    component: '',
    component_type: 'number',
    required: false,
  }, {
    key: 'gender',
    value: 'female',
    label: '性别',
    placeholder: '',
    component: '',
    component_type: 'radio',
    options: [{
      key: '男',
      value: '男'
    }, {
      key: '女',
      value: '女'
    }]
  }, {
    key: 'hobby',
    value: [],
    label: '兴趣爱好',
    placeholder: '',
    component: '',
    component_type: 'checkbox',
    options: [{
      key: '足球',
      value: '足球'
    }, {
      key: '篮球',
      value: '篮球'
    }]
  }, {
    key: 'message',
    value: 'zzz',
    label: '留言',
    placeholder: '请输入留言',
    component: '',
    component_type: 'textarea',
  }, {
    key: 'vehicle',
    value: '',
    label: '交通工具',
    placeholder: '请选择交通工具',
    component: '',
    component_type: 'picker',
    options: [
      { text: '自行车', value: '自行车' },
      { text: '汽车', value: '汽车' },
      { text: '地铁', value: '地铁' },
    ],
    required: true,
  }, {
    key: 'city',
    value: '',
    component_type: 'area_picker'
  }];
  // 生成自定义组件
  createComponentType(mockData.value)
})

const onSubmit = (values) => {
  console.log('submit', values);
};

</script>

<style lang="less" scoped>
</style>