<template>
  <el-dialog
    title="转账明细"
    :visible.sync="open"
    width="80%"
    @open="reloadDta"
    @close="closeDialog"
  >
    <el-table
      v-loading="loading"
      :data="wmTransferItemList"
      @cell-dblclick="handleCellDblClick"
    >
      <!-- <el-table-column
        label="代币地址"
        align="center"
        prop="tokenAddress"
        :show-overflow-tooltip="true"
      /> -->

      <el-table-column
        label="网络"
        width="150"
        prop="networkName"
        align="center"
      />
      <el-table-column
        label="代币名称"
        width="80"
        prop="tokenName"
        align="center"
      />
      <el-table-column
        label="来源地址"
        align="center"
        prop="fromAddress"
        :show-overflow-tooltip="true"
      /><el-table-column
        label="目标地址"
        align="center"
        prop="toAddress"
        :show-overflow-tooltip="true"
      /><el-table-column
        label="代币数量"
        align="center"
        prop="amount"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        label="类型"
        align="center"
        prop="type"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ typeFormat(scope.row) }}
        </template> </el-table-column
      ><el-table-column
        label="类型值"
        align="center"
        prop="typeValue"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        label="私钥"
        align="center"
        prop="privateKey"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="交易hash"
        prop="hash"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          {{ statusFormat(scope.row) }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-popconfirm
            class="delete-popconfirm"
            title="确认要修改吗?"
            confirm-button-text="修改"
            @confirm="handleUpdate(scope.row)"
          >
            <el-button
              slot="reference"
              v-permisaction="['admin:wmTransferItem:edit']"
              size="mini"
              type="text"
              icon="el-icon-edit"
              >修改
            </el-button>
          </el-popconfirm>
          <el-popconfirm
            class="delete-popconfirm"
            title="确认要删除吗?"
            confirm-button-text="删除"
            @confirm="handleDelete(scope.row)"
          >
            <el-button
              slot="reference"
              v-permisaction="['admin:wmTransferItem:remove']"
              size="mini"
              type="text"
              icon="el-icon-delete"
              >删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageIndex"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </el-dialog>
</template>

<script>
import { listWmTransferItem } from '@/api/admin/wm-transfer-item'

export default {
  name: 'TransferItemDetail',
  props: {
    open: {
      type: Boolean,
      default: false
    },
    transferId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      wmTransferItemList: [],
      typeOptions: [
        {
          label: '百分比',
          value: 1
        },
        {
          label: '实际金额',
          value: 2
        }
      ],
      transferTypeOptions: [
        {
          label: '批量转出',
          value: 1
        },
        {
          label: '批量汇总',
          value: 2
        }
      ],
      statusOptions: [
        {
          label: '默认',
          value: 0
        },
        {
          label: '交易中',
          value: 1
        },
        {
          label: '已完成',
          value: 2
        },
        {
          label: '已失败',
          value: 3
        }
      ],
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        type: undefined,
        idOrder: 'desc'
      },
      total: 0,
      loading: false
    }
  },
  methods: {
    reloadDta() {
      this.getList()
    },
    typeFormat(row) {
      const type = this.typeOptions.find((item) => item.value === row.type)
      return type ? type.label : ''
    },
    transferTypeFormat(row) {
      const transferType = this.transferTypeOptions.find(
        (item) => item.value === row.transferType
      )
      return transferType ? transferType.label : ''
    },
    statusFormat(row) {
      const status = this.statusOptions.find(
        (item) => item.value === row.status
      )
      return status ? status.label : ''
    },
    /** 查询参数列表 */
    getList() {
      this.queryParams.transferId = this.transferId
      this.loading = true

      listWmTransferItem(this.addDateRange(this.queryParams, this.dateRange))
        .then((response) => {
          this.wmTransferItemList = response.data.list
          this.total = response.data.count
        })
        .finally(() => {
          this.loading = false
        })
    },
    closeDialog() {
      this.wmTransferItemList = []
      this.total = 0
      this.queryParams = {
        pageIndex: 1,
        pageSize: 10,
        type: undefined,
        idOrder: 'desc'
      }

      this.$emit('update:open', false)
    },
    // 取消
    cancel() {
      this.wmTransferItemList = []
      this.total = 0
      this.queryParams = {
        pageIndex: 1,
        pageSize: 10,
        type: undefined,
        idOrder: 'desc'
      }

      this.$emit('update:open', false)
    },
    handleCellDblClick(row, column, cell, event) {
      // 获取单元格文本内容
      const cellText = row[column.property]

      // 检查 navigator.clipboard 是否可用
      if (!navigator.clipboard) {
        this.$message.error('您的浏览器不支持剪贴板 API，请尝试手动复制。')
        return // 结束函数执行，避免出错
      }

      // 使用 Clipboard API 复制文本
      navigator.clipboard
        .writeText(cellText)
        .then(() => {
          this.$message.success('已复制到剪贴板: ' + cellText)
        })
        .catch((err) => {
          console.error('复制失败:', err)
          this.$message.error('复制失败: ' + err.message) // 显示更详细的错误信息
        })
    }
  }
}
</script>

<style scoped></style>
