<template>
  <div class="add">
    <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">{{ id_cache ? lang.title[1] : lang.title[0] }}</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-field :class="title_verify ? '' : 'md-invalid'">
            <label>{{ lang.subheader[0] }}</label>
            <md-input v-model="title" required></md-input>
            <span class="md-error">{{ lang.empty_error[0] }}</span>
          </md-field>

          <md-field :class="user_name_verify ? '' : 'md-invalid'">
            <label>{{ lang.subheader[1] }}</label>
            <md-input v-model="user_name" required></md-input>
            <span class="md-error">{{ lang.empty_error[1] }}</span>
          </md-field>

          <md-field :class="password_verify ? '' : 'md-invalid'">
            <label>{{ lang.subheader[2] }}</label>
            <md-input v-model="password" required></md-input>
            <span class="md-error">{{ lang.empty_error[2] }}</span>
            <span class="md-caption" style="color:#448AFF;" @click="show_dialog = true">生成密码</span>
          </md-field>

          <md-field>
            <label>{{ lang.subheader[3] }}</label>
            <md-input v-model="web_address"></md-input>
          </md-field>

          <md-field>
            <label>{{ lang.subheader[4] }}</label>
            <md-textarea v-model="node"></md-textarea>
          </md-field>

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

          <md-dialog :md-active.sync="show_dialog" style="min-width: 50%;">
            <md-dialog-title>生成密码{{copy_state}}</md-dialog-title>
            <md-list>
              <!-- 生成结果 -->
              <md-subheader class="md-primary">{{ lang.generator.subheader[0] }}</md-subheader>
              <md-list-item>
                <p>{{ password ? password : lang.generator.code_res_empty }}</p>
              </md-list-item>
              <!-- settings -->
              <md-subheader class="md-primary">{{ lang.generator.subheader[1] }}</md-subheader>
              <!-- 长度设置 -->
              <md-list-item>
                <md-field>
                  <label for="expired_time">{{ lang.generator.length_setter.label }}</label>
                  <md-select v-model="code_length" name="code_length" id="code_length">
                    <md-option value="6">{{ lang.generator.length_setter.options[0] }}</md-option>
                    <md-option value="12">{{ lang.generator.length_setter.options[1] }}</md-option>
                    <md-option value="18">{{ lang.generator.length_setter.options[2] }}</md-option>
                    <md-option value="24">{{ lang.generator.length_setter.options[3] }}</md-option>
                    <md-option value="32">{{ lang.generator.length_setter.options[4] }}</md-option>
                  </md-select>
                </md-field>
              </md-list-item>
              <!-- 大写字母 -->
              <md-list-item>
                <span class="md-list-item-text">{{ lang.generator.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.generator.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.generator.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.generator.settings[3] }}</span>
                <md-switch v-model="have_symbol" class="md-primary"></md-switch>
              </md-list-item>
            </md-list>

            <md-dialog-actions>
              <md-button class="md-primary" @click="generateStart()">{{ lang.generator.actions[0] }}</md-button>
              <md-button
                class="md-primary"
                v-clipboard:copy="password"
                v-clipboard:success="onCopyCode"
                v-clipboard:error="onErrorCode"
              >{{ lang.generator.actions[1] }}</md-button>
              <md-button
                class="md-primary"
                @click="show_dialog = false"
              >{{ lang.generator.actions[2] }}</md-button>
            </md-dialog-actions>
          </md-dialog>
        </v-touch>
      </md-app-content>
    </md-app>
  </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 { setHtmlFontSize } from "@/utils/px2rem.js";
import { generatePassword } from "@/utils/generator.js";
import { replaceState } from "@/utils/getStore.js";

