<template>
    <div class="ht-base-form-linkage-demo">
        <ht-base-form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
            <ht-base-form-item label="注意：" prop="notice">
                <ht-base-input v-model="formCustom.notice" placeholder="注意"></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="性别：" prop="gender">
                <ht-base-select v-model="formCustom.gender" @on-change="onChange">
                    <Option value="man">男性</Option>
                    <Option value="woman">女性</Option>
                </ht-base-select>
            </ht-base-form-item>
            <ht-base-form-item>
                <ht-base-button type="primary" @click="handleSubmit('formCustom')">确定</ht-base-button>
                <ht-base-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</ht-base-button>
            </ht-base-form-item>
        </ht-base-form>
    </div>
</template>

<script>
  export default {
      name: 'HtBaseFormLinkageDemo',
      data(){
        return {
            formCustom: {
                notice: '',
                gender: ''
            },
            ruleCustom: {
                notice: [
                    { required: true, message: '注意不能为空', trigger: 'change' }
                ],
                gender: [
                    { required: true, message: '性别不能为空', trigger: 'change' }
                ]
            }
        }
      },
      methods:{
          onChange(data){
              if(data==='man'){
                  this.formCustom.notice='Hi, man!';
              }else{
                  this.formCustom.notice='Hi, lady!';
              }
          },
          handleSubmit (name) {
              this.$refs[name].validate((valid) => {
                  if (valid) {
                      this.$HtBaseMessage.success('Success!');
                  } else {
                      this.$HtBaseMessage.error('Fail!');
                  }
              })
          },
          handleReset (name) {
              this.$refs[name].resetFields();
          }
      }
  }
</script>
<style lang="less">
    .ht-base-form-linkage-demo {
        width:500px;
        margin: 0 auto;
    }
</style>

