<template name="container">
  <div class="{styles.search}">
    <div class="{styles.main}">
      <p class="{styles.headtitle}"  #show={!flagSerchShow}>JD Chain</p>
      <div class="{styles.action}">
        <div class="{styles.bg}">
          <span class="{styles.title}">输入搜索:</span>
          <ant-Input class="{styles.input}" value="{searchParamInput}" onChange={onChangeInput}/>
          <ant-Button  class="{styles.btn}" icon="search" onClick={Search}>搜索</ant-Button>
        </div>
      
      </div>
      <div class="{styles.summary}"  #show={!flagSerchShow}>
        <router-Link to='Block' class="{styles.link}">
          <div class="{styles.tabs} {styles.blockHeight}">
            <div class="{styles.span}">
              <div class="{styles.left}">
                <p class="{styles.title}">
                
                  区块高度
              
                </p>
                {scientificCount(search.blockHeight || 0)}
              </div>
              <div class="{styles.right}">
                <div class="{styles.logo} {styles.logoBH}">
                
                </div>
              </div>
            </div>
          </div>
        </router-Link>
        <div class="{styles.link}">
          <div class="{styles.tabs} {styles.transactions}">
            <div class="{styles.span}">
              <div class="{styles.left}">
                <p class="{styles.title}">交易总数</p>
                {scientificCount(search.transactionTotal || 0)}
              </div>
              <div class="{styles.right}">
                <div class="{styles.logo} {styles.logoTR}">
                
                </div>
              </div>
            </div>
          </div>
        </div>
        <router-Link to='user' class="{styles.link}">
          <div class="{styles.tabs} {styles.users}">
            <div class="{styles.span}">
              <div class="{styles.left}">
                <p class="{styles.title}">用户总数</p>
                {scientificCount(search.userTotal || 0)}
              </div>
              <div class="{styles.right}">
                <div class="{styles.logo} {styles.logoUS}">
                
                </div>
              </div>
            </div>
          </div>
        </router-Link>
        <router-Link to='account' class="{styles.link}">
          <div class="{styles.tabs} {styles.ledgers}">
            <div class="{styles.span}">
              <div class="{styles.left}">
                <p class="{styles.title}">数据账户总数</p>
                {scientificCount(search.dataLedgersTotal || 0)}
              </div>
              <div class="{styles.right}">
                <div class="{styles.logo} {styles.logoLE}">
                
                </div>
              </div>
            </div>
          </div>
        </router-Link>
        <!-- 事件账户总数，暂时以数据账户代替 -->
        <router-Link to='event' class="{styles.link}">
          <div class="{styles.tabs} {styles.ledgers}">
            <div class="{styles.span}">
              <div class="{styles.left}">
                <p class="{styles.title}">事件账户总数</p>
                {scientificCount(search.dataEventTotal || 0)}
              </div>
              <div class="{styles.right}">
                <div class="{styles.logo} {styles.logoLE}">
                
                </div>
              </div>
            </div>
          </div>
        </router-Link>
        <router-Link to='contract' class="{styles.link}">
          <div class="{styles.tabs} {styles.contracts}">
            <div class="{styles.span}">
              <div class="{styles.left}">
                <p class="{styles.title}">合约总数</p>
                {scientificCount(search.contractTotal || 0)}
              </div>
              <div class="{styles.right}">
                <div class="{styles.logo} {styles.logoCO}">
                
                </div>
              </div>
            </div>
          </div>
        </router-Link>
      </div>
      <div class="{styles.list}" #show={resultShow}>
        <div class="{styles.listdesc}">
          找到相关的
          <span>{search.blockData.length}</span>个区块，
          <span>{search.txsData.length}</span>个交易，
          <span>{search.txsData.length}</span>条交易内容，
          <span>{search.usersData.length}</span>条用户数据，
          <span>{search.accountsData.length}</span>条数据账户，
          <span>{search.eventData.length}</span>条事件账户，
          <span>{search.contractsData.length}</span>条合约数据
        </div>
        <ant-Tabs>
          <ant-TabPane tab="全部" key='0'>
            <#if {{search.allData.length > 0}}>
              <!-- 区块 -->
              <#each {{search.blockData}}>
                <article key={@index} class="{styles.option}">
                  <p class="{styles.title}">
                    <span>区块哈希：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(hash)}"  onClick="{showBlock}"></span>
                    <span>区块高度：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(height)}"></span>
                  </p>
                </article>
              </#each>
              <!-- 交易 -->
              <#each {{search.txsData}}>
                <article key={@index} class="{styles.option}">
                  <p class="{styles.title}">
                    <span>交易哈希：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(hash)}" onClick={onShowBlockDetails}></span>
                    <span>区块高度：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(block_height)}"></span>
                    <span>执行状态：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(execution_state)}"></span>
                  </p>
                </article>
              </#each>
              <!-- 用户数据 -->
              <#each {{search.usersData}}>
              <article key={@index} class="{styles.option}">
                <p class="{styles.title}">
                  <span>用户地址：</span>
                  <span :dangerouslySetInnerHTML="{__html: highLIght(address)}"></span>
                  <span>用户公钥：</span>
                  <span :dangerouslySetInnerHTML="{__html: highLIght(pubKey)}"></span>
                  <span>用户公钥算法：</span>
                  <span :dangerouslySetInnerHTML="{__html: tranBase58(pubKey)}"></span>
                </p>
              </article>
            </#each>
              <!-- 数据账户 -->
              <#each {{search.accountsData}}>
              <article key={@index} class="{styles.option}">
                <p class="{styles.title}">
                  <span>数据账户地址：</span>
                  <span :dangerouslySetInnerHTML="{__html: highLIght(address)}"></span>
                  <span>数据账户公钥：</span>
                  <span :dangerouslySetInnerHTML="{__html: highLIght(pubKey)}"></span>
                  <span>数据账户公钥算法：</span>
                  <span :dangerouslySetInnerHTML="{__html: tranBase58(pubKey)}"></span>
                  <span>默克尔树根哈希</span>
                  <span><AccountRootHash address={address}/></span>
                </p>
              </article>
            </#each>
              <!-- 事件账户 -->
              <#each {{search.eventData}}>
              <article key={@index} class="{styles.option}">
                <p class="{styles.title}">
                  <span>事件账户地址：</span>
                  <span :dangerouslySetInnerHTML="{__html: highLIght(address)}"></span>
                  <span>事件账户公钥：</span>
                  <span :dangerouslySetInnerHTML="{__html: highLIght(pubKey)}"></span>
                  <span>事件账户公钥算法：</span>
                  <span :dangerouslySetInnerHTML="{__html: tranBase58(pubKey)}"></span>
                </p>
              </article>
            </#each>
              <!-- 合约数据 -->
              <#each {{search.contractsData}}>
                <article key={@index} class="{styles.option}">
                  <p class="{styles.title} {styles.nocur}">
                    <span>合约地址：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(address)}"></span>
                    <span>合约公钥：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(pubKey) }"></span>
                    <span>合约公钥算法：</span>
                    <span :dangerouslySetInnerHTML="{__html: tranBase58(pubKey) }"></span>
                  </p>
                </article>
              </#each>

              <#else>
                暂无数据  
              </#else>
              <div style="padding: 30px 0; text-align: right" hidden>
                <ant-Pagination showQuickJumper  total={search.total}/>
              </div>
            </#if>
          </ant-TabPane>
          <ant-TabPane tab="区块" key='1'>
            <#if {{search.blockData.length > 0}}>
              <#each {{search.blockData}}>
                <article key={@index} class="{styles.option}">
                  <p class="{styles.title}">
                    <span>区块哈希：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(hash)}"  onClick="{showBlock}"></span>
                    <span>区块高度：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(height)}"></span>
                  </p>
                </article>
              </#each>
              <#else>
                暂无数据  
              </#else>
              <div style="padding: 30px 0; text-align: right" hidden>
                <ant-Pagination showQuickjumper={true} hideOnSinglePage={true} defaultCurrent={2} total={{search.total}}/>
              </div>
            </#if>
          </ant-TabPane>
          <ant-TabPane tab="交易" key='2'>
            <#if {{search.txsData.length > 0}}>
               <#each {{search.txsData}}>
                <article key={@index} class="{styles.option}">
                  <p class="{styles.title}">
                    <span>交易哈希：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(hash)}" onClick={onShowBlockDetails}></span>
                    <span>区块高度：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(block_height)}"></span>
                    <span>执行状态：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(execution_state)}"></span>
                  </p>
                </article>
              </#each>
              <div style="padding: 30px 0; text-align: right">
                <ant-Pagination showQuickjumper={true} hideOnSinglePage={true} defaultCurrent={2} total={{search.total}}/>
              </div>
              <#else>
                暂无数据  
              </#else>
            </#if>
          </ant-TabPane>
          <ant-TabPane tab="合约" key='3'>
            <#if {{search.contractsData.length > 0}}>
              <#each {{search.contractsData}}>
               <article key={@index} class="{styles.option}">
                  <p class="{styles.title}">
                    <span>合约地址：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(address)}"></span>
                    <span>合约公钥：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(pubKey) }"></span>
                    <span>合约公钥算法：</span>
                    <span :dangerouslySetInnerHTML="{__html: tranBase58(pubKey) }"></span>
                  </p>
                </article>
              </#each>
              <div style="padding: 30px 0; text-align: right">
                <ant-Pagination showQuickjumper={true} hideOnSinglePage={true} defaultCurrent={2} total={{search.total}}/>
              </div>
              <#else>
                暂无数据  
              </#else>
            </#if>
          </ant-TabPane>
          <ant-TabPane tab="数据账户" key='4'>
            <#if {{search.accountsData.length > 0}}>
               <#each {{search.accountsData}}>
                <article key={@index} class="{styles.option}">
                 <p class="{styles.title}">
                    <span>数据账户地址：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(address)}"></span>
                    <span>数据账户公钥：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(pubKey)}"></span>
                    <span>数据账户公钥算法：</span>
                    <span :dangerouslySetInnerHTML="{__html: tranBase58(pubKey)}"></span>
                  </p>
                </article>
              </#each>
              <div style="padding: 30px 0; text-align: right">
                <ant-Pagination showQuickjumper={true} hideOnSinglePage={true} defaultCurrent={2} total={{search.total}}/>
              </div>
              <#else>
                暂无数据  
              </#else>
            </#if>
          </ant-TabPane>
          <ant-TabPane tab="事件账户" key="5">
            <#if {{search.eventData.length > 0}}>
              <#each {{search.eventData}}>
                <article key={@index} class="{styles.option}">
                  <p class="{styles.title}">
                    <span>事件账户地址：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(address)}"></span>
                    <span>事件账户公钥：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(pubKey)}"></span>
                    <span>事件账户公钥算法：</span>
                    <span :dangerouslySetInnerHTML="{__html: tranBase58(pubKey)}"></span>
                  </p>
                </article>
              </#each>
              <div style="padding: 30px 0; text-align: right">
                <ant-Pagination showQuickjumper={true} hideOnSinglePage={true} defaultCurrent={2} total={{search.total}}/>
              </div>
              <#else>
                暂无数据  
              </#else>
            </#if>
          </ant-TabPane>
          <ant-TabPane tab="用户" key='6'>
           <#if {{search.usersData.length > 0}}>
              <#each {{search.usersData}}>
                <article key={@index} class="{styles.option}">
                  <p class="{styles.title}">
                    <span>用户地址：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(address)}"></span>
                    <span>用户公钥：</span>
                    <span :dangerouslySetInnerHTML="{__html: highLIght(pubKey)}"></span>
                     <span>用户公钥算法：</span>
                    <span :dangerouslySetInnerHTML="{__html: tranBase58(pubKey)}"></span>
                  </p>
                </article>
              </#each>
              <div style="padding: 30px 0; text-align: right">
                <ant-Pagination showQuickjumper={true} hideOnSinglePage={true} defaultCurrent={2} total={{search.total}}/>
              </div>
              <#else>
                暂无数据  
              </#else>
            </#if>
          </ant-TabPane>
        </ant-Tabs>     
      </div>
      <div class="{styles.nav}"  #show={navShow}>
        <label onClick={gobackResult} style=" cursor: pointer;">搜索结果</label>  >  <span>区块详情</span>
      </div>
      <div  #show={blockShow} >
          <BlockInfo key={123} txCount={block.txCount} transactionList={block.transactionList} blockinfo={block.blockInformation} />      
        </div> 
         <TransactionInfo key="123" data={transactioninfoData} visible={show} onClose={onClose}/> 
    </div>
  </div>
</template>

