<template>
  <div class="eth-record-container">
    <el-form>
      <div :span="12">
        <el-form :inline="true" :model="queryForm" @submit.prevent style="padding: 20px;">
          <!--          <el-form-item>-->
          <!--            <el-input-->
          <!--              v-model.trim="queryForm.title"-->
          <!--              clearable-->
          <!--              placeholder="请输入标题"-->
          <!--            />-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button :icon="Search" type="primary" @click="queryData">
              查询
            </el-button>
            <el-button :icon="Plus" type="primary" @click="exportExcel">
              导出Excel
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-form>

    <el-table v-loading="listLoading" :data="list">
      <el-table-column
        align="center"
        label="交易哈希"
        prop="tx"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="金额"
        prop="amount"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        align="center"
        label="链名称"
        prop="chain"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="转换后的数量"
        prop="conversionAmount"
        show-overflow-tooltip
        width="110"
      />
      <el-table-column
        align="center"
        label="位数"
        prop="decimals"
        show-overflow-tooltip
        width="60"
      />
      <el-table-column
        align="center"
        label="发送地址"
        prop="fromAddress"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="通知地址"
        prop="notifyUrl"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="时间"
        prop="timesTamp"
        show-overflow-tooltip
        width="160"
      />
      <el-table-column
        align="center"
        label="接收地址"
        prop="toAddress"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="合约地址"
        prop="tokenContract"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="Token名称"
        prop="tokenName"
        show-overflow-tooltip
        width="90"
      />
      <el-table-column
        align="center"
        label="状态"
        prop="statusText"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        show-overflow-tooltip
        width="70"
      >
        <template #default="{ row }">
          <el-button type="text" @click="trigger(row)">通知</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :layout="layout"
      :page-size="queryForm.size"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <Trigger ref="triggerRef" />
  </div>
</template>

<script>
  import { defineComponent, onMounted, reactive, toRefs } from 'vue'
  import { Delete, Plus, Search } from '@element-plus/icons'
  import { getNotifyList } from '@/apis/address'
  import moment from 'moment'
  import Trigger from './components/Trigger'
  import { exportExcel } from '@/utils/excel'

  export default defineComponent({
    name: 'TronRecord',
    components: { Trigger },
    setup() {
      const state = reactive({
        triggerRef: null,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          page: 1,
          size: 20,
          coin_type: 'tron',
        },
      })

      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const handleSizeChange = (val) => {
        state.queryForm.size = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.page = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.page = 1
        fetchData()
      }
      const trigger = (row) => {
        state.triggerRef.show(row)
      }
      const fetchData = async () => {
        state.listLoading = true
        try {
          const {
            data: { list, count },
          } = await getNotifyList(state.queryForm)
          list.forEach((v) => {
            v.statusText = v.status === 0 ? '未处理' : '已处理'
            v.timesTamp = moment(v.timesTamp * 1000).format(
              'YYYY-MM-DD HH:mm:ss'
            )
          })
          state.list = list
          state.total = count
        } catch (e) {
          console.log(e)
        }
        state.listLoading = false
      }
      const _exportExcel = async () => {
        if (state.list.length === 0) {
          return
        }

        exportExcel(
          [
            [
              '交易哈希',
              '金额',
              '链名称',
              '转换后的数量',
              '位数',
              '发送地址',
              '通知地址',
              '时间',
              '接收地址',
              '合约地址',
              'Token名称',
              '状态',
            ],
            ...state.list.map((e) => [
              e.tx,
              e.amount,
              e.chain,
              e.conversionAmount,
              e.decimals,
              e.fromAddress,
              e.notifyUrl,
              e.timesTamp,
              e.toAddress,
              e.tokenContract,
              e.tokenName,
              e.statusText,
            ]),
          ],
          'tron_record'
        )
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        setSelectRows,
        trigger,
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
        exportExcel: _exportExcel,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>
