<template>
  <v-card elevation="1">
    <!-- 顶部组件 -->
    <Top :query='query' :page='page' :table='table'></Top>

    <!-- 中间表格组件 -->
    <Table :query='query' :page='page' :table='table'></Table>
  </v-card>
</template>

<script>
import Top from '@/components/viewer/Top'
import Table from '@/components/viewer/Table'
import EthMev from '@/plugins/model/EthMev'

export default {
  name: 'Pending',
  components: {Top, Table},
  data: () => ({
    query: {
      block: '',
      hash: '',
      dataVague: '',
      autoFlushTime: 0
    },
    page: {
      name: 'Pending Page'
    },
    table: {
      search: '',
      loading: false,
      groupBy: 'block',
      groupDesc: false,
      sortBy: ['block', 'gasPrice', 'pending'],
      sortDesc: [false, true, false],
      pageSize: 200,
      pageNum: 1,
      data: [],
      headers: [
        {text: "Option", value: 'option'},
        {text: 'Block', value: 'block'},
        {text: 'Hash', value: 'hash', width: '10%'},
        {text: 'From', value: 'from'},
        {text: 'To', value: 'to'},
        {text: 'GasPrice', value: 'gasPrice'},
        {text: 'Type', value: 'type'},
        {text: 'Index', value: 'index'},
        {text: 'State', value: 'state'},
        {text: 'Mev', value: 'mev'},
        {text: 'Pending', value: 'pending'},
        {text: 'TradeInfo', value: 'tradeInfo'},
        {text: 'memo', value: 'memo'}
      ]
    }
  }),
  methods: {
    // 获取数据
    async generateTableData() {
      this.table.loading = true
      this.table.data.length = 0

      const rst = await EthMev.getEthMevPendingData(this.query.block, this.query.hash, this.query.dataVague,
          this.table.pageNum, this.table.pageSize)

      if (rst.state) {
        EthMev.generateTableDataByDbData(rst.data)
        this.table.data = rst.data
        this.$msgkit.success(rst.msg)
      } else {
        this.$msgkit.error(rst.msg)
      }

      this.table.loading = false
    }
  },
  provide() {
    return {
      generateTableData: this.generateTableData
    }
  },
  async mounted () {
    await this.generateTableData()
  }
}
</script>
