<template>
  <van-form
    ref="form"
    class="form"
    validate-trigger="onChange"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template v-for="(item, index) in fields">
      <div class="form-item" :key="index">
        <!-- 时间 -->
        <template v-if="item.fieldType === 'date'">
          <van-field
            readonly
            clickable
            :border="false"
            v-bind="item"
            v-model="ruleForm[item.name]"
            @click="showPicker(item)"
          />
        </template>
        <!-- 选择 -->
        <template v-else-if="item.fieldType === 'select'">
          <van-field
            readonly
            clickable
            :border="false"
            v-bind="item"
            v-model="ruleForm[item.name]"
            @click="showPicker(item)"
          />
        </template>
        <!-- 上传图片 -->
        <van-field
          :border="false"
          v-bind="item"
          v-model="ruleForm[item.name]"
          v-else-if="item.fieldType === 'uploader'"
        >
          <template #input>
            <upload v-model="ruleForm[item.name]" :max-count="1" />
          </template>
        </van-field>
        <!-- 文本框 -->
        <van-field
          :border="false"
          v-bind="item"
          v-model="ruleForm[item.name]"
          v-else
        />
        <van-popup v-model="pickerVisible" position="bottom">
          <van-datetime-picker
            type="date"
            :value="pickerValue"
            :min-date="minDate"
            @confirm="onTimePickerConfirm"
            @cancel="pickerVisible = false"
            v-if="pickerType === 'date'"
          />
          <van-picker
            show-toolbar
            :columns="pickerColumns"
            @confirm="onPickerConfirm"
            @cancel="pickerVisible = false"
            v-if="pickerType === 'select'"
          />
        </van-popup>
      </div>
    </template>
  </van-form>
</template>

<script>
import dayjs from 'dayjs'
import Upload from '@/components/Upload'

export default {
  name: 'VForm',
  components: { Upload },
  props: {
    model: {
      type: Object,
      default() {
        return {}
      }
    },
    fields: {
      type: Array,
      required: true,
      default() {
        return []
      }
    }
  },
  watch: {
    model: {
      immediate: true,
      deep: true,
      handler(value) {
        this.ruleForm = value
      }
    }
  },
  data() {
    return {
      ruleForm: this.model,
      pickerVisible: false,
      pickerType: '',
      pickerName: '',
      pickerValue: '',
      pickerList: [],
      pickerColumns: [],
      minDate: new Date(),
      pickerRemote: null,
      pickerActive: {}
    }
  },
  methods: {
    showPicker({ fieldType, name, remote }) {
      this.pickerVisible = true
      this.pickerName = name
      this.pickerType = fieldType
      this.pickerValue = this.ruleForm[name]
      if (fieldType === 'select') {
        if (remote) {
          this.pickerColumns = []
        }
        this.pickerRemote = remote
        this.getSelectList(remote)
      }
    },
    onPickerConfirm(value) {
      this.ruleForm[this.pickerName] = value
      this.pickerVisible = false
      if (this.pickerRemote && this.pickerRemote.change) {
        this.pickerActive = this.pickerList.find(
          item => item[this.pickerRemote.valueKey] === value
        )
      }
    },
    onTimePickerConfirm(time) {
      this.ruleForm[this.pickerName] = dayjs(time).format('YYYY-MM-DD')
      this.pickerVisible = false
    },
    submit() {
      return this.$refs.form.submit()
    },
    getSelectList(remote) {
      if (!remote) {
        return
      }
      remote.request(this.pickerActive).then(response => {
        const data = response.data
        this.pickerList = data
        this.pickerColumns = data.map(item => item[remote.valueKey])
      })
    }
  }
}
</script>
