<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  height: 40px;
  margin: 10px;
}
.content {
  max-width: 940px;
}
.tips {
  height: 42px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0 35px;
  line-height: 42px;
}
::v-deep .q-field__control {
  height: 40px;
}
.title {
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>
<template>
  <div class="content q-ma-lg bg-white q-pa-lg">
    <div class="tips">
      出行人<span class="text-grey-6"
        >共計 3人，最多新增20人(含本人)</span
      >
    </div>
    <div>
      <div>
        <div class="row">
          <div class="col">
            <div class="title">姓</div>
            <q-input
              class="form-item"
              v-model="form.firstName"
              outlined
              placeholder="姓"
              ref="firstName"
              :rules="[(val) => val !== '' || '请输入姓氏']"
            ></q-input>
          </div>
          <div class="col">
            <div class="title">名</div>
            <q-input
              ref="lastName"
              class="form-item"
              placeholder="名"
              v-model="form.lastName"
              outlined
              :rules="[(val) => val !== '' || '请输入名字']"
            ></q-input>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="title">姓氏（需與旅遊證件一致）</div>
            <q-input
              class="form-item"
              v-model="form.firstName"
              outlined
              placeholder="姓氏（需與旅遊證件一致）"
              ref="firstName"
              :rules="[(val) => val !== '' || '请输入姓氏']"
            ></q-input>
          </div>
          <div class="col">
            <div class="title">名字（需與旅遊證件一致）</div>
            <q-input
              ref="lastName"
              class="form-item"
              placeholder="名字（需與旅遊證件一致）"
              v-model="form.lastName"
              outlined
              :rules="[(val) => val !== '' || '请输入名字']"
            ></q-input>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="title">居住國家/地區</div>
            <q-select filled v-model="model" :options="options" label="Filled" />
          </div>
          <div class="col">
            <div class="title">稱謂</div>
            <q-select filled v-model="model" :options="options" label="Filled" />
          </div>
        </div>
        
        <div class="row">
          <div class="col">
            <div class="title">國家/地區代碼</div>
            <q-select filled v-model="model" :options="options" label="Filled" />
          </div>
          <div class="col">
            <div class="title">電話（首次需驗證）</div>
            <q-input
              ref="lastName"
              class="form-item"
              placeholder="名字（需與旅遊證件一致）"
              v-model="form.lastName"
              outlined
              :rules="[(val) => val !== '' || '请输入名字']"
            ></q-input>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="title">出生日期</div><q-date
        v-model="date"
        minimal
      />
          </div>
          <div class="col">
            <div class="title">電子郵件（接收订单确认邮件）</div>
            <q-input
              ref="lastName"
              class="form-item"
              placeholder="名字（需與旅遊證件一致）"
              v-model="form.lastName"
              outlined
              :rules="[(val) => val !== '' || '请输入名字']"
            ></q-input>
          </div>
        </div>
        <div>
          <q-btn color="primary" unelevated label="保存" @click="submit" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        lastName: "",
        firstName: "",
      },
      model: '',
      date: '',
      options: []
    };
  },
  methods: {
    submit() {
      const verifyArr = ['fastName', 'lastName'];
      verifyArr.forEach((item) => {
        this.$refs[item].validate();
      });
      verifyArr.forEach((item) => {
        if (item.$refs[item].hasError) {
          this.formHasError = true;
        }
      });
      if ((this.formHasError = true)) {
        return;
      }
    },
  },
};
</script>