<script id="t-example" type="x/template">
<div class="v-example container">
  <div class="row">
    <label class="col-1"> Code: </label>
    <textarea class="col-11" readonly>
await TigerBridge.#{module}}.#{method}}(#{args}})
    </textarea>
  </div>
  <div class="row">
    <label class="col-1"> Result: </label>
    <pre class="col-11">
#{ result }} </pre>
  </div>
  <div class="row">
    <label class="col-1"> Test: </label>
    <div class="col-11">
      <button class="button" @click="run(true)"> Debug </button>
      <button class="button" @click="run()"> Run </button>
    </div>
  </div>
</div>
</script>

<script>
const parse = obj => {
  return JSON.stringify(obj, (key, val) => {
    if (typeof val === 'function') {
      return val + ''
    }
    return val
  }, '  ')
}
Vue.component('example', {
  template: `#t-example`,
  delimiters: [ '#{', '}}'],
  props: [ 'module', 'method', 'args' ],
  data: () => ({
    bridge: null,
    result: null
  }),
  computed: {
    param () {
      return [].concat(this.args).map(item => {
        return item === 'echo' ? this.callback : item
      })
    }
  },
  mounted () {
    this.bridge= TigerBridge
  },
  methods: {
    async run (isDebug, silent) {
      this.bridge.setDebug(isDebug)
      let print = silent ? () => null : window.alert
      try {
        const result = await this.bridge[this.module][this.method](...this.param)
        this.result = parse(result)
        print('Success:\n' + this.result)
      } catch (e) {
        print('Failure:\n' + parse(e))
      }
      this.bridge.setDebug(false)
    },
    callback () {
      this.result += '\n---------------\n'
      this.result += parse(arguments)
    }
  }
})
</script>
<style>
.v-example label {
  text-align: right;
  padding-right: 5px;
}
.v-example textarea,
.v-example pre {
  height: 120px;
  padding: 10px;
  resize: none;
  border: 1px solid #ddd;
  font-family: monospace;
  overflow: auto;
}
</style>
