<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>
          <div class="label">{{ item.label }}</div>
          <div class="up-box">
            <van-field
              class="field"
              :border="false"
              :required="false"
              v-model="ruleForm[item.name]"
              v-if="item.isShow ? item.isShow(ruleForm) : true"
            >
              <template #input>
                <upload class="input-item" v-model="ruleForm[item.name]" v-bind="item" :max-count="1" />
              </template>
            </van-field>
            <img class="img" :src="item.examples" @click="onChange(item.examples)" alt="">
          </div>
        </template>
      </div>
    </template>
    <slot></slot>
    <van-image-preview v-model="show" :images="images">
      <!-- <template v-slot:index>第{{ index }}页</template> -->
    </van-image-preview>
  </van-form>
</template>

<script>
// import dayjs from 'dayjs'
import Upload from '@/components/attestationUpload'
// import areaList from '@/utils/area.js'
// import UploadVideo from '@/components/UploadVideo'
// import UpliadMultiple from '@/components/UpliadMultiple'

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 {
      show: false,
      index: 0,
      images: [],
      ruleForm: this.model,
      picker: {
        visible: false,
        fieldType: '',
        name: '',
        value: '',
        valueKey: 'value',
        labelKey: 'text',
        values: [],
        remote: null
      },
      minDate: new Date(),
      pickerActive: {}
    }
  },
  filters: {
    pickerValueText(value, field) {
      if (!value || !field.values) {
        return ''
      }
      const valueKey = field.valueKey || 'value'
      const labelKey = field.labelKey || 'text'
      const found = field.values.find(item => item[valueKey] === value)
      return found ? found[labelKey] : ''
    }
  },
  methods: {
    onChange(src) {
      this.images = [src]
      this.show = true
    },
    showPicker(field) {
      this.picker = Object.assign(
        {
          visible: true,
          fieldType: '',
          name: '',
          value: '',
          valueKey: 'value',
          labelKey: 'text',
          values: [],
          remote: null
        },
        field
      )
      this.picker.value = this.ruleForm[name]
      if (field.fieldType === 'select' && field.remote && !field.values) {
        this.getPickerOptions(field)
      }
    },
    // 选择确定
    onPickerConfirm(data) {
      this.ruleForm[this.picker.name] = data[this.picker.valueKey]
      this.picker.visible = false
      if (this.picker.remote && this.picker.remote.change) {
        this.pickerActive = data
      }
    },
    // 地区选择确定
    onAreaPickerConfirm(values) {
      this.ruleForm[this.picker.name] = values.map(item => item.name).join('-')
      this.picker.visible = false
    },
    submit() {
      return this.$refs.form.submit()
    },
    getPickerOptions(field) {
      const remote = field.remote
      if (!remote) {
        return
      }
      remote.method(this.pickerActive).then(response => {
        if (remote.callback) {
          response = remote.callback(response)
        }
        field.values = response
        this.$set(this.picker, 'values', response)
      })
    }
  }
}
</script>
<style lang="scss">
.up-box{
  display: flex;
  padding-top: 10px;
  margin-bottom: 10px;
  .field{
    width: 40%;
    padding: 0;
    height: 100%;
  }
  .img{
    width: 40%;
    margin-left: 20px;
  }
}
</style>
