<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  margin: 10px;
}
.content {
  width: 900px;
}
.tips {
  width: 100%;
  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">
    <div class="q-ma-lg">
      <div class="tips">密碼管理</div>
      <div>
        <div>
          <div class="q-mt-lg q-mb-sm">
            设置密码（8 - 20个字符，须至少包含1个数字、1个字母及1个特殊符号）
          </div>
          <div class="text-grey-6">高强度密码能提高账号安全性</div>
          <q-input
            class="form-item"
            v-model="form.firstName"
            outlined
            placeholder="姓"
            ref="firstName"
            :rules="[(val) => val !== '' || '请输入姓氏']"
          ></q-input>
          <q-input
            class="form-item"
            v-model="form.firstName"
            outlined
            placeholder="姓"
            ref="firstName"
            :rules="[(val) => val !== '' || '请输入姓氏']"
          ></q-input>
          <div>
            <q-btn color="primary" unelevated label="确认" @click="submit" />
          </div>
        </div>
      </div>
    </div>

    <div class="q-ma-lg">
      <div class="tips">通知偏好設置</div>
      <div>
        <div>
          <div class="q-mt-lg q-mb-sm">優惠及更新信息</div>
          <div class="text-grey-6">
            抢先获取和平最新优惠活动、优惠码、折扣信息及最新动向
          </div>
          <q-checkbox>电子邮件</q-checkbox>
          <q-checkbox>短信</q-checkbox>
        </div>
        <div>
          <div>消息提醒</div>
          <div class="text-grey-6">
            获取购物车内活动及支付状态、评价提醒、推荐好友获取优惠等信息
          </div>
          <q-checkbox>电子邮件</q-checkbox>
          <q-checkbox>短信</q-checkbox>
        </div>
        <div>
          <div>賬戶通知</div>
          <div class="text-grey-6">
            接收重要通知，如订单摘要、凭证及活动取消
          </div>
          <q-checkbox>电子邮件</q-checkbox>
          <q-checkbox>短信</q-checkbox>
        </div>
        <div>
          <q-btn
            color="primary"
            unelevated
            label="更改偏好設置"
            @click="submit"
          />
        </div>
      <div class="tips q-mt-lg">註銷賬戶</div>
      <div class="q-mt-sm">删除您的Klook客路帐户及个人数据</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>