<template>
  <div class="eth-address-container">
    <el-form>
      <div :span="12">
        <el-form :inline="true" :model="queryForm" @submit.prevent style="padding: 20px;">
          <el-form-item>
            <el-button :icon="Search" type="primary" @click="queryData">
              查询
            </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" :row-class-name="status2RowClassName">
      <el-table-column align="center" label="Uuid" prop="uuid" show-overflow-tooltip width="100"/>
      <el-table-column align="center" label="用户id" prop="userId" show-overflow-tooltip width="70"/>
      <el-table-column align="center" label="名称" prop="name" show-overflow-tooltip width="80"/>
      <el-table-column align="center" label="币种" prop="coinType" show-overflow-tooltip width="80"/>
      <el-table-column align="center" label="代币简称" prop="tokenSymbol" show-overflow-tooltip width="80"/>
      <el-table-column align="center" label="提现地址" prop="withdrawalAddress" show-overflow-tooltip width="80"/>
      <el-table-column align="center" label="提现数量" prop="withdrawalAmount" show-overflow-tooltip width="80"/>
      <el-table-column align="center" label="提现状态" prop="withdrawalStatusText" show-overflow-tooltip width="80">
        <template #default="{ row }">
          <i :class="[row.statusIcon]"></i>
          <span>{{ row.withdrawalStatusText }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="提现时间" prop="withdrawalTime" show-overflow-tooltip width="150"/>
      <el-table-column align="center" label="备注" prop="withdrawalRemark" show-overflow-tooltip width="100"/>
      <el-table-column align="center" label="转出地址" prop="withdrawalOutAddress" show-overflow-tooltip width="80"/>
      <el-table-column align="center" label="操作员地址" prop="operatorAddress" show-overflow-tooltip width="100"/>
      <el-table-column align="center" label="错误信息" prop="errorText" show-overflow-tooltip width="80"/>
      <el-table-column align="center" label="提现交易id" prop="withdrawalTxid" show-overflow-tooltip width="90"/>
      <el-table-column align="center" label="代币合约地址" prop="tokenContract" show-overflow-tooltip width="150"/>
      <el-table-column align="center" label="代币精度" prop="tokenDecimals" show-overflow-tooltip width="100"/>
      <el-table-column align="center" label="代币名称" prop="tokenName" show-overflow-tooltip width="80"/>
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        show-overflow-tooltip
        width="100"
      >
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(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 { exportExcel }                                  from '@/utils/excel';
import { getWithdrawalLog }                             from "../../../apis/address";
import moment                                           from "moment";
import Trigger                                          from "./components/Trigger";

export default defineComponent( {
  name       : 'WithdrawalLog',
  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,
      },
    } );

    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 handleEdit          = ( row ) => {
      state.triggerRef.show( row );
    };
    const fetchData           = async () => {
      state.listLoading = true;
      try {
        const {
                data : { list, count },
              }           = await getWithdrawalLog( state.queryForm );
        const status2Text = {
          0 : '申请中',
          1 : '提现中',
          2 : '提现成功',
          3 : '提现失败',
        };
        const status2Icon = {
          0 : 'el-icon-message-solid',
          1 : 'el-icon-loading',
          2 : 'el-icon-success',
          3 : 'el-icon-error',
        };
        list.forEach( ( v ) => {
          v.statusIcon           = status2Icon[ v.withdrawalStatus ];
          v.withdrawalStatusText = status2Text[ v.withdrawalStatus ];
          v.withdrawalTime       = moment( v.withdrawalTime * 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(
        [
          ['address', 'key', 'alias'],
          ...state.list.map( ( e ) => [e.address, e.key, e.alias] ),
        ],
        'eth_address'
      );
    };
    const status2RowClassName = ( row ) => {
      return {
        0 : '',
        1 : 'withdraw-ing',     // #E6A23C
        2 : 'withdraw-success', // #67C23A
        3 : 'withdraw-fail',    // #F56C6C
      }[ row.withdrawalStatus ];
    };
    onMounted( async () => {
      fetchData();
    } );

    return {
      ...toRefs( state ),
      setSelectRows,
      handleEdit,
      handleSizeChange,
      handleCurrentChange,
      queryData,
      status2RowClassName,
      fetchData,
      exportExcel : _exportExcel,
      Delete,
      Plus,
      Search,
    };
  },
} );
</script>
<style>
.el-table .withdraw-ing {
  background: oldlace;
}

.el-table .withdraw-success {
  background: rgb(227, 253, 215);
}

.el-table .withdraw-fail {
  background: #fdd2d2;
}
</style>
