type ComparisonResult = {
	diff: number;
};	// 数値の比較結果

const initialData = {
	inputA: document.body.querySelector('.input-a').value,	// 比較テキストA
	inputB: document.body.querySelector('.input-b').value,	// 比較テキストB
	resultA: [],	// 結果A
	resultB: [],	// 結果B
};

new Vue({
  el: '#app',

  data () {
	  return initialData;
  },

  mounted () {
	  this.compare();
  },
  
  methods: {
	  compare () {
		// 行を取り出す
		const linesA = this.inputA.split(/\r\n|\r|\n/);	// 入力Aを行ごとに分割
		const lineALen = linesA.length;
		const linesB = this.inputB.split(/\r\n|\r|\n/);	// 入力Bを行ごとに分割
		const lineBLen = linesB.length;
		const len = Math.max(lineALen, lineBLen);	// 比較する（＝両方入力されている）行数
		const resultA = [];	// 結果
		const resultB = [];	// 結果

		// 結果を初期化


		for (let i = 0; i < len; i++) {
			// 行ごとの数値を比較する

			if (linesA[i] && linesB[i]) {
				// どちらも入力がある

				const separatedA: (string | number | ComparisonResult)[] = separateNumber(linesA[i]);	// 数字とそれ以外を切り分ける
				const separatedB: (string | number | ComparisonResult)[] = separateNumber(linesB[i]);	// 数字とそれ以外を切り分ける
				const compareLen = Math.min(separatedA.length, separatedB.length);	// 比較件数

				// 1行内の区切りごとに比較
				for (let j = compareLen - 1; 0 <= j; j--) {
					const itemA = Number(separatedA[j]);	// 比較アイテム
					const itemB = Number(separatedB[j]);	// 比較アイテム

					// 両方数字なら比較して、結果を後ろに代入
					if (!isNaN(itemA) && !isNaN(itemB)) {
						// 比較結果を数字の後に入れる
						separatedA.splice(j + 1, 0, {
							diff: new Decimal(itemA).sub(itemB),
						});
						separatedB.splice(j + 1, 0, {
							diff: new Decimal(itemB).sub(itemA),
						});
					}
				}

				// 結果の配列に入れる
				resultA.push(separatedA);
				resultB.push(separatedB);
			}
			else {
				// どちらかの値がない→比較せず入力されたテキストを入れていく
				resultA.push(linesA[i] || '');
				resultB.push(linesB[i] || '');
			}
		}

		this.resultA = resultA;
		this.resultB = resultB;
	  },
  },

  computed: {
	  inputARows () {
		const lines = this.inputA.split('\n').length;
		return (lines > 3) ? lines : 3;
	  },

	  inputBRows () {
		const lines = this.inputB.split('\n').length;
		return (lines > 3) ? lines : 3;
	  },
  },

  watch: {
	  inputA () {
		  this.compare();
	  },

	  inputB () {
		  this.compare();
	  },
  },
});

/**
 * 数字を切り出す
 * @param str 文字列
 */
function separateNumber (str) {
    const delimier = '!\t!';	// 区切り文字
    const separated = []; // 分解した結果
    let tmp;  // 検出用
    let isNum;  // 検出しているのが数値か
    const detect = {
      tmp: '',  // 検出している文字
      mode: '',  // 検出している
    };  // 検出
    
    
    // 先頭から見ていくと符号が判別しづらいので、後ろから走査していく
    for (let i = str.length - 1; 0 <= i; i--) {
      const char = str.charAt(i); // 取り出した文字
      
      if (detect.mode !== '') {
        // 数字と文字の区切りを判定
        if (detect.mode === 'number') {
          // 数値として判定中
          // 数字として認識できるか
          if(!isNaN(Number(`${char}${detect.tmp}`))) {
            // 数値としてマージ
            detect.tmp = `${char}${detect.tmp}`;
          }
          else {
            // 数字と文字列の区切り
            separated.unshift(detect.tmp); // 切り出す
            
            detect.mode = 'string';
            detect.tmp = char;
          }
        }
        else {
          // 文字として判定中
          if (!char.match(/\d/)) {
            // 文字列としてマージ
            detect.tmp = `${char}${detect.tmp}`;
          }
          else {
            // 数字と文字列の区切り
            separated.unshift(detect.tmp);
            
            detect.mode = 'number';
            detect.tmp = char;
          }
        }
      }
      else {
        // 検出する最初の文字
        // 判別するモード（数値 or 文字列）を設定する
        detect.tmp = char;
        detect.mode = char.match(/\d/) ? 'number' : 'string'; // 検出モード。符号や数値なら数字モード、それ以外なら文字列モードにする。
      }
    }
    
    if (detect.tmp.length > 0) {
      separated.unshift(detect.tmp);
    }

    return separated;
  }