<template>
  <div class="tron-address-container">
    <el-form>
      <div :span="12">
        <el-form :inline="true" @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="fetchData">
              查询
            </el-button>
            <el-button :icon="Plus" type="primary" @click="handleEdit">
              添加
            </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="network"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="链ID"
        prop="chainId"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="代币符号"
        prop="symbol"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="RPC URL"
        prop="rpcUrl"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="精度"
        prop="decimals"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="区块浏览器"
        prop="browser"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="代币合约地址"
        prop="contract"
        show-overflow-tooltip
      />
    </el-table>
    <edit ref="editRef" @add-data="addToken" />
  </div>
</template>

<script>
  import { defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue'
  import { Delete, Plus, Search } from '@element-plus/icons'
  import Edit from './components/TokenAdd'
  import { getTokenData, saveTokenData } from '@/apis/token'
  import { exportExcel } from '@/utils/excel'

  export default defineComponent({
    name: 'EthTokenList',
    components: { Edit },
    setup() {
      const state = reactive({
        editRef: null,
        list: [],
        listLoading: true,
      })

      const handleEdit = (row) => {
        if (row.id) {
          state.editRef.showEdit(row)
        } else {
          state.editRef.showEdit()
        }
      }
      const fetchData = async () => {
        state.listLoading = true
        state.list = await getTokenData('eth')
        state.listLoading = false
      }
      const addToken = async (row) => {
        try {
          state.list.push(Object.assign({}, row))
          await saveTokenData()
          state.editRef.close()
        } catch (e) {
          console.log(e)
        }
        state.listLoading = false
      }

      const _exportExcel = async () => {
        if (state.list.length === 0) {
          return
        }

        exportExcel(
          [
            [
              '网络名称',
              '链ID',
              '代币符号',
              'RPC URL',
              '精度',
              '区块浏览器',
              '代币合约地址',
            ],
            ...state.list.map((e) => [
              e.network,
              e.chainId,
              e.symbol,
              e.rpcUrl,
              e.decimals,
              e.browser,
              e.contract,
            ]),
          ],
          'eth_token'
        )
      }
      onMounted(() => {
        fetchData()
      })
      return {
        ...toRefs(state),
        handleEdit,
        fetchData,
        addToken,
        exportExcel: _exportExcel,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>
