<template>
  <div>
    <div class="regText" v-for="(res, i) in result" :key="`res-${i}`">
      {{ res.text }}
      <br v-if="res.text" />
      <span class="regBold">
        {{ res.username }}@{{ res.hostname }}:<span class="pathText">{{ res.path }}</span>
      </span>$
      <input
        :key="i"
        :password="res.password"
        :autofocus="res.active"
        :disabled="!res.active"
        spellcheck="false"
        type="text"
        class="inputField"
        v-model="res.command"
        @keyup.enter="exec(res.command, i)"
      />
      <br />
    </div>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';

  export default {
    data: function () {
      return {
        user: Cookies.get('username'),
        host: '076.ne.jp',
        pwd: '/',
        result: []
      }
    },
    created: function () {
      this.result = [];
      this.user = Cookies.get('username');
      this.host = '076.ne.jp';
      this.pwd = '/';

      this.result.push({
        username: this.user,
        hostname: this.host,
        path: this.pwd,
        active: true,
        text: '',
        field: false,
        password: false,
        command: ''
      });
    },
    methods: {
      exec(text, key) {
        var arg = text.split(' ');
        this.result[key].active = false;

        if (arg[0] === 'ls') this.ls(this.result[key].path);
        else if (arg[0] === 'cd') this.cd(arg[1]);
        else if (arg[0] === 'clear') this.clear();
        else this.result.push({
          username: this.user,
          hostname: this.host,
          path: this.pwd,
          active: true,
          text: arg[0] + ': コマンドは見つかれません。',
          field: false,
          password: false,
          command: ''
        });
      },
      ls(pwd) {
        var neopwd = pwd.replace('/', 'sl');
        axios.get('/api/rpc/bash/exec', {
          arg: ['ls', '', '']
        }).then(res => {
          this.result.push({
            username: this.user,
            hostname: this.host,
            path: this.pwd,
            active: true,
            text: res.data,
            field: false,
            password: false,
            command: ''
          })
        })
      },
      cd(pwd) {
        if (pwd === '/fuck' || pwd === 'fuck') {
          this.result.push({
            username: this.user,
            hostname: this.host,
            path: this.pwd,
            active: true,
            text: 'bash: cd: ' + pwd + ': このファイルまたはフォルダがありません。',
            field: false,
            password: false,
            command: ''
          });
          return false;
        }
        if (!pwd.startsWith('/')) pwd = '/' + pwd;

        this.pwd = pwd;
      },
      clear() {
        this.result = [];
      }
    }
  }
</script>

<style scoped>
  .inputField {
    background-color: #31363b;
    color: #2ecc71;
    border-width: 0px;
    font-family: monospace;
    font-size: large;
    width: 500px;
    outline: none;
  }
  .regBold {
    font-weight: bold;
  }
  .regText {
    color: #2ecc71;
  }
  .pathText {
    color: #3498db;
  }
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #1cdc9a;
  }
</style>
