<template>
  <div class="comp-basic-info">
    <el-form ref="formRef" :model="form" :rules="formRules" size="small" label-position="top">
      <el-row v-if="type === 'person' && showVin" :gutter="40">
        <el-col :span="12">
          <el-form-item label="车辆VIN码" prop="vin">
            <el-input v-model="form.vin" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" clearable maxlength="50"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别" clearable>
              <el-option key="1" label="男" value="1"/>
              <el-option key="2" label="女" value="2"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CompBasicInfo',
  props: {
    type: {
      type: String,
      default: 'person' // person: 自然人, enterprise: 企业
    },
    data: {
      type: Object,
      default: () => ({})
    },
    showVin: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      form: {
        vin: '',
        name: '',
        sex: ''
      },
      formRules: {
        name: [
          { required: true, message: `请输入姓名`, trigger: 'blur' }
        ],
        sex: [
          { required: true, message: `请选择性别`, trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    data: {
      handler() {
        this.updateInternalData()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.updateInternalData()
    },
    updateInternalData() {
      if (typeof this.data === 'object' && this.data !== null) {
        this.form.vin = this.data.vin || ''
        this.form.name = this.data.name || ''
        this.form.sex = this.data.sex || '1'
        if (this.data.sex && this.data.name) {
          this.validate()
        }
      } else {
        this.form.vin = ''
        this.form.name = ''
        this.form.sex = '1'
      }
    },

    // 校验
    async validate(isErrorAnchor = false) {
      try {
        await this.$refs.formRef.validate()
        return true
      } catch (e) {
        if (isErrorAnchor) {
          this.$refs.formRef.fields.filter(item => item.validateState === 'error')[0].$el.scrollIntoView(true)
        }
        let temp = {
          anchor: () => {
            this.$refs.formRef.fields.filter(item => item.validateState === 'error')[0].$el.scrollIntoView(true)
            temp = null
          }
        }
        throw temp
      }
    },
    // 获取数据
    getFormData() {
      return {
        vin: this.form.vin,
        name: this.form.name,
        sex: this.form.sex
      }
    },
    // 获取待缓存数据
    getPendingCacheData() {
      return this.getFormData()
    },

    /**
     * 清空校验结果
     */
    clearValidate() {
      this.$refs.formRef.clearValidate()
    }
  }
}
</script>
