<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">
            <!-- <div class="btn-go" v-if="item.name == 'apply'" @click="goEditForm">更改个人资料</div> -->
            <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 class="back-edit" v-if="item.name == 'apply'" @click="goEditForm">
              <div class="icon"></div>
              <div class="txt">返回修改</div>
            </div>
          </div>
        </template>
      </div>
    </template>
    <slot></slot>
    <van-image-preview v-model="show" :images="images">
    </van-image-preview>
  </van-form>
</template>

<script>
import { Dialog } from 'vant'
// 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: {
    goEditForm() {
      Dialog.confirm({
        message: '更改个人资料后，需重新打印个人信息页并签名后上传。'
      }).then(() => {
        this.$router.push({
          path: '/attestation/form',
          query: this.$route.query
        })
      })
    },
    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{
  position: relative;
  display: flex;
  padding-top: 10px;
  margin-bottom: 10px;
  height: 90px;
  .btn-go{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 40%;
    height: 27px;
    color: #fff;
    text-align: center;
    line-height: 27px;
    text-align: center;
    background: linear-gradient(100deg, rgba(0, 0, 0, .1) 0%, #000000 200%);
  }
  .field{
    width: 40%;
    padding: 0;
    height: 100%;
  }
  .img{
    width: 40%;
    display: block;
    height: 100%;
    margin-left: 20px;
  }
}
.back-edit{
  width: 50px;
  -webkit-transform: translateX(10px);
  .icon{
    margin: 20px auto 0 auto;
    width: 13px;
    height: 15px;
    background: url(https://zws-imgs-pub.ezijing.com/static/public/940a2bd840eb4dc85cb8d1ddab1ddcbe.png);
    background-size: 100% 100%;
  }
  .txt{
    font-size: 10px;
    font-weight: bold;
    color: #AF1B40;
    line-height: 10px;
    margin-top: 12px;
    text-align: center;
  }
}
</style>