export default {
  name: "Add",
  data() {
    return {
      clientHeight: "",
      title: "",
      user_name: "",
      password: "",
      node: "",
      web_address: "",
      id_cache: "",
      open_count_cache: "",
      title_verify: true,
      user_name_verify: true,
      password_verify: true,
      lang: "",
      show_dialog: false,
      // 大写字母
      have_upper: true,
      // 小写字母
      have_lower: true,
      // 数字
      have_num: true,
      // 符号
      have_symbol: false,
      // 密码长度
      code_length: 12,
      // 密码复制状态
      copy_state: "",
    };
  },
  computed: {
    ...mapState(["row_data", "row_pwd", "settings", "user_infos"]),
  },
  methods: {
    ...mapActions(["setRowData", "setRowPwd", "setSettings", "setUserInfo"]),
    // 修改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();
          if (this.$route.params.modify_content) {
            // 刷新重置数据
            let content = this.$route.params.modify_content;
            this.title = content.title;
            this.user_name = content.user_name;
            this.password = content.password;
            this.node = content.node;
            this.web_address = content.web_address;
            this.id_cache = content.id;
            this.open_count_cache = content.open_count;
          }
          return;
        } else {
          // 密码超时
          this.turnToHome("密码超时");
        }
      } else {
        // 没有密码
        this.turnToHome("无密码");
      }
    },

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

    // 对输入框里边的内容进行判断
    judgeContent() {
      // 设置flag
      let can_continue = true;
      // 处理title
      if (!(this.title = this.title.trim())) {
        can_continue = false;
        this.title_verify = false;
      }
      // 处理user_name
      if (!(this.user_name = this.user_name.trim())) {
        can_continue = false;
        this.user_name_verify = false;
      }
      // 处理password
      if (!(this.password = this.password.trim())) {
        can_continue = false;
        this.password_verify = false;
      }
      // 根据flag判断是否提交
      if (can_continue) this.submit();
    },

    // 校验通过进行提交
    submit() {
      // 覆写拦截器
      if (this.id_cache) {
        console.log("覆写拦截器生效");
        this.reWrite();
        return;
      }
      // 正常提交
      let data_list;
      // 组织内容
      let code = {
        id: this.createId(),
        open_count: 0,
        title: this.title,
        user_name: this.user_name,
        password: this.password,
        node: this.node,
        web_address: this.web_address,
      };
      // 解密主密码
      let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
      // 判断是不是第一个
      if (this.row_data) {
        // 不是第一个需要进行加解密
        // 解密密码本
        let data_decrypt = decrypt(main_code_decrpt, this.row_data);
        // json化
        data_list = JSON.parse(data_decrypt);
        data_list.push(code);
      } else {
        // 是第一个
        data_list = [code];
      }
      let data_list_aes = encrypt(main_code_decrpt, data_list);
      this.setRowData([data_list_aes, this]);
      console.log("新加密信息保存成功,返回Home");
      this.back();
    },

    reWrite() {
      let data_list;
      // 组织内容
      let code = {
        id: this.id_cache,
        open_count: this.open_count_cache,
        title: this.title,
        user_name: this.user_name,
        password: this.password,
        node: this.node,
        web_address: this.web_address,
      };
      // 解密主密码
      let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
      // 解密密码本
      let data_decrypt = decrypt(main_code_decrpt, this.row_data);
      // json化
      data_list = JSON.parse(data_decrypt);
      // 遍历所有密码
      for (let i in data_list) {
        // 找到该密码
        if (data_list[i].id == code.id) {
          // 覆写
          data_list[i] = code;
        }
      }
      let data_list_aes = encrypt(main_code_decrpt, data_list);
      this.setRowData([data_list_aes, this]);
      console.log("新加密信息覆写成功,返回详情");
      this.back();
    },
    //返回上一页
    back() {
      this.$router.go(-1);
    },

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

    // 创建唯一识别码
    createId() {
      // 获取时间戳
      let time = new Date().getTime();
      // 获取随机数
      let random = Math.floor(Math.random() * 100);
      // 小于10填0
      random < 10
        ? (random = "0" + random.toString())
        : (random = random.toString());
      // 拼接
      let id = time.toString() + random;
      return id;
    },

    // 开始生成
    generateStart() {
      this.password = generatePassword(
        this.code_length,
        this.have_lower,
        this.have_upper,
        this.have_num,
        this.have_symbol
      );
    },

    // 复制成功
    onCopyCode() {
      this.copy_state = this.lang.generator.copy_successful;
      setTimeout(() => {
        this.copy_state = "";
      }, 2000);
    },
    // 复制失败
    onErrorCode() {
      this.copy_state = this.lang.generator.copy_failed;
      setTimeout(() => {
        this.copy_state = "";
      }, 2000);
    },
  },
  created() {
    this.lang = lang().add.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";
.add {
  width: 100%;
  min-height: 100%;
  background: #fff;
  .expand {
    width: 100%;
    margin: 0 !important;
    min-height: 1.2rem !important;
  }
  .toolbar {
    position: fixed !important;
  }
}
</style>
