<template>
  <div class="flex flex-col py-[16px]" @click="handleClick">
    <div class="flex flex-1 flex-row max-w-[255px] items-center">
      <Icons url="info" :size="14" />
      <p class="ml-[7px] text-gray-BBB text-[14px] font-normal">{{ title }}</p>
    </div>
    <div class="flex flex-1 flex-row justify-start items-center mt-[15px]">
      <div
        :class="valueColor || 'text-white'"
        class="text-[15px] font-normal break-all"
      >
        <div v-if="title === 'Tokens Transferred'">
          <div
            class="flex flex-col pl-[20px]"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="flex flex-1 flex-row items-center mt-[15px]">
              <p class="text-gray-BBB text-[14px] font-normal">
                {{ item }}
              </p>
            </div>
            <p class="text-[15px] font-normal text-blue-65B5FF break-all">
              <span>
                {{ listData[item] }}
                <Icons
                  v-if="isCopy"
                  url="filter_none"
                  :size="24"
                  class="ml-[10px] inline"
                />
              </span>
            </p>
          </div>
        </div>
        <div
          v-if="title === 'Result'"
          class="flex flex-row items-center rounded-[4px] px-[12px] py-[4px] min-w-[87px]"
          :class="value === 'Success' ? 'bg-green-2EAA7D' : 'bg-red-C4403E'"
        >
          <Icons
            :url="value === 'Success' ? 'check_circle' : 'cancel'"
            :size="12"
          />
          <span class="ml-[2px] text-[12px]">
            {{ value }}
          </span>
        </div>
        <span v-if="title !== 'Result' && title !== 'Tokens Transferred'">
          {{ value }}
          <div @click="handleCopy">
            <Icons
              v-if="isCopy"
              url="filter_none"
              :size="24"
              class="ml-[10px] inline"
            />
          </div>
        </span>
      </div>
    </div>
  </div>
  <div style="border-bottom: 1px solid #3b3b3c" />
</template>

<script setup lang="ts">
import Icons from '@src/components/icons/index.vue'
import { ElMessage } from 'element-plus'
import { ref, watchEffect } from 'vue'
import useClipboard from 'vue-clipboard3'
import { useRouter } from 'vue-router'

const props = defineProps({
  title: String,
  value: [String, Object] as any,
  valueColor: String,
  isCopy: Boolean,
  link: String,
})
const list = ref<string[]>([])
const listData = ref<any>({})

const { toClipboard } = useClipboard()

const handleCopy = async () => {
  const value = props.value?.toString() || ''
  try {
    await toClipboard(value)
    ElMessage({
      message: 'copy success!',
      type: 'success',
    })
  } catch (error) {
    console.log(error)
  }
}

watchEffect(() => {
  if (typeof props.value === 'object') {
    let data = props.value[0]
    let forValue
    list.value = ['Form', 'To', 'For']
    if (data.tokenType === 'ERC721') {
      forValue = parseInt(data.tokenId)
    }
    // 赋值
    listData.value = {
      Form: props.value[0]?.from,
      To: props.value[0]?.to,
      For: forValue,
      symbol: props.value[0]?.symbol,
    }
  }
})

const router = useRouter()
const handleClick = () => {
  router.replace(`/${props.link}/${props.value}`)
}
</script>

<style scoped></style>
