<template>
  <div class="home" ref="home">
    <md-app md-waterfall md-mode="fixed">
      <md-app-toolbar class="md-primary">
        <div class="md-toolbar-section-start">
          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
            <md-icon>menu</md-icon>
          </md-button>
          <span class="md-title page-title" @click="scrollTop()">{{ lang.title }}</span>
        </div>
        <div class="md-toolbar-section-end">
          <div class="sroll-top-area" @click="scrollTop()"></div>
          <md-button class="md-icon-button" @click="turnToSearch()">
            <md-icon>search</md-icon>
          </md-button>
          <md-menu md-align-trigger>
            <md-button md-menu-trigger class="md-icon-button">
              <md-icon>more_vert</md-icon>
            </md-button>
            <md-menu-content>
              <md-menu-item @click="changeSortType('Alphabetically')">{{ lang.menu[0] }}</md-menu-item>
              <md-menu-item @click="changeSortType('Default')">{{ lang.menu[1] }}</md-menu-item>
              <md-menu-item @click="changeSortType('Recently Used')">{{ lang.menu[2] }}</md-menu-item>
            </md-menu-content>
          </md-menu>
        </div>
        <div class="md-toolbar-row" v-if="search_start">
          <md-autocomplete
            class="search"
            v-model="search_content"
            :md-options="titles"
            md-layout="box"
          >
            <label>{{ lang.search }}</label>
          </md-autocomplete>
        </div>
      </md-app-toolbar>

      <md-app-drawer :md-active.sync="menuVisible">
        <div class="drawer-banner" @click="toggleVc()">
          <md-icon class="default-avatar md-size-2x face">face</md-icon>
          <p class="md-title">Canary Codebook</p>
          <p class="md-caption">{{ user_infos.user_name }}</p>
        </div>

        <md-list>
          <md-list-item @click="turnToPage('/account')">
            <md-icon>person</md-icon>
            <span class="md-list-item-text">{{ lang.drawer[0] }}</span>
          </md-list-item>

          <!-- <md-list-item @click="turnToPage('/faq')">
						<md-icon>help</md-icon>
						<span class="md-list-item-text">FAQ</span>
					</md-list-item>

					<md-list-item @click="turnToPage('/feedback')">
						<md-icon>question_answer</md-icon>
						<span class="md-list-item-text">Provide Feedback</span>
          </md-list-item>-->

          <md-list-item @click="turnToPage('/settings')">
            <md-icon>settings</md-icon>
            <span class="md-list-item-text">{{ lang.drawer[1] }}</span>
          </md-list-item>

          <md-list-item @click="turnToPage('/generator')">
            <md-icon>extension</md-icon>
            <span class="md-list-item-text">{{ lang.drawer[2] }}</span>
          </md-list-item>

          <md-list-item @click="turnToPage('/updatelog')">
            <md-icon>event_note</md-icon>
            <span class="md-list-item-text">{{ lang.drawer[3] }}</span>
          </md-list-item>

          <md-list-item @click="openQQ()">
            <md-icon>question_answer</md-icon>
            <span class="md-list-item-text">{{ lang.drawer[7] }}</span>
          </md-list-item>

          <md-list-item
            v-clipboard:copy="web_addr"
            v-clipboard:success="onCopyUrl"
            v-clipboard:error="onErrorUrl"
          >
            <md-icon>reply</md-icon>
            <span class="md-list-item-text">{{ lang.drawer[4] }}</span>
          </md-list-item>

          <md-list-item @click="downloadApk()">
            <md-icon>file_download</md-icon>
            <span class="md-list-item-text">{{ lang.drawer[5] }}</span>
          </md-list-item>

          <md-list-item @click="turnToUnlock('用户点击锁定')">
            <md-icon>beenhere</md-icon>
            <span class="md-list-item-text">{{ lang.drawer[6] }}</span>
          </md-list-item>
        </md-list>
      </md-app-drawer>

      <md-app-content>
        <v-touch @swiperight="menuVisible = true" :swipe-options="{ direction: 'horizontal' }">
          <div ref="list_placeholder" :style="`height:${search_start ? '86' : '40'}px`"></div>
          <md-empty-state
            md-icon="devices_other"
            :md-label="lang.empty_state.label"
            :md-description="lang.empty_state.description"
            v-if="show_list.length == 0 && !search_start"
          >
            <md-button
              class="md-primary md-raised"
              @click="turnToAdd()"
            >{{ lang.empty_state.button }}</md-button>
          </md-empty-state>

          <div
            class="code-card"
            v-for="(code, index) in show_list"
            :key="index"
            @click="turnToDetail(code)"
          >
            <p class="md-title">{{ code.title }}</p>
            <p class="md-caption">{{ code.user_name }}</p>
            <md-divider></md-divider>
            <div style="margin-bottom: .3rem;"></div>
          </div>

          <md-speed-dial class="md-bottom-right" v-if="show_list.length != 0 || search_start">
            <md-speed-dial-target class="md-primary" @click="turnToAdd()">
              <md-icon>add</md-icon>
            </md-speed-dial-target>
          </md-speed-dial>

          <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 {
  encrypt,
  decrypt,
  encryptMainCode,
  decryptMainCode,
} from "@/utils/aes.js";
import { lang } from "@/utils/language.js";
import { setHtmlFontSize } from "@/utils/px2rem.js";
import { replaceState } from "@/utils/getStore.js";

