<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  margin: 10px;
}
.content {
  max-width: 940px;
}
.tips {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 10px 35px;
  line-height: 22px;
}
::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;
  margin-left: 10px;
}
</style>
<template>
  <div
    class="bg-white"
    :class="$q.platform.is.desktop ? 'content q-ma-lg' : 'full-width'"
  >
    <div class="q-ma-lg">
      <div class="tips q-mb-lg">
        個人信息<span class="text-grey-6"
          >(以下信息仅用于帮助你在支付时自动填写你的个人资料，你的信息将会安全地被印象保存且不会公开)</span
        >
      </div>
      <div>
        <form @submit.prevent.stop="submit" class="q-gutter-md">
          <div>
            <div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
              <div class="col">
                <div class="title">姓</div>
                <q-input
                  class="form-item"
                  v-model="form.Surname"
                  outlined
                  ref="Surname"
                  :rules="[(val) => !!val || '请输入姓氏']"
                ></q-input>
              </div>
              <div class="col">
                <div class="title">名</div>
                <q-input
                  ref="Name"
                  class="form-item"
                  v-model="form.Name"
                  outlined
                  :rules="[(val) => !!val || '请输入名字']"
                ></q-input>
              </div>
            </div>
            <div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
              <div class="col">
                <div class="title">姓氏（需與旅遊證件一致）</div>
                <q-input
                  class="form-item"
                  v-model="form.EnName"
                  outlined
                  ref="EnName"
                  :rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
                ></q-input>
              </div>
              <div class="col">
                <div class="title">名字（需與旅遊證件一致）</div>
                <q-input
                  ref="EnSurname"
                  class="form-item"
                  v-model="form.EnSurname"
                  outlined
                  :rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
                ></q-input>
              </div>
            </div>
            <div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
              <div class="col">
                <div class="title">居住國家/地區</div>
                <q-select
                  @input="changeCountry"
                  emit-value
                  map-options
                  ref="Country"
                  square
                  outlined
                  option-value="ID"
                  option-label="Name"
                  class="form-item"
                  v-model="form.Country"
                  :options="countList"
                  :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"
                  :rules="[(val) => Boolean(val) || '请选择稱謂']"
                />
              </div>
            </div>

            <div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
              <!-- <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"
              :rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
            />
          </div> -->
              <div class="col">
                <div class="title">電話（首次需驗證）</div>
                <q-input
                  ref="Moblie"
                  class="form-item"
                  v-model="form.Moblie"
                  outlined
                  :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
                >
                  <template v-slot:prepend>
                    <div class="text-subtitle2">
                      {{ form.PhoneCountryStr }}
                    </div>
                  </template></q-input
                >
              </div>
              <div class="col">
                <div class="title">出生日期</div>
                <q-input
                  ref="BirthDate"
                  class="form-item"
                  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>
            <div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
              <div class="col">
                <div class="title">電子郵件（接收订单确认邮件）</div>
                <q-input
                  ref="Mailbox"
                  class="form-item"
                  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>
  </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"));
    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;
            this.phoneCountList.forEach((x) => {
              let temp = this.countList.find((y) => y.ID == x.ID);
              x.EnName = `${temp.EnName}(${x.PhoneCode})`;
            });
            if (this.form.Country) {
              this.changeCountry(this.form.Country);
            }
          } else {
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    changeCountry(id) {
      this.form.PhoneCountry = this.phoneCountList.find(
        (x) => x.ID == id
      ).PhoneCode;
      this.form.PhoneCountryStr = "+" + this.form.PhoneCountry;
    },
    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;
            if (this.phoneCountList.length) {
              this.changeCountry(this.form.Country);
            }
          } 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) => {
        this.$refs[item].validate();
      });
      verifyArr.forEach((item) => {
        if (this.$refs[item].hasError) {
          this.formHasError = true;
        }
      });
      if (this.formHasError) {
        return;
      }
      this.submitUserInfo();
    },
  },
};
</script>