<template>
  <div class="form-base">
    <hive-form
      size="default"
      ref="form"
      type="default"
      :error-location="true"
      :model="model"
      :rules="rules">

      <hive-form-item
        label="姓名"
        labelWidth="56px"
        prop="name">
        <hive-input v-model="model.name">
        </hive-input>
      </hive-form-item>

      <hive-form-item
        label="其他描述"
        labelWidth="56px"
        prop="desc">
        <hive-input v-model="model.desc"
          type="textarea">
        </hive-input>
      </hive-form-item>

      <hive-form-item
        label="性别"
        labelWidth="56px"
        prop="gender"
        style="position:relative">
        <hive-select
          v-model="model.gender"
          placeholder="请选择">
          <hive-select-option value="0">男</hive-select-option>
          <hive-select-option value="1">女</hive-select-option>
        </hive-select>
      </hive-form-item>

      <hive-form-item laebl=""
        labelWidth="56px">
        <hive-button
          type="primary"
          @click="onSubmitClick">提交
        </hive-button>
        <hive-button
          @click="onSubmitClick">取消
        </hive-button>
      </hive-form-item>

    </hive-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        model: {
          name: '',
          desc: '',
          gender: '',
        },
        rules: {
          name: [
            { required: true, message: '姓名不能为空' },
            {
              validator(rule, value, callback) {
                const errors = [];
                if (value.length < 6) {
                  errors.push('不能小于6个字符');
                }
                callback(errors);
              },
            },
          ],
          desc: [
            { required: true, message: '请输入个人简介' },
            { type: 'string', min: 20, message: '简介不能少于20个字符' },
          ],
          gender: [
            { required: true, message: '性别不能为空' },
          ],
        },
      };
    },
    methods: {
      onSubmitClick() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            console.log('校验通过');
          } else {
            console.log('校验失败');
          }
        });
      },
    },
  };
</script>
