<script>
import formBuilder from '@/utils/formBuilder'
import moment from "moment/moment";
export default {
  props: {
    device: {
      type: String,
      default: 'desktop',
      required: true
    },
    info: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  data() {
    return {
      form: {},
      file: {
        ggg: []
      },
      showControl: {},
      vanCalendarOption: {
        isShow: false,
        forFormName: ""
      },
      vanTimePickerOption: {
        isShow: false,
        forFormName: ""
      },
      vanPopupOption: {
        isShow: false,
        forFormName: "",
        columns: []
      }
    }
  },
  methods: {},
  computed: {},
  watch: {
    info(newVal) {
      let keys = newVal.map(i => i.name)
      keys.forEach(key => {
        this.form[key] = ''
      })
    }
  },
  render(h) {
    return h('div',[
      h('van-form',{
        props: {
          'scroll-to-error': true
        }
      },this.info.map(field => formBuilder.bind(this)(this.device, field, h))),
      //calendar
      this.info.findIndex(i => i.type === 'date') !== -1 ?
        h('van-calendar',{
          ref: `vanCalendar`,
          props: {
            value: this.vanCalendarOption.isShow,
            'min-date': this.$moment().subtract('years',10).toDate(),
            'max-date': this.$moment().add('years',10).toDate(),
          },
          on: {
            input: e => {
              this.$set(this.vanCalendarOption,'isShow',e)
            },
            confirm: date => {
              this.$set(this.form,this.vanCalendarOption.forFormName,moment(date).format('YYYY-MM-DD'))
              this.$set(this.vanCalendarOption,'isShow',false)
            }
          }
        }) : '',
      //datetimepicker
      this.info.findIndex(i => i.type === 'datetime') !== -1 ?
        h('van-popup',{
          props: {
            value: this.vanTimePickerOption.isShow,
            position: 'bottom',
          },
          on: {
            input: e => {
              this.$set(this.vanTimePickerOption,'isShow',e)
            },
          }
        },[
          h('van-datetime-picker',{
            props: {
              type: 'datetime'
            },
            on: {
              confirm: time => {
                this.$set(this.form,this.vanTimePickerOption.forFormName,moment(time).format('YYYY-MM-DD HH:mm:ss'))

              },
              cancel: _ => {
                this.$set(this.vanTimePickerOption,'isShow',false)
              }
            }
          })
        ]) : '',
      //popup
      this.info.findIndex(i => i.type === 'datetime') !== -1 ?
        h('van-popup',{
          props: {
            value: this.vanPopupOption.isShow,
            position: 'bottom',
          },
          on: {
            input: e => {
              this.$set(this.vanPopupOption,'isShow',e)
            },
          }
        },[
          h('van-picker',{
            props: {
              'show-toolbar': true,
              columns: this.vanPopupOption.columns,
            },
            on: {
              confirm: value => {
                console.log(value)
                this.$set(this.form,this.vanPopupOption.forFormName,value)

              },
              cancel: _ => {
                this.$set(this.vanPopupOption,'isShow',false)
              }
            }
          })
        ]) : '',
    ])
  }
}
</script>

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