export default {
  name: "Home",
  data() {
    return {
      // 显示抽屉开关
      menuVisible: false,
      // 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
      clientHeight: "",
      // 显示的密码列表
      show_list: [],
			// 原始顺序密码列表
			row_list: [],
      // 搜索暂存list
      cache_list: [],
      unlock: false,
      show_snackbar: false,
      snakebar_msg: "",
      web_addr: "https://canary.lacus.icu",
      titles: [],
      search_content: "",
      search_start: false,
      lang: "",
      // vcnsole模块
      lastClickTime: 0,
      count: 0,
      // 滚动记录
      scrollHeight: 0,
    };
  },
  computed: {
    ...mapState([
      "user_infos",
      "row_data",
      "row_pwd",
      "settings",
      "home_state",
    ]),
  },
  methods: {
    ...mapActions([
      "setUserInfo",
      "setRowData",
      "setRowPwd",
      "setSettings",
      "setHomeState",
    ]),

    // 修改md-app的最小高度
    changeFixed(clientHeight) {
      //动态修改样式
      // console.log(clientHeight);
      this.$refs.home.children[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);
      this.initLanguage();
      // 判断有无用户密码
      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.unlock = true;
          // 判断有无密码本
          if (this.row_data) {
            // 解密主密码
            let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
            let data_decrypt;
            let data_list;
            // 解密密码本
            try {
              data_decrypt = decrypt(main_code_decrpt, this.row_data);
              // 刷新显示内容
              data_list = JSON.parse(data_decrypt);
            } catch (e) {
              // 不正确
              // 跳转到解锁界面
              console.log(e);
              this.turnToUnlock("密码错误");
              return;
            }
            // 设置原始数据
						this.row_list = JSON.parse(JSON.stringify(data_list))
						// 设置默认显示顺序是常用的在最上边
						this.show_list = data_list.sort((a, b) => b['open_count'] - a['open_count']);
            // 抽离title
            this.separateTitle(data_list);
            // 恢复原先状态
            if (this.home_state) {
              this.search_start = this.home_state.search_start;
              this.search_content = this.home_state.search_content;
              this.$nextTick(() => {
                this.$refs.list_placeholder.parentNode.parentNode.scrollTo({
                  top: this.home_state.scrollHeight,
                });
                console.log("原状态恢复完成");
                this.setHomeState(["", this]);
                console.log("主页状态缓存删除完成");
              });
            }
          } else {
            // 空密码本
            this.show_list = [];
          }
        } else {
          // 跳转到解锁界面
          this.turnToUnlock("密码超时");
        }
      } else {
        // 没有密码，跳转到解锁界面创建密码
        this.turnToUnlock("无密码");
      }
      console.log(this.show_list.length != 0 ? "密码本存在" : "空密码本");
      console.log(this.unlock ? "已解锁" : "未解锁");
    },

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

    // 修改排序
    changeSortType(type) {
      // 没有内容拦截器
      if (this.show_list.length == 0) {
        console.log("修改排序无内容拦截");
        return;
      }
      // 排序
      if (type == "Alphabetically") {
        // 按首字母排序
        this.show_list = this.show_list.sort((a, b) =>
          a["title"].localeCompare(b["title"])
        );
      } else if (type == "Default") {
        // 按密码创建时间排序
				this.show_list = JSON.parse(JSON.stringify(this.row_list));
      } else {
				// 按使用频率排序
				this.show_list = this.show_list.sort((a, b) => b['open_count'] - a['open_count']);
			}
    },

    // 跳转到解锁界面
    turnToUnlock(type) {
      this.setHomeState(["", this]);
      console.log("主页状态缓存删除完成");
      console.log(type);
      this.setRowPwd(["", this]);
      if (type == "密码超时")
        this.$router.push({
          name: "Unlock",
          params: { msg: this.lang.unlock_msg.expired },
        });
      if (type == "密码错误")
        this.$router.push({
          name: "Unlock",
          params: { msg: this.lang.unlock_msg.wrong },
        });
      else this.$router.push("/unlock");
    },

    // 跳转到搜索界面
    turnToSearch() {
      // 没有内容拦截器
      if (this.show_list.length == 0) {
        console.log("点击搜索无内容拦截");
        return;
      }
      this.search_start = !this.search_start;
    },

    // 跳转到添加界面
    turnToAdd() {
      // 未解锁拦截器
      if (!this.unlock) {
        this.turnToUnlock("点击新增未解锁拦截");
        return;
      }
      let home_state = {
        search_start: this.search_start,
        search_content: this.search_content,
        scrollHeight: this.scrollHeight,
      };
      this.setHomeState([home_state, this]);
      this.$router.push("/add");
    },

    turnToDetail(content) {
      let home_state = {
        search_start: this.search_start,
        search_content: this.search_content,
        scrollHeight: this.scrollHeight,
      };
      this.setHomeState([home_state, this]);
      this.$router.push({ name: "Detail", params: { code_content: content } });
    },

    // 跳转到某页面
    turnToPage(url) {
      let home_state = {
        search_start: this.search_start,
        search_content: this.search_content,
        scrollHeight: this.scrollHeight,
      };
      this.setHomeState([home_state, this]);
      this.$router.push(url);
    },

    // 复制成功
    onCopyUrl(e) {
      this.snakebar_msg = this.lang.copy.successful;
      this.show_snackbar = true;
    },

    // 复制失败
    onErrorUrl(e) {
      this.snakebar_msg = this.lang.copy.failed;
      this.show_snackbar = true;
    },

    // 分离数据title
    separateTitle(data_list) {
      let title_list = [];
      for (let i in data_list) {
        title_list.push(data_list[i].title);
      }
      this.titles = title_list;
      console.log("数据头部分离完成");
    },

    // 模糊搜索
    fuzzySearch(cache_list) {
      // 空内容拦截器，显示全部密码
      if (!this.search_content.trim()) {
        this.show_list = cache_list;
        return;
      }
      let data_list = [];
      for (let i in cache_list) {
        if (
          this.generReg(this.search_content.trim()).test(cache_list[i].title)
        ) {
          data_list.push(cache_list[i]);
        }
      }
      this.show_list = data_list;
      console.log("模糊搜索完成");
    },

    // 模糊搜索辅助轮
    generReg(val) {
      let head = "(.*)(";
      let tail = ")(.*)";
      let body = val.split("").join(")(.*)(");
      return new RegExp(head + body + tail, "i");
    },

    // 下载apk
    downloadApk() {
      window.open("https://assets.lacus.site/canary/netdisk_canary.apk");
    },

    // 一键回顶
    scrollTop() {
      this.$refs.list_placeholder.parentNode.parentNode.scrollTo({
        top: 0,
        behavior: "smooth",
      });
      console.log("一键回顶成功");
    },

    // 判断是否有class
    hasClass(obj, cls) {
      return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
    },
    // 增加class
    addClass(obj, cls) {
      if (!this.hasClass(obj, cls)) obj.className += " " + cls;
    },
    // 改变class
    toggleClass(obj, cls) {
      if (this.hasClass(obj, cls)) {
        this.removeClass(obj, cls);
      } else {
        this.addClass(obj, cls);
      }
    },
    // 移除class
    removeClass(obj, cls) {
      if (this.hasClass(obj, cls)) {
        var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
        obj.className = obj.className.replace(reg, " ");
      }
    },
    // 点击处理vconsole
    toggleVc() {
      const nowTime = new Date().getTime();
      if (nowTime - this.lastClickTime < 3000) {
        this.count++;
      } else {
        this.count = 0;
      }
      this.lastClickTime = nowTime;
      if (this.count >= 10) {
        let vconDom = document.getElementById("__vconsole");
        this.toggleClass(vconDom, "vconsole-show");
        this.count = 0;
      }
    },

    // 记录滚动高度
    scroll(e) {
      this.scrollHeight = this.$refs.list_placeholder.parentNode.parentNode.scrollTop;
    },

    openQQ() {
      window.open("https://jq.qq.com/?_wv=1027&k=KIKWmqys");
    },
  },
  created() {
    this.lang = lang().home.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);
    this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
      "scroll",
      this.scroll
    );
  },
  watch: {
    // 如果 `clientHeight` 发生改变，这个函数就会运行
    clientHeight: function () {
      this.changeFixed(this.clientHeight);
    },
    // 如果 `search_start` 发生改变，这个函数就会运行
    search_start: function () {
      if (this.search_start) {
        this.cache_list = JSON.parse(JSON.stringify(this.show_list));
        console.log("搜索阵列展开，缓存设置完成");
      } else {
        this.search_content = "";
        this.show_list = JSON.parse(JSON.stringify(this.cache_list));
        this.cache_list = [];
        console.log("搜索阵列关闭，缓存清空完成");
      }
    },
    // 如果 `search_content` 发生改变，这个函数就会运行
    search_content: function () {
      // 确保只有在搜索阵列展开后才会进行搜索
      if (this.search_start) {
        this.fuzzySearch(this.cache_list);
      }
    },
  },
  beforeDestroy() {},
  components: {},
};
</script>

