<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  margin: 10px;
}
.form-group {
  width: 320px;
}
.form-group {
  position: relative;
  margin-bottom: 15px;
}
.form-group i {
  position: absolute;
  right: 12px;
  top: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #999;
  font-size: 28px;
  cursor: pointer;
}
.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 bg-white" :class="{'q-ma-lg': $q.platform.is.desktop}">
    <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>
          <form @submit.prevent.stop="submit">
            <div class="form-group">
              <q-input
                class="form-item"
                v-model="form.OldPassword"
                outlined
                placeholder="旧密码"
                ref="OldPassword"
                :type="isPasswordOld === 2 ? 'PassWord' : 'text'"
                :rules="[(val) => val !== '' || '请输入旧密码']"
              ></q-input
              ><i
                class="iconfont iconyanjing_xianshi"
                v-if="isPasswordOld == 1"
                @click="isPasswordOld = 2"
              ></i>
              <i
                class="iconfont iconbiyan"
                v-if="isPasswordOld == 2"
                @click="isPasswordOld = 1"
              ></i>
            </div>
            <div class="form-group">
              <q-input
                class="form-item"
                v-model="form.NewPassword"
                outlined
                placeholder="新密码"
                ref="NewPassword"
                :type="isPassword === 2 ? 'PassWord' : 'text'"
                :rules="[(val) => val !== '' || '请输入新密码']"
              ></q-input
              ><i
                class="iconfont iconyanjing_xianshi"
                v-if="isPassword == 1"
                @click="isPassword = 2"
              ></i>
              <i
                class="iconfont iconbiyan"
                v-if="isPassword == 2"
                @click="isPassword = 1"
              ></i>
            </div>
            <div>
              <q-btn color="primary" type="submit" unelevated label="确认" />
            </div>
          </form>
        </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>
          <checkboxGroupVue
            :checkboxList="emailType"
            v-model="setInfoForm.DiscountsNoticeWay"
          ></checkboxGroupVue>
        </div>
        <div>
          <div>消息提醒</div>
          <div class="text-grey-6">
            获取购物车内活动及支付状态、评价提醒、推荐好友获取优惠等信息
          </div>
          <checkboxGroupVue
            :checkboxList="emailType"
            v-model="setInfoForm.MessageNoticeWay"
          ></checkboxGroupVue>
        </div>
        <div>
          <div>賬戶通知</div>
          <div class="text-grey-6">
            接收重要通知，如订单摘要、凭证及活动取消
          </div>
          <checkboxGroupVue
            :checkboxList="emailType"
            v-model="setInfoForm.AccountNoticeWay"
          ></checkboxGroupVue>
        </div>
        <div>
          <q-btn
            color="primary"
            unelevated
            label="更改偏好設置"
            @click="changeNoticeType"
          />
        </div>
        <div class="tips q-mt-lg">註銷賬戶</div>
        <q-btn color="primary" class="q-mt-sm" @click="removeAccount">删除您的帐户及个人数据</q-btn>
      </div>
    </div>
    <q-dialog content-style="width: 900px" v-model="showRemove">
      <removeAccount></removeAccount>
    </q-dialog>
  </div>
</template>
<script>
import checkboxGroupVue from "./components/checkboxGroup.vue";
import removeAccount from './components/removeAccount.vue'
export default {
  components: { checkboxGroupVue, removeAccount },
  data() {
    return {
      isPasswordOld: 2,
      isPassword: 2,
      emailType: [
        { label: "电子邮件", value: 1 },
        { label: "短信", value: 2 },
      ],
      setInfoForm: {
        DiscountsNoticeWay: 1,
        MessageNoticeWay: 1,
        AccountNoticeWay: 1,
      },
      form: {
        OldPassword: "",
        NewPassword: "",
      },
      model: "",
      date: "",
      options: [],
      showRemove: false,
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    removeAccount() {
      this.showRemove = true
    },
    getUserInfo() {
      this.apipost(
        "GetCustomerInfo_post",
        {
          Id: this.userInfo?.id,
        },
        (res) => {
          if (res.data.resultCode == 1) {
            const { DiscountsNoticeWay, MessageNoticeWay, AccountNoticeWay } =
              res.data.data;
            this.setInfoForm = {
              DiscountsNoticeWay,
              MessageNoticeWay,
              AccountNoticeWay,
            };
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    changeNoticeType() {
      let arr = ["DiscountsNoticeWay", "MessageNoticeWay", "AccountNoticeWay"];
      let notify = {
        DiscountsNoticeWay: "请选择優惠及更新信息偏好",
        MessageNoticeWay: "请选择消息提醒偏好",
        AccountNoticeWay: "请选择賬戶通知偏好",
      };
      let item = "";
      for (let i = 0; i < arr.length; i++) {
        item = arr[i];
        if (!this.setInfoForm[item]) {
          // this.$notify(res.data.message);
          this.$q.notify({
            type: "negative",
            message: notify[item],
            position: "top",
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          });
          return;
        }
      }
      this.submitChangeNotice();
    },
    submitChangeNotice() {
      this.apipost(
        "b2c_post_SetCustomerNotice",
        this.setInfoForm,
        (res) => {
          if (res.data.resultCode == 1) {
            // this.$notify(res.data.message);
            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
      );
    },
    resetPassword() {
      console.log("resetPassword");
      this.apipost(
        "b2c_post_UpdateCustomerPassWord",
        this.form,
        (res) => {
          if (res.data.resultCode == 1) {
            // this.$notify(res.data.message);
            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 = ["OldPassword", "NewPassword"];
      console.log("submit");
      verifyArr.forEach((item) => {
        console.log("submit", this.$refs[item]);
        this.$refs[item].validate();
      });
      verifyArr.forEach((item) => {
        if (this.$refs[item].hasError) {
          this.formHasError = true;
        }
      });
      console.log("this.formHasError", this.formHasError);
      if (this.formHasError) {
        return;
      }
      this.resetPassword();
    },
  },
};
</script>