<template>
  <div>
    <van-form @submit="onSubmit">
      <template v-for="(item, index) in fields">
        <template v-if="item.type === 'select'">
          <select :key="index" v-model="form[item.name]" class="van-field__control">
            <option value="" disabled selected v-if="item.placeholder">{{ item.placeholder }}</option>
            <option v-for="option in item.values" :value="option[item.valueKey] || option.name" :key="option.name">
              {{ option.text }}
            </option>
          </select>
        </template>
        <template v-else-if="item.type === 'textarea'">
          <van-field
            :key="index"
            v-model="form[item.name]"
            rows="2"
            :label="item.label"
            type="textarea"
            :placeholder="item.placeholder"
          />          
        </template>
        <template v-else-if="item.type === 'uploader'">
          <van-field
            :key="index"
            :border="false"
            :required="false"
            v-model="form[item.name]"
          >
            <template #label>
              {{ item.label }}
              <div class="form-item__tips" v-if="item.tips">{{ item.tips }}</div>
              <!-- <span class="red" v-if="item.required">*</span> -->
            </template>
            <template #input>
              <upload v-model="form[item.name]" v-bind="item" :max-count="1" />
            </template>
          </van-field>
        </template>
        <template v-else>
          <van-field
            :key="index"
            v-model="form[item.name]"
            :label="item.label"
            :placeholder="item.placeholder"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
        </template>
      </template>
      <!-- <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div> -->
    </van-form>
  </div>
</template>
<script>
import Upload from '@/components/Upload'
export default {
  components: { Upload },
  props: {
    fields: { type: Array }
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      columns: ['11', '22']
    }
  },
  methods: {
    onSubmit() {
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
