
<import-sjs name="util" from="./debug.sjs"></import-sjs>

<!-- 对象 done -->
<template name="debug-object">
    <view class="debug-var debug-object {{unfold[util.objectPath(path)||''] ? 'unfold':''}}">
      <block a:if="{{!k}}">
        <text onTap="dump" data-path="{{`${path}`}}" class="icon">👉</text>{{k|| util.view(item) || '{}' }} 
      </block>
      <view class="children" a:for="{{util.map(item)}}" a:for-index="i" a:for-item="it">
          <block a:if="{{unfold[util.objectPath(path)||'']}}">
            <text onTap="dump" a:if="{{util.canIDump(it.value)}}" data-path="{{`${path}.${it.key}`}}" 
            class="icon {{unfold[util.objectPath(`${path}.${it.key}`)||'']?'un':''}} ">👉</text>
            
            {{it.key}} {{util.canIDump(it.value)? `:${util.view(it.value)}`: ':'}}

            <template is="{{`debug-${util.type(it.value)}`}}" data="{{item: it.value, k:it.key, path: `${path}.${it.key}`, unfold: unfold}}" />

          </block>
      </view>
    </view>
</template>
<!-- 数字 done -->
<template name="debug-number">
    <view class="debug-var debug-number">
    {{item}}
    </view>
</template>
<!-- 字符串 done -->
<template name="debug-string">
    <view class="debug-var debug-string">
    "<text>{{item}}</text>"
    </view>
</template>
<!-- 数组 done -->
<template name="debug-array">
    <view class="debug-var debug-array {{unfold[util.objectPath(path)||''] ? 'unfold':''}}">
      <block a:if="{{!k}}">
        <text onTap="dump" data-path="{{`${path}`}}" class="icon">👉</text>{{k|| util.view(item) || '[]' }} 
      </block>
      <block a:if="{{unfold[util.objectPath(path)||'']}}">
      <view class="children" a:for="{{item}}" a:for-index="i" a:for-item="it">
          
            <text onTap="dump" a:if="{{util.canIDump(it)}}" data-path="{{`${path}.${i}`}}" 
            class="icon {{unfold[util.objectPath(`${path}.${i}`)||'']?'un':''}} ">👉</text>
            
            {{i}} {{util.canIDump(it)? `:${util.view(it)}`: ':'}}

            <template is="{{`debug-${util.type(it)}`}}" data="{{item: it, k:i, path: `${path}.${i}`, unfold: unfold}}" />

      </view>
        <view class="children">
          length : <template is="debug-number" data="{{item: item.length, k:`length`, path: `${path}.length`, unfold: unfold}}" />
        </view>
      </block>

    </view>
</template>
<!-- 空null done-->
<!-- 注：Infinity undefined 也会被显示为null -->
<template name="debug-null">
    <view class="debug-var debug-null">
    null
    </view>
</template>
<!-- 未定义 undefined -->
<template name="debug-undefined">
    <view class="debug-var debug-undefined">
    undefined
    </view>
</template>
<!-- 布尔 done -->
<template name="debug-boolean">
    <view class="debug-var debug-boolean {{item?'true':'false'}}">
    {{item}}
    </view>
</template>
<!-- 方法 todo -->
<template name="debug-function">
    <view class="debug-var debug-function">
    {{item}} f
    </view>
</template>
<!-- 日期 todo -->
<template name="debug-var debug-date">
    <view>
    date: {{item}}
    </view>
</template>
<!-- 正则 todo -->
<template name="debug-var debug-regexp">
    <view>
    regexp: {{item}}
    </view>
</template>


<view class="debug {{visible?'show-debug':'hide-debug'}}" a:if="{{show}}">
  <movable-area>
    <movable-view class="btn" direction="all" onTap="switch" x="999" y="999">D</movable-view>
  </movable-area>

  <view class="panel">

    <view class="debug-hd">
    <text onTap="clear">Console</text> ({{log.length||0}})
    <view class="close" onTap="switch">×</view>
    </view>
    
    <view class="wrapper">
      <scroll-view scroll-y="1">
        <view class="log-line" a:for="{{log}}">
          <view class="log-var" a:for="{{item.var}}" a:for-index="i" a:for-item="it">
            <!-- <text onTap="dump" data-path="" class="icon">▲</text>{{it}}
            {{util.type(it)}} -->
            <template is="{{`debug-${util.type(it)}`}}" data="{{item: it,  path: `${index}.${i}`, unfold: item.unfolds[i] }}" />
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>