// バリデーション
let form = ref(null)
const rules = ref({
  required: value => !!value || '',
})

const submit = async () => {
  const validResult = await form.value.validate()
  if (!validResult.valid) {
    return
  }
  //以下、submitの処理
}

async setImageToInput(base64Image, inputElement) {
    // Base64形式の画像を<img>要素にセット
    const img = document.createElement('img');
    img.src = base64Image;

    // 画像の読み込みを待つ
    await new Promise((resolve) => img.onload = resolve);

    // <img>要素の画像を<canvas>要素に描画
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    // <canvas>要素の画像をBlobオブジェクトに変換
    const blob = await new Promise((resolve) => canvas.toBlob(resolve));

    // BlobオブジェクトをFileオブジェクトに変換
    const file = new File([blob], 'image.jpg', {type: blob.type});

    // FileオブジェクトをDataTransferオブジェクトに追加
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);

    // DataTransferオブジェクトをinput要素のfilesプロパティにセット
    inputElement.files = dataTransfer.files;

    // changeイベントを明示的にトリガーする
    inputElement.dispatchEvent(new Event('change'));
},

// input
const base64Image = document.getElementById(imgId).src;
const inputElement = document.getElementById('item_image');
this.setImageToInput(base64Image, inputElement).then(r =>
    // セットした後の処理
);

module.exports = {
  testEnvironment: "jsdom"
};

import { mount } from "@vue/test-utils";

// The component to test
const MessageComponent = {
  template: "<p>{{ msg }}</p>",
  props: ["msg"]
};

test("displays message", () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: "Hello world"
    }
  });

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain("Hello world");
});

let pairs = Object.entries(beforeJson);
pairs.splice(3, 0, ["hoge", beforeJson["hoge"]]);
afterJson = Object.fromEntries(pairs);

// スキャン
function register_btc_scan() {
  $('.btc_scan').on('click', (event) => {
    $('.scan_area').show()
    startScanner()
    scrollTo(0, 0)
  })
  const startScanner = () => {
    Quagga.init(
      {
        inputStream: {
          numOfWorkers: 0,
          frequency: 1,
          name: 'Live',
          type: 'LiveStream',
          target: document.querySelector('#photo-area'),
          constraints: {
            decodeBarCodeRate: 3,
            successTimeout: 500,
            codeRepetition: false,
            tryVertical: true,
            frameRate: 15,
            facingMode: 'environment',
          },
        },
        decoder: {
          readers: ['ean_reader'],
        },
      },
      function (err) {
        if (err) {
          console.log(err)
          return
        }
        console.log('Initialization finished. Ready to start')
        Quagga.start()
        _scannerIsRunning = true
      }
    )
    Quagga.onProcessed(_onProcessed)
    Quagga.onDetected(_onDetected)
  }
}
// スキャン中
function _onProcessed(result) {
  var drawingCtx = Quagga.canvas.ctx.overlay,
    drawingCanvas = Quagga.canvas.dom.overlay
  if (result) {
    if (result.boxes) {
      drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute('width')), parseInt(drawingCanvas.getAttribute('height')))
      result.boxes
        .filter(function (box) {
          return box !== result.box
        })
        .forEach(function (box) {
          Quagga.ImageDebug.drawPath(
            box,
            {
              x: 0,
              y: 1,
            },
            drawingCtx,
            {
              color: 'green',
              lineWidth: 2,
            }
          )
        })
    }
    if (result.box) {
      Quagga.ImageDebug.drawPath(
        result.box,
        {
          x: 0,
          y: 1,
        },
        drawingCtx,
        {
          color: '#00F',
          lineWidth: 2,
        }
      )
    }
    if (result.codeResult && result.codeResult.code) {
      Quagga.ImageDebug.drawPath(
        result.line,
        {
          x: 'x',
          y: 'y',
        },
        drawingCtx,
        {
          color: 'red',
          lineWidth: 3,
        }
      )
    }
  }
}

function _getMedian(arr) {
  arr.sort((a, b) => a - b)
  const half = Math.floor(arr.length / 2)
  if (arr.length % 2 === 1)
    // Odd length
    return arr[half]
  return (arr[half - 1] + arr[half]) / 2.0
}

let codes = []

// 検知した
function _onDetected(result) {
  // １つでもエラー率0.16以上があれば除外
  let is_err = false
  $.each(result.codeResult.decodedCodes, function (id, error) {
    if (error.error != undefined) {
      if (parseFloat(error.error) > 0.16) {
        is_err = true
      }
    }
  })
  if (is_err) return

  // エラー率のmedianが0.05以上なら除外
  const errors = result.codeResult.decodedCodes.filter((_) => _.error !== undefined).map((_) => _.error)
  const median = _getMedian(errors)
  if (median > 0.05) {
    return
  }

  // ３連続同じ数値だった場合のみ採用する
  codes.push(result.codeResult.code)
  if (codes.length < 3) return
  let is_same_all = false
  if (codes.every((v) => v === codes[0])) {
    is_same_all = true
  }
  if (!is_same_all) {
    codes.shift()
    return
  }

  alert(result.codeResult.code)
  $('.scan_area').hide()
  Quagga.stop()
  Quagga.offProcessed(_onProcessed)
  Quagga.offDetected(_onDetected)
}

const item = document.querySelector('.hoge')
item.classList.remove('hoge')
item.classList.add('fuga')