<template>
  <div class="c-address mx-3.5 flow-root">
    <m-chain-search class="mt-3.5"></m-chain-search>
    <m-address-overview
      class="mt-5"
      :balance="balance"
      :selectedValue="selectedExecer"
      :optionsList="execerOptionsList"
      :handleSelectChange="(v) => (selectedExecer = v)"
      :frozen="frozen"
    ></m-address-overview>
    <div
      class="rounded-twoPx shadow-shadow1 bg-white"
      style="margin-top: 15px;"
    >
      <m-tabs
        :focusedTab="focusedTab"
        :setFocusedTab="($event) => (focusedTab = $event)"
        :tabList="tabList"
      ></m-tabs>
      <div v-if="focusedTab === 'txRecord'">
        <div>
          <Select
            :selectedValue="selectedTxRecordFilterValue"
            :optionList="txRecordFilterOptionList"
            @change="(v) => (selectedTxRecordFilterValue = v)"
          ></Select>
        </div>
        <!-- <div class="bg-white text-text-color pl-3.5"> -->
        <!-- {{ $t('lang.trade.txTotal', [total1]) }} -->
        <!-- ({{ $t('lang.trade.tip2') }}) -->
        <!-- </div> -->
        <m-tx-item
          v-for="(n, i) in txRecordList"
          :style="{
            'border-bottom-left-radius':
              i === txRecordList.length - 1 ? '2px' : 'none',
            'border-bottom-right-radius':
              i === txRecordList.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>
      <div v-if="focusedTab === 'votingRecord'">
        <vote-pack-table
          v-for="(v, i) in voteList"
          :key="i"
          :height="v.height"
          :timeBlock="v.time"
          :sender="v.sender"
          :txHash="v.hash"
          :rewardAmount="v.reward"
          type="vote"
        ></vote-pack-table>
      </div>
      <div v-if="focusedTab === 'packingRecord'">
        <m-vote-pack
          v-for="(n, i) in packList"
          :key="i"
          :height="n.height"
          :timeBlock="n.time"
          :sender="n.sender"
          :txHash="n.hash"
          :rewardAmount="n.reward"
          type="pack"
        ></m-vote-pack>
      </div>
    </div>
    <m-page-container
      v-if="focusedTab === 'txRecord'"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
      :simple="false"
      :currentPage="pages.currentPage"
      :pageSize="pages.pageSize"
      :total="pages.total"
      class="mt-5"
    ></m-page-container>
    <m-page-container
      v-if="focusedTab === 'votingRecord'"
      @pageChange="pageChange2"
      @sizeChange="sizeChange2"
      :simple="false"
      :currentPage="pages2.currentPage"
      :pageSize="pages2.pageSize"
      :total="pages2.total"
      class="mt-5"
    ></m-page-container>
    <m-page-container
      v-if="focusedTab === 'packingRecord'"
      @pageChange="pageChange3"
      @sizeChange="sizeChange3"
      :simple="false"
      :currentPage="pages3.currentPage"
      :pageSize="pages3.pageSize"
      :total="pages3.total"
      class="mt-5"
    ></m-page-container>
  </div>
</template>
<script lang="ts">
import MChainSearch from '@/components/mobile/m-chainSearch.vue'
import MTabs from '@/components/mobile/m-tabs.vue'
import MPageContainer from '@/components/mobile/m-pageContainer.vue'
import MVotePack from '@/components/mobile/m-vote-pack.vue'
import address from '@/mixin/address'
import VueTypedMixins from 'vue-typed-mixins'
import MAddressOverview from './components/m-address-overview/index.vue'
import MTxItem from '@/components/mobile/m-txItem.vue'
import Select from '@/components/pc/Select.vue'

export default VueTypedMixins(address).extend({
  components: {
    MChainSearch,
    MAddressOverview,
    MTabs,
    MPageContainer,
    MVotePack,
    Select,
    MTxItem,
  },
})
</script>
<style lang="scss" scoped>
.c-address {
  padding-top: 44px;
  padding-bottom: 23px;
}
</style>
