<!--
 * @Date: 2022-07-18 10:22:22
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-09-06 15:53:40
 * @FilePath: /data-table/src/views/index.vue
 * @Description: 首页
-->
<template>
  <van-image v-if="table_cover" width="100%" height="200" :src="table_cover" />
  <div v-if="table_title" class="table-title">{{ table_title }}</div>
  <div class="table-box">
    <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 table_cover = ref('');
const table_title = ref('');
const mockData = ref([]);

onMounted(() => {
  table_cover.value = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
  table_title.value = '这是一个表单的描述'
  mockData.value = [
  // {
  //   key: 'phone',
  //   value: '',
  //   label: '手机号',
  //   placeholder: '请输入手机号',
  //   component: '',
  //   component_props: {
  //     name: 'phone'
  //   },
  //   required: true,
  // },
  {
    key: 'username',
    value: 'test',
    label: '用户名',
    placeholder: '请输入用户名',
    component: '',
    component_props: {
      name: 'text'
    },
    required: true,
  },
  // {
  //   key: 'email',
  //   value: '',
  //   label: '邮箱',
  //   placeholder: '请输入邮箱',
  //   component: '',
  //   component_props: {
  //     name: 'email'
  //   },
  //   required: true,
  // },
  // {
  //   key: 'age',
  //   value: '',
  //   label: '年龄',
  //   placeholder: '请输入年龄',
  //   component: '',
  //   component_props: {
  //     name: 'number'
  //   },
  //   required: false,
  // },
  // {
  //   key: 'gender',
  //   value: '',
  //   label: '性别',
  //   placeholder: '',
  //   component: '',
  //   component_props: {
  //     name: 'radio'
  //   },
  //   options: [{
  //     key: '男',
  //     value: '男'
  //   }, {
  //     key: '女',
  //     value: '女'
  //   }]
  // },
  // {
  //   key: 'hobby',
  //   value: [],
  //   label: '兴趣爱好',
  //   placeholder: '',
  //   component: '',
  //   component_props: {
  //     name: 'checkbox'
  //   },
  //   options: [{
  //     key: '足球',
  //     value: '足球'
  //   }, {
  //     key: '篮球',
  //     value: '篮球'
  //   }]
  // },
  // {
  //   key: 'message',
  //   value: 'zzz',
  //   label: '留言',
  //   placeholder: '请输入留言',
  //   component: '',
  //   component_props: {
  //     name: 'textarea'
  //   },
  // },
  // {
  //   key: 'vehicle',
  //   value: '自行车',
  //   label: '交通工具',
  //   placeholder: '请选择交通工具',
  //   component: '',
  //   component_props: {
  //     name: 'picker'
  //   },
  //   options: [
  //     { text: '自行车', value: '自行车' },
  //     { text: '汽车', value: '汽车' },
  //     { text: '地铁', value: '地铁' },
  //   ],
  //   required: true,
  // },
  {
    key: 'city',
    value: '天津市/天津市/和平区',
    city_code: '120101',
    label: '地址',
    address: '',
    placeholder: '请选择省市区',
    component_props: {
      name: 'area_picker'
    },
  },
  // {
  //   key: 'datetime',
  //   value: [],
  //   label: '日期选择',
  //   placeholder: '请选择日期',
  //   component_props: {
  //     name: 'date_picker',
  //     title: '请选择',
  //     min_date: new Date(),
  //     columns_type: ['year', 'month']
  //   },
  // },
  // {
  //   key: 'imageUploader',
  //   value: '',
  //   label: '图片上传',
  //   component_props: {
  //     name: 'image_uploader',
  //     image_type: ['jpg', 'png'],
  //     multiple: false
  //   }
  // }
  ];
  // 生成自定义组件
  createComponentType(mockData.value)
})

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

</script>

<style lang="less" scoped>
  .table-title {
    padding: 1rem;
  }
  .table-box {
    padding: 1rem;
  }
</style>