<template>
  <el-form
    :model="formConfig.ruleForm"
    :rules="rules(formConfig.rules)"
    ref="ruleForm"
    class="zd-form"
    :validate-on-rule-change="false"
    :label-position="formConfig.ruleFormlabel"
    :label-width="formConfig.labelWidth"
    :inline-message="true"
    :size="formConfig.size"
    key="ruleForm"
  >
    <div class="form-body">
      <el-form-item
        v-for="(filter, index) in formConfig.filters"
        :key="filter.querykey"
        :label="filter.label"
        :prop="filter.querykey"
      >
        <component
          :is="filter.type"
          :querykey="filter.querykey"
          :key="index"
          :size="filter.size"
          :ruleForm="formConfig.ruleForm"
          :isSendDisable="isSendDisable"
          :width="filter.width"
          :placeholder="filter.placeholder"
          :defaultValue="setValue(filter)"
          @input="(value, key, keys) => filterChange(filter, value, key, keys)"
        />
      </el-form-item>
      <el-form-item>
        <slot name="submit"></slot>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import PageInput from '@/components/input.vue'
import PagePasInput from '@/components/pasInput.vue'
import PageSendCode from '@/components/sendCode.vue'
export default {
  props: {
    formConfig: {
      type: Object
    },
    defaultValue: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    this.checkAccount = (rule, value, callback) => {
      /* 手机格式 */
      if (/^1[3-9]\d{9}$/.test(value)) {
        this.isSendDisable = false
        callback()
      } else {
        this.isSendDisable = true
        callback(new Error('请输入正确格式的手机号'))
      }
    }
    return {
      isSendDisable: true
    }
  },
  components: {
    PagePasInput,
    PageInput,
    PageSendCode
  },
  methods: {
    rules(rules) {
      const rule = JSON.parse(JSON.stringify(rules))
      if (rules.account) {
        rule.account.push({ validator: this.checkAccount, trigger: 'change' })
      }
      return rule
    },
    filterChange(filter, value, key, keys = null) {
      const newValue = value
      this.formConfig.ruleForm[key] = newValue
      this.$emit('on-action', this.formConfig.ruleForm)
    },
    typeValue() {
      this.formConfig.ruleForm = Object.assign({}, this.defaultValue)
    },
    setValue(filter) {
      if (!this.defaultValue) return
      const filterData = {
        startKey: this.defaultValue[filter.startKey],
        endKey: this.defaultValue[filter.endKey],
        querykey: this.defaultValue[filter.querykey]
      }
      this.formConfig.ruleForm[filter.querykey] = filterData.querykey
      return this.formConfig.ruleForm[filter.querykey]
    },
    submit() {
      return new Promise(resolve => {
        this.$refs.ruleForm.validate(valid => {
          resolve(valid)
        })
      })
    },
    clear() {
      this.$refs.ruleForm.clearValidate()
    }
  },
  mounted() {
    this.typeValue()
  }
}
</script>

<style lang="scss" scoped>
.form-body {
  padding: 0px 20px;
}
</style>
