<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;
}
::v-deep .q-field--auto-height .q-field__control {
  min-height: 40px;
}
::v-deep .q-field__marginal {
  height: 40px;
}
::v-deep .q-field--auto-height .q-field__native {
  min-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"
        >(以下信息仅用于帮助你在支付时自动填写你的个人资料，你的信息将会安全地被印象保存且不会公开)</span
      >
    </div>
    <div>
      <form @submit.prevent.stop="submit" class="q-gutter-md">
      <div>
        <div class="row">
          <div class="col">
            <div class="title">姓</div>
            <q-input
              class="form-item"
              v-model="form.Surname"
              outlined
              placeholder="姓"
              ref="Surname"
              :rules="[(val) => !!val || '请输入姓氏']"
            ></q-input>
          </div>
          <div class="col">
            <div class="title">名</div>
            <q-input
              ref="Name"
              class="form-item"
              placeholder="名"
              v-model="form.Name"
              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.EnName"
              outlined
              placeholder="姓氏（需與旅遊證件一致）"
              ref="EnName"
              :rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
            ></q-input>
          </div>
          <div class="col">
            <div class="title">名字（需與旅遊證件一致）</div>
            <q-input
              ref="EnSurname"
              class="form-item"
              placeholder="名字（需與旅遊證件一致）"
              v-model="form.EnSurname"
              outlined
              :rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
            ></q-input>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="title">居住國家/地區</div>
            <q-select
                emit-value
                map-options
              ref="Country"
              square
              outlined
              option-value="ID"
              option-label="Name"
              class="form-item"
              v-model="form.Country"
              :options="countList"
              placeholder="请选择居住國家/地區"
              :rules="[(val) => Boolean(val) || '请选择居住國家/地區']"
            />
          </div>
          <div class="col">
            <div class="title">稱謂</div>
            <q-select
                emit-value
                map-options
              ref="Appellation"
              square
              outlined
              class="form-item"
              option-value="ID"
              option-label="Name"
              v-model="form.Appellation"
              :options="AppellationList"
              placeholder="请选择稱謂"
              :rules="[(val) => Boolean(val) || '请选择稱謂']"
            />
          </div>
        </div>

        <div class="row">
          <div class="col">
            <div class="title">國家/地區代碼</div>
            <q-select
                emit-value
                map-options
              ref="PhoneCountry"
              square
              outlined
              option-value="ID"
              option-label="PhoneCode"
              class="form-item"
              v-model="form.PhoneCountry"
              :options="phoneCountList"
              placeholder="请选择國家/地區代碼"
              :rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
            />
          </div>
          <div class="col">
            <div class="title">電話（首次需驗證）</div>
            <q-input
              ref="Moblie"
              class="form-item"
              placeholder="電話（首次需驗證）"
              v-model="form.Moblie"
              outlined
              :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
            ></q-input>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="title">出生日期</div>
            <q-input
              ref="BirthDate"
              class="form-item"
              placeholder="出生日期"
              v-model="form.BirthDate"
              outlined
              mask="date"
              :rules="[(val) => !!val || '请选择出生日期']"
            >
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qS1DateProxy">
                    <q-date
                      mask="YYYY-MM-DD"
                      :title="$t('search_date_begin')"
                      subtitle="選擇"
                      v-model="form.BirthDate"
                      @input="() => $refs.qS1DateProxy.hide()"
                    />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <div class="col">
            <div class="title">電子郵件（接收订单确认邮件）</div>
            <q-input
              ref="Mailbox"
              class="form-item"
              placeholder="電子郵件（接收订单确认邮件）"
              v-model="form.Mailbox"
              outlined
              :rules="[(val) => !!val || '请输入電子郵件（接收订单确认邮件）']"
            ></q-input>
          </div>
        </div>
        <div>
          <q-btn color="primary" type="submit" unelevated label="保存" />
        </div>
      </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        Surname: "",
        Name: "",
        BirthDate: "",
        Appellation: "",
        EnName: "",
        EnSurname: "",
        Country: "",
        Moblie: "",
      },
      model: "",
      date: "",
      phoneCountList: [],
      countList: [],
      AppellationList: [],
    };
  },
  mounted() {
    this.userInfo = JSON.parse(window.localStorage.getItem("b2bUser"));
    console.log("getUserInfo", this.userInfo);
    this.getUserInfo();
    this.getCountryInfo();
    this.GetAppellationEnum();
  },
  methods: {
    getCountryInfo() {
      this.apipost(
        "GetCountryInfo_post",
        {},
        (res) => {
          if (res.data.resultCode == 1) {
            const { phoneCountList, countList } = res.data.data;
            this.countList = countList;
            this.phoneCountList = phoneCountList;
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    GetAppellationEnum() {
      this.apipost(
        "GetAppellationEnum_post",
        {},
        (res) => {
          if (res.data.resultCode == 1) {
            this.AppellationList = res.data.data;
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    getUserInfo() {
      this.apipost(
        "GetCustomerInfo_post",
        {
          Id: this.userInfo?.id,
        },
        (res) => {
          if (res.data.resultCode == 1) {
            this.form = res.data.data;
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    submitUserInfo() {
      let params = {...this.form}
      // params.Appellation = params.Appellation.ID
      // params.Country = params.Country.ID
      // params.PhoneCountry = params.PhoneCountry.ID
      this.apipost(
        "UpdateUserInfo_post",
        params,
        (res) => {
          if (res.data.resultCode == 1) {
            this.$q.notify({
              type: "positive",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      ) ;
    },
    submit() {
      this.formHasError = false;
      const verifyArr = ["Surname", "Name", "BirthDate", "Appellation", "EnName", "EnSurname", "Country", "Moblie"];
      verifyArr.forEach((item) => {
        console.log('this.$refs[item]', this, item, this.$refs[item])
        this.$refs[item].validate();
      });
      verifyArr.forEach((item) => {
          console.log('item', item)
        if (this.$refs[item].hasError) {
          console.log('item', item)
          this.formHasError = true;
        }
      });
      console.log('this.formHasError', this.formHasError, this.form)
      if (this.formHasError) {
        return;
      }
      this.submitUserInfo();
    },
  },
};
</script>