<div id="app">
  <div class="p-5">
    <h3>範例：載入 VeeValidate 驗證套件</h3>
    <v-form @submit="onSubmit" v-slot="{errors}">
      {{errors}}
      <div class="mb-3">
        <label for="email" class="form-label">Email</label>
        <v-field id="email" name="email" type="email" class="form-control"
                 :class="{ 'is-invalid': errors['email'] }"
                 rules="email|required"
                 placeholder="請輸入 Email">
        </v-field>
        <error-message name="email" class="invalid-feedback"></error-message>
      </div>

      <div class="mb-3">
        <label for="name" class="form-label">姓名</label>
        <v-field id="name" name="姓名" type="text" class="form-control"
                 placeholder="請輸入姓名"></v-field>
        <span class="invalid-feedback"></span>
      </div>

      <div class="mb-3">
        <label for="phone" class="form-label">電話</label>
        <v-field id="phone" name="電話" type="text" class="form-control"
                 :rules="isPhone"
                 :class="{ 'is-invalid': errors['電話'] }"
                 placeholder="請輸入電話"
                 v-model="user.phone"
                 >
        </v-field>
        <error-message class="invalid-feedback" name="電話"></error-message>
      </div>

      <div class="mb-3">
        <label for="region" class="form-label">地區</label>
        <select id="region" name="地區" class="form-control">
          <option value="">請選擇地區</option>
          <option value="台北市">台北市</option>
          <option value="高雄市">高雄市</option>
        </select>
        <span class="invalid-feedback"></span>
      </div>

      <div class="mb-3">
        <label for="address" class="form-label">地址</label>
        <input id="address" name="地址" type="text" class="form-control"
               placeholder="請輸入地址">
        <span class="invalid-feedback"></span>
      </div>

      <button class="btn btn-primary" type="submit">Submit</button>
    </v-form>
  </div>
</div>

VeeValidate.defineRule('email', VeeValidateRules['email']);
VeeValidate.defineRule('required', VeeValidateRules['required']);
// 此範例因為在codepen上，所以無法指定本地語系設定
VeeValidateI18n.loadLocaleFromURL('./zh_TW.json');
VeeValidate.configure({
  generateMessage: VeeValidateI18n.localize('zh_TW'),
  validateOnInput: true, // 調整為：輸入文字時，就立即進行驗證
});

const app = Vue.createApp({
  data() {
    return {
      user: {
        email: '',
        name: '',
        address: '',
        phone: ''
      }
    }
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
    isPhone(value) {
      const phoneNumber = /^(09)[0-9]{8}$/
      return phoneNumber.test(value) ? true : '需要正確的電話號碼'
    }
  },
  created() {
    console.log(this);
  }
});

app.component('VForm', VeeValidate.Form);
app.component('VField', VeeValidate.Field);
app.component('ErrorMessage', VeeValidate.ErrorMessage);


app.mount('#app');