<template>
  <div>
    <q-btn
      flat
      dense
      icon="person"
      color="black"
      :label="$root.LoginSetup.user_name"
      no-caps
      @click="onClick()"
    ></q-btn>
    <!-- quasar modal -->
    <q-modal
      no-esc-dismiss
      no-backdrop-dismiss
      v-model="isModalOpen"
    >
      <q-card>
        <q-card-title align="center" style="background:rgb(51, 64, 72);color:#fff">
          <div
            class="text-h6 "
            v-text="$t('layout.change_password.title')"
          ></div>
        </q-card-title>
        <q-card-main>
          <q-input
            v-model="$root.LoginSetup.uid"
            :stack-label="$t('layout.change_password.label.user_id')"
            readonly
          ></q-input>
          <q-input
            v-model="$root.LoginSetup.user_name"
            :stack-label="$t('layout.change_password.label.user_name')"
            readonly
          ></q-input>
          <q-input
            v-model="oldPassword"
            type="password"
            :stack-label="$t('layout.change_password.label.old_pwd')"
          ></q-input>
          <q-input
            v-model="newPassword1"
            type="password"
            :stack-label="$t('layout.change_password.label.new_pwd1')"
          ></q-input>
          <q-input
            v-model="newPassword2"
            type="password"
            :stack-label="$t('layout.change_password.label.new_pwd2')"
          ></q-input>
        </q-card-main>
        <q-card-actions align="center">
          <q-btn
            color="primary"
            :label="$t('sys.save')"
            @click="submit()"
            style="width:80px;"
          ></q-btn>
          <q-btn
            color="secondary"
            :label="$t('sys.close')"
            @click="cancel()"
            style="width:80px;"
          ></q-btn>
        </q-card-actions>
      </q-card>
    </q-modal>
  </div>

</template>

<script>
module.exports = {
  data () {
    return {
      "isModalOpen": false,
      "oldPassword": "",
      "newPassword1": "",
      "newPassword2": "",
    }
  },
  props: [],
  computed: {
  },
  mounted () {
  },
  methods: {
    onClick () {
      this.oldPassword = "";
      this.newPassword1 = "";
      this.newPassword2 = "";
      this.isModalOpen = true;
    },
    submit () {
      // 檢查新密碼是否為空白
      if (this.newPassword1 === "") {
        this.$root.FnNotify(this.$t('layout.change_password.msg.new_pwd_empty'), "warning");
        return;
      }
      // 檢查新密碼是否相同
      if (this.newPassword1 !== this.newPassword2) {
        this.$root.FnNotify(this.$t('layout.change_password.msg.new_pwd_not_same'), "warning");
        return;
      }
      var params = {
        Action: 'Password',
        menu_page: "sys_component",
        Datas: {
          "old_pwd": this.oldPassword,
          "new_pwd": this.newPassword1,
        },
      };
      this.$root.FnWebAPIPost(params).then((res) => {
        if (res.data.result) {
          this.$root.FnNotify(this.$t('layout.change_password.msg.change_pwd_success'), "info");
          this.isModalOpen = false;
        } else {
          this.$root.FnNotify(this.$t('layout.change_password.msg.' + res.data.message), "warning");
        }
      });
    },
    cancel () {
      this.isModalOpen = false;
    }
  }
}
</script>

<style scoped>

</style>