<template>
  <div class="account">
    <md-app md-waterfall md-mode="fixed">
      <md-app-toolbar class="md-primary toolbar">
        <div class="md-toolbar-section-start">
          <md-button class="md-icon-button" @click="back()">
            <md-icon>arrow_back</md-icon>
          </md-button>
          <h3 class="md-title" style="flex: 1">{{ lang.title }}</h3>
        </div>
      </md-app-toolbar>

      <md-app-content>
        <v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
          <div ref="list_placeholder" style="height: 54px;"></div>
          <md-list>
            <!-- 生成结果 -->
            <md-subheader class="md-primary">{{ lang.subheader[0] }}</md-subheader>
            <md-list-item>
              <p
                v-clipboard:copy="code_res"
                v-clipboard:success="onCopyCode"
                v-clipboard:error="onErrorCode"
              >{{ code_res ? code_res : lang.code_res_empty }}</p>
            </md-list-item>
            <!-- settings -->
            <md-subheader class="md-primary">{{ lang.subheader[1] }}</md-subheader>
            <!-- 长度设置 -->
            <md-list-item>
              <md-field>
                <label for="expired_time">{{ lang.length_setter.label }}</label>
                <md-select v-model="code_length" name="code_length" id="code_length">
                  <md-option value="6">{{ lang.length_setter.options[0] }}</md-option>
                  <md-option value="12">{{ lang.length_setter.options[1] }}</md-option>
                  <md-option value="18">{{ lang.length_setter.options[2] }}</md-option>
                  <md-option value="24">{{ lang.length_setter.options[3] }}</md-option>
                  <md-option value="32">{{ lang.length_setter.options[4] }}</md-option>
                </md-select>
              </md-field>
            </md-list-item>
            <!-- 大写字母 -->
            <md-list-item>
              <span class="md-list-item-text">{{ lang.settings[0] }}</span>
              <md-switch v-model="have_upper" class="md-primary"></md-switch>
            </md-list-item>
            <!-- 小写字母 -->
            <md-list-item>
              <span class="md-list-item-text">{{ lang.settings[1] }}</span>
              <md-switch v-model="have_lower" class="md-primary"></md-switch>
            </md-list-item>
            <!-- 数字 -->
            <md-list-item>
              <span class="md-list-item-text">{{ lang.settings[2] }}</span>
              <md-switch v-model="have_num" class="md-primary"></md-switch>
            </md-list-item>
            <!-- 符号 -->
            <md-list-item>
              <span class="md-list-item-text">{{ lang.settings[3] }}</span>
              <md-switch v-model="have_symbol" class="md-primary"></md-switch>
            </md-list-item>
            <md-button
              class="md-raised md-primary expand"
              @click="generateStart()"
            >{{ lang.submit }}</md-button>
          </md-list>
          <md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
            <span>{{ snakebar_msg }}</span>
          </md-snackbar>
        </v-touch>
      </md-app-content>
    </md-app>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState, mapActions } from "vuex";
import { lang } from "@/utils/language.js";
import { generatePassword } from "@/utils/generator.js";
import { setHtmlFontSize } from "@/utils/px2rem.js";
import { replaceState } from "@/utils/getStore.js";

export default {
  name: "Add",
  data() {
    return {
      // snackbar
      show_snackbar: false,
      snakebar_msg: "",
      // 语言
      lang: "",
      // 页面高度
      clientHeight: "",
      // 大写字母
      have_upper: true,
      // 小写字母
      have_lower: true,
      // 数字
      have_num: true,
      // 符号
      have_symbol: false,
      // 密码长度
      code_length: 12,
      // 生成密码结果
      code_res: "",
    };
  },
  computed: {
    ...mapState(["user_infos", "row_data", "row_pwd", "settings"]),
  },
  methods: {
    ...mapActions(["setUserInfo", "setRowData", "setRowPwd", "setSettings"]),

    // 修改md-app的最小高度
    changeFixed(clientHeight) {
      //动态修改样式
      // console.log(clientHeight);
      // window.document.getElementsByClassName("md-content")[0].style.minHeight =
      //   clientHeight + "px";
      this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
        clientHeight + "px";
      this.$refs.list_placeholder.parentNode.style.minHeight =
        clientHeight - 32 + "px";
      window.document.documentElement.setAttribute(
        "data-theme",
        this.settings.is_dark_mode ? "dark" : "light"
      );
    },
    // 初始化
    init() {
      // 刷新本页vuex
      replaceState.call(this);
      // 判断有无用户密码
      if (Object.keys(this.row_pwd).length != 0) {
        // 有密码，已经输入过了
        let now = new Date().getTime();
        if (now - this.row_pwd.create_time < this.settings.expired_time) {
          // 上次写入时间距离现在在（默认五分钟）之内
          // 初始化本页信息
          this.initLanguage();
        } else {
          // 密码超时
          this.turnToHome("密码超时");
        }
      } else {
        // 没有密码
        this.turnToHome("无密码");
      }
    },

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

    //返回上一页
    back() {
      this.$router.go(-1);
    },

    // 强制返回Home
    turnToHome(msg) {
      console.log(msg);
      this.$router.replace("/");
    },

    // 开始生成
    generateStart() {
      this.code_res = generatePassword(
        this.code_length,
        this.have_lower,
        this.have_upper,
        this.have_num,
        this.have_symbol
      );
      this.snakebar_msg = this.lang.generate_successful;
      this.show_snackbar = true;
    },

    // 复制成功
    onCopyCode() {
      this.snakebar_msg = this.lang.copy_successful;
      this.show_snackbar = true;
    },

    // 复制失败
    onErrorCode() {
      this.snakebar_msg = this.lang.copy_failed;
      this.show_snackbar = true;
    },
  },
  created() {
    this.lang = lang().generator.CHS;
    console.log("临时语言系统加载完成");
    this.init();
  },
  mounted() {
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}`;
    //document.body.clientWidth;
    window.onresize = function temp() {
      this.clientHeight = `${document.documentElement.clientHeight}`;
      setHtmlFontSize();
    }.bind(this);
  },
  watch: {
    // 如果 `clientHeight` 发生改变，这个函数就会运行
    clientHeight: function () {
      this.changeFixed(this.clientHeight);
    },
  },
  beforeDestroy() {},
  components: {},
};
</script>

<style scoped lang="scss" type="text/scss">
@import "../../style/main";
.account {
  width: 100%;
  min-height: 100%;
  background: #fff;
  .expand {
    width: 100%;
    margin: 0 !important;
    min-height: 1.2rem !important;
    margin-top: 0.5rem !important;
  }
  .time-content {
    text-align: right !important;
  }
  .loading-box {
    position: absolute;
    right: 50%;
    top: 50%;
    margin-right: -11px;
    margin-top: -11px;
  }
  .toolbar {
    position: fixed !important;
  }
}
</style>
