<template>
  <div class="unlock" :class="settings.is_dark_mode ? 'dark-theme-unlock' : ''">
    <!-- <md-toolbar class="md-primary">
			<h3 class="md-title" style="flex: 1">{{ is_create ? lang.title[0] : lang.title[1] }}</h3>
    </md-toolbar>-->

    <icon class="logo" name="canary"></icon>

    <p class="md-title center">{{ is_create ? lang.subheader[0] : lang.subheader[1] }}</p>

    <md-field class="input-box" :class="messageClass">
      <label>{{ is_create ? lang.pwd_label[0] : lang.pwd_label[1] }}</label>
      <md-input v-model="pwd" type="password"></md-input>
      <span class="md-error">{{ err_msg }}</span>
    </md-field>

    <md-field class="input-box" :class="messageClass" v-if="is_create">
      <label>{{ lang.repeat_pwd }}</label>
      <md-input v-model="repeat" type="password"></md-input>
      <span class="md-error">{{ err_msg }}</span>
    </md-field>

    <md-field class="input-box" :class="drivceMessageClass" v-if="is_create">
      <label>{{ lang.drivce_label }}</label>
      <md-input v-model="drivce"></md-input>
      <span class="md-error">{{ drivce_err_msg }}</span>
    </md-field>

    <md-button class="md-raised md-primary center" @click="judgePwd()">{{ lang.enter }}</md-button>

    <p class="center tips ">
      Tips1: 主密码可以是中文，怕忘了甚至可以是自己的名字，别让别人知道就好
      <br/>
      <br/>
       Tips2: 使用安卓客户端的同学不要长按输入框粘贴，会闪退，推荐使用chrome或者firefox添加到桌面使用
    </p>

    <p class="center tips tips-buttom">
      此密码本为长理专版，未开启同步密码将加密后存放本地，开启同步密码将加密后存放在您的长理网盘中，请放心使用
      <span
        class="qq-link"
        @click="openQQ()"
      >点我加入用户群</span>
    </p>

    <md-dialog-confirm
      :md-active.sync="show_dialog"
      :md-title="lang.dialog.title"
      :md-content="lang.dialog.content"
      :md-confirm-text="lang.dialog.confirm"
      :md-cancel-text="lang.dialog.cancel"
      @md-cancel="onCancel"
      @md-confirm="submit"
    />

    <md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
      <span>{{ snakebar_msg }}</span>
    </md-snackbar>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState, mapActions } from "vuex";
import {
  encrypt,
  decrypt,
  encryptMainCode,
  decryptMainCode,
} from "@/utils/aes.js";
import { lang } from "@/utils/language.js";
import { replaceState } from "@/utils/getStore.js";

export default {
  name: "Unlock",
  data() {
    return {
      pwd: "",
      repeat: "",
      drivce: "",
      is_err: false,
      is_drivce_err: false,
      err_msg: "",
      drivce_err_msg: "",
      show_dialog: false,
      is_create: false,
      show_snackbar: false,
      snakebar_msg: "",
      lang: "",
    };
  },
  computed: {
    ...mapState(["row_data", "settings", "user_infos"]),
    messageClass() {
      return {
        "md-invalid": this.is_err,
      };
    },
    drivceMessageClass() {
      return {
        "md-invalid": this.is_drivce_err,
      };
    },
  },
  methods: {
    ...mapActions(["setRowPwd", "setSettings", "setUserInfo"]),

    // 初始化
    init() {
      // 刷新本页vuex
      replaceState.call(this);
      this.initLanguage();
      // 判断是创建密码还是输入密码
      this.is_create = !this.row_data && !this.user_infos.drivce;
    },

    // 配置语言
    initLanguage() {
      if (this.settings.is_chinese) {
        this.lang = lang().unlock.CHS;
      } else {
        this.lang = lang().unlock.EN;
      }
      console.log("语言配置完成");
    },

    // 点击提交判断密码
    judgePwd() {
      // 空密码拦截器
      if (this.pwd.trim().length == 0) {
        this.is_err = true;
        this.err_msg = this.lang.empty_pwd_error;
        console.log("密码为空拦截");
        return;
      }
      // 判断是否有密码本
      if (!this.is_create) {
        // 有密码本
        // 解密密码本
        let test_decode;
        try {
          test_decode = decrypt(this.pwd, this.row_data);
        } catch (e) {
          // 错误
          this.is_err = true;
          this.err_msg = this.lang.wrong_pwd_error;
          console.log("密码输入错误拦截");
          return;
        }
        // 正确,将密码加密放进locolstorage
        this.submit();
      } else {
        if (this.drivce.trim().length == 0) {
          this.is_drivce_err = true;
          this.drivce_err_msg = this.lang.drivce_error;
          console.log("设备名为空拦截");
          return;
        }
        // 空密码本，不论输入什么都是对的，但是需要比较两个输入的是不是一样的
        if (this.pwd == this.repeat) {
          // 两次一致，弹窗警告不可更改
          this.show_dialog = true;
        } else {
          // 两次不一致
          this.is_err = true;
          this.err_msg = this.lang.match_pwd_error;
          console.log("密码两次输入不一致拦截");
        }
      }
    },

    // 用户点击取消
    onCancel() {
      console.log("用户点击取消");
    },

    // 提交然后返回主页
    submit() {
      let main_code_aes = encryptMainCode(this.pwd);
      let row_pwd = {
        main_code: main_code_aes,
        create_time: new Date().getTime(),
      };
      let user_infos = this.user_infos;
      user_infos.drivce = this.drivce;
      this.setUserInfo([user_infos, this]);
      this.setRowPwd([row_pwd, this]);
      console.log("主密码设置完成，返回Home");
      this.$router.replace("/");
    },

    openQQ() {
      window.open("https://jq.qq.com/?_wv=1027&k=KIKWmqys");
    },
  },
  created() {
    this.lang = lang().unlock.CHS;
    console.log("临时语言系统加载完成");
    this.init();
  },
  mounted() {
    // 判断是否显示SnakeBar
    if (this.$route.params.msg) {
      // 密码过期
      this.snakebar_msg = this.$route.params.msg;
      this.show_snackbar = true;
    }
  },
  watch: {
    // 如果 `pwd` 发生改变，就会清空错误状态
    pwd: function () {
      this.is_err = false;
      this.err_msg = "";
    },
    // 如果 `repeat` 发生改变，就会清空错误状态
    repeat: function () {
      this.is_err = false;
      this.err_msg = "";
    },
    // 如果 `drivce` 发生改变，就会清空错误状态
    drivce: function () {
      this.is_drivce_err = false;
      this.drivce_err_msg = "";
    },
  },
  beforeDestroy() {},
  components: {},
};
</script>

<style scoped lang="scss" type="text/scss">
@import "../../style/main";
.unlock {
  width: 100%;
  min-height: 100%;
  background: #fff;
  .logo {
    margin: 0 auto;
    display: block;
    height: 5rem;
    width: 5rem;
  }
  .center {
    margin: 0 auto;
    text-align: center;
    display: block;
  }
  .input-box {
    width: 70%;
    max-width: 350px;
    margin: 0.5rem auto;
  }
  .md-raised {
    margin-top: 1rem;
  }
}
.dark-theme-unlock {
  background: #424242;
  .center {
    color: #fff !important;
  }
}
.tips {
  font-size: 0.3rem;
  max-width: 70%;
  padding: 1rem 0 0 0;
  color: #989898;
}
.tips-buttom {
  padding-bottom: 1rem;
}
.qq-link {
  color: #448aff;
}
</style>
