<style scoped>
.layout {
  height: 100%;
  background: #dddddd;
}

.header {
  background: #dddddd;
}

.ivu-layout-header {
  line-height: normal;
  height: auto;
  padding: 0px;
}


.content {
  background: #dddddd;
}

.ivu-layout-content {
  padding: 0px;
}



.layout-footer-center {
  background: #dddddd;
  text-align: center;
}





.ivu-card-bordered {
  border: 0px solid #dcdee2;
  border-color: #e8eaec;
}



.noteKey {
  color: red;
  font-weight: bold;
  font-size: 18px;
  font-family: "Bitstream Vera Sans Mono", Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"
}
</style>

<style>
#noteText {
  color: black;
  padding: 15px;
  vertical-align: top;
  width: 100%;
  height: auto;
  background: white;
  min-width: 200px;
  border-radius: 0px;
  overflow-y: auto;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  /*min-height: 400px;*/
  font-size: 14px;
}


#noteText::selection {
  background: firebrick;
  color: white;
}

#noteText::-moz-selection {
  background: firebrick;
  color: white;
}

#noteText br::selection {
  background: firebrick;
  color: white;
}

#noteText br::-moz-selection {
  background: firebrick;
  color: white;
}

button span {
  font-size: 18px;
  margin-left: -1px !important;
}
</style>
<template>
  <div class="layout" onkeydown="keydown">
    <Layout>
      <Affix :offset-top="0">


        <Header class="header">
          <div>
            <Row>
              <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
                :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">


              <div style="background: white;width:100%;height:40px;">
                <img style="height:40px;float:left;" src="favicon.png">
                <div style="float:left;width:auto;">

                  <Button-group size="large">

                    <Button type="error"
                      style="margin-left:5px; border-radius: 0px;font-size: 24px; font-family: Arial, sans-serif"
                      icon="md-cloud-done">{{ this.noteForm.ttlDesc }}</Button>

                  </Button-group>

                </div>


                <div style="float:right;width:auto;">
                  <Button-group size="large">
                    <Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
                      @click="createNote()" icon="md-add"></Button>
                    <Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
                      @click="dropNote()" icon="md-trash"></Button>
                  </Button-group>
                </div>







                <!--
                <div style="width:auto;float:right;font-size: 24px;">
                  <Button-group vertical size="large" style="position:absolute;right;0px;top:0px;">
                    <Button type="error" style="border-radius: 0px;font-size: 24px;" icon="md-add"
                      @click="showExt = true"></Button>
                    <Button type="error" v-show="showExt" style="border-radius: 0px;font-size: 24px;"
                      icon="md-cloud-upload"></Button>
                    <Button type="error" v-show="showExt" style="border-radius: 0px;font-size: 24px;"
                      icon="logo-googleplus"></Button>
                    <Button type="error" v-show="showExt" style="border-radius: 0px;font-size: 24px;"
                      icon="logo-tumblr"></Button>
                  </Button-group>
                </div>
                -->
              </div>




              </Col>
            </Row>
          </div>
        </Header>
      </Affix>
      <Content class="content">
        <div style="min-height: 650px;">
          <Row>
            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
              :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
            <Card :padding="0">
              <div style="border-left: 0px solid #FF3366;">
                <div id="noteText" style="text-align: left;min-height: 650px;" class="monoFt"
                  v-html="this.noteForm.escapeText">
                  view2
                </div>

              </div>
            </Card>
            </Col>
          </Row>
        </div>
      </Content>


      <Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>

    </Layout>


  </div>
</template>

<script>

import { aesDecrypt, md5, unzip } from "@/libs/secret";
import Jquery from "jquery";
import { getSecretKey, getStoreKey } from "@/api/lock";
import { deleteNote } from "@/api/note";
import storage from "@/libs/storage";
import { getEscapeText } from "@/libs/noteStorage";

