<template>
  <div class="c-trade mx-4">
    <m-chain-search class="mt-3.5"></m-chain-search>
    <m-page-container
      @pageChange="pageChange"
      @sizeChange="sizeChange"
      :currentPage="pages.currentPage"
      :pageSize="pages.pageSize"
      :total="pages.total"
      class="mt-5"
    ></m-page-container>
    <div class="shadow-shadow1 mt-3.5 rounded-twoPx rounded-b-twoPx">
      <m-title
        :style="{
          'border-bottom-left-radius': '2px',
          'border-bottom-right-radius': '2px',
        }"
        :title="`${$t('lang.trade.title')}(${pages.total}${$t(
          'lang.trade.count',
        )})`"
      ></m-title>
      <m-tx-item
        v-for="(n, i) in txList"
        :style="{
          'border-bottom-left-radius': i === txList.length - 1 ? '2px' : 'none',
          'border-bottom-right-radius':
            i === txList.length - 1 ? '2px' : 'none',
        }"
        :key="i"
        :tradeG="n.tradeG"
        :row="n"
        :blockTime="n.block_time"
        :amount="n.amount"
        :txHash="n.hash"
        :from="n.from"
        :to="n.to"
        :status="n.success"
      ></m-tx-item>
    </div>
    <m-page-container
      :simple="false"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
      :currentPage="pages.currentPage"
      :pageSize="pages.pageSize"
      :total="pages.total"
      class="mt-5"
    ></m-page-container>
  </div>
</template>
<script lang="ts">
import VueTypedMixins from 'vue-typed-mixins'
import tradeMixin from '@/mixin/trade'
import MBlockItem from '@/components/mobile/m-blockItem.vue'
import mChainSearch from '@/components/mobile/m-chainSearch.vue'
import MPageContainer from '@/components/mobile/m-pageContainer.vue'
import MTitle from '@/components/mobile/m-title.vue'
import MTxItem from '@/components/mobile/m-txItem.vue'
export default VueTypedMixins(tradeMixin).extend({
  components: { mChainSearch, MPageContainer, MTitle, MBlockItem, MTxItem },
})
</script>
<style lang="scss" scoped>
.c-trade {
  padding-top: 44px;
  border-radius: 2px;
  padding-bottom: 23px;
}
</style>