<style scoped lang="scss" type="text/scss">
@import "../../style/main";
.home {
  width: 100%;
  // max-width: 500px;
  min-height: 100%;
  background: #fff;
  // margin: 0 auto;
  .drawer-banner {
    padding: 1rem 0.3rem 0.3rem 0.3rem;
    box-sizing: border-box;
    background: $main-color;
    color: #fff;
    position: relative;
    .default-avatar {
      color: #fff;
      margin-bottom: 0.3rem;
    }
    .md-caption {
      color: #fbfbfb;
    }
  }
  .code-card {
    p:first-of-type {
      margin-top: 0.3rem;
    }
    p:last-of-type {
      margin-bottom: 0.3rem;
    }
    // padding: 0.3rem 0;
    // border-bottom: 1px #eee solid;
  }
  .md-toolbar {
    position: fixed;
    top: 0;
  }
  .md-toolbar-row {
    order: 12;
    // margin-bottom: .3rem !important;
  }
  .md-toolbar-section-start,
  .md-toolbar-section-end,
  .md-toolbar-row {
    min-height: 56px;
  }
  .md-toolbar-row {
    margin-top: -10px;
  }
  .md-speed-dial.md-bottom-right {
    position: fixed !important;
  }
}
// Demo purposes only
.md-drawer {
  width: 240px;
  max-width: calc(100vw - 125px);
}
.md-app-scroller > div {
  overflow-y: scroll !important;
}
.face {
  color: #fff !important;
}
.page-title {
  flex: 1;
  min-height: 56px;
  line-height: 56px;
}
.sroll-top-area {
  flex: 1;
  min-height: 56px;
}
</style>