export default {
  name: 'ViewNote',
  components: {},
  props: {},
  data() {
    return {
      noteForm: {
        url: '',
        text: '',
        escapeText: '',
        key: '',
        md5: '',
        lock: '0',
        ttl: 3600,
        ttlDesc: '',
      },
      secret: {
        storeKey: '',
        secretKey: '',
        cipher: '',
      },
      state: {
        lock: '0',
        locking: '0',
        commited: '0'
      }
    }
  },
  created() {
    this.noteForm.key = this.$route.params.name;
    let storeKey = getStoreKey(this.noteForm.key);
    this.secret.storeKey = storeKey;
    let noteMeta = storage.session.getObject(storeKey + '.noteMeta');
    if (noteMeta) {
      this.state.lock = noteMeta.lock;
      this.secret.cipher = noteMeta.cipher;
      this.noteForm.md5 = noteMeta.md5;
      this.noteForm.ttl = noteMeta.ttl;
      this.startClock();

      this.loadText();
    }

    this.bindEvent();
  },
  methods: {
    startClock() {
      let that = this;
      window.setInterval(function () {
        let ittl = parseInt(that.noteForm.ttl / 1000);
        let mins = parseInt(ittl / 60);
        if (mins < 10) {
          mins = "0" + mins;
        }
        if (mins < 0) {
          mins = "00";
        }
        let seds = parseInt(ittl % 60);
        if (seds < 10) {
          seds = "0" + seds;
        }
        if (seds < 0) {
          seds = "00";
        }
        that.noteForm.ttlDesc = mins + ":" + seds;
        that.noteForm.ttl -= 1000;
        if (that.noteForm.ttl <= 0) {
          that.storage.local.delete(that.secret.storeKey + '.text');
          that.storage.session.delete(that.secret.storeKey + '.keyMeta');
          location.reload();
        }
      }, 1000)
    },
    decryptNote() {
      // let password = "123456";
      // let secretKey = getSecretKey(this.noteForm.key, password);
      // this.loadText(secretKey);

    },
    createNote() {
      window.open("/");
    },
    dropNote() {
      deleteNote(this.noteForm.key).then(res => {
        if (res) {
          storage.local.delete(this.secret.storeKey + '.text');
          storage.session.delete(this.secret.storeKey + '.keyMeta');
          location.reload();
        }
      });
    },
    loadText() {

      let password;

      if (this.noteForm.lock == "1") {
        password = "123456"
      }


      if (!password) {
        password = "";
      }
      let secretKey = getSecretKey(this.secret.cipher, password);
      let storeText = storage.local.getText(this.secret.storeKey + '.text');
      if (!storeText || md5(storeText.substring(35)) != this.noteForm.md5) {
        let note = this.getNote(this.noteForm.key);
        storeText = this.noteForm.lock + '|' + this.secret.cipher + '|' + note.text;
        storage.local.setText(this.secret.storeKey + '.text', storeText);
      }

      if (storeText) {
        storeText = unzip(storeText.substring(35));
        let plainText = aesDecrypt(storeText, secretKey);
        if (plainText.startsWith("FLAGNOTE#")) {
          this.noteForm.text = plainText.substring(9);
          let escapeText = getEscapeText(this.noteForm.text);
          this.noteForm.escapeText = escapeText;
        }
      }
    },
    getNote(key) {
      let noteObject;
      Jquery.ajax({
        url: '/note/' + key,
        async: false,
        success: function (data) {
          noteObject = data;
        }
      });
      return noteObject;
    },
    bindEvent() {
      if (document.body.createTextRange) {
        Jquery(document).keydown(function (e) {
          if ((e.ctrlKey || e.metaKey) && e.keyCode == 65) {
            e.preventDefault();

            var element = document.getElementById("noteText");
            let range = document.body.createTextRange();
            range.moveToElementText(element);
            range.select();

          }
        });
      } else if (window.getSelection) {

        Jquery(document).keydown(function (e) {
          if ((e.ctrlKey || e.metaKey) && e.keyCode == 65) {
            e.preventDefault();

            var element = document.getElementById("noteText");

            let selection = window.getSelection();
            let range = document.createRange();
            range.selectNodeContents(element);
            selection.removeAllRanges();
            selection.addRange(range);

          }
        });

      } else {
        //alert('none');
      }


    }

  }
}
</script>

