<template>
  <div
    :class="last ? 'rounded-b-[10px]' : ''"
    class="flex flex-1 flex-row bg-black-19191A hover:bg-black-272728 items-center py-[24px] px-[34px] cursor-pointer"
  >
    <div
      class="flex flex-1 justify-start cursor-pointer"
      v-for="(item, index) in sequence"
      :key="index"
    >
      <div v-if="isTooltips.includes(sequence[index])">
        <el-tooltip effect="dark" :content="tooltipsData[item]" placement="top">
          <span
            :class="[item === 'time' ? 'text-gray-7D7D7E' : 'text-white']"
            class="text-white text-[14px] font-medium"
            >{{ (values && values[item]) || '-' }}
          </span>
        </el-tooltip>
      </div>
      <div v-else>
        <span
          :v-if="!isTooltips.includes(sequence[index])"
          :class="[item === 'time' ? 'text-gray-7D7D7E' : 'text-white']"
          class="text-white text-[14px] font-medium"
          >{{ values?.[item] }}
        </span>
      </div>
    </div>
  </div>
  <div
    v-show="!last"
    class="mx-[34px]"
    style="border-bottom: 1px solid #3b3b3c"
  />
</template>

<script setup lang="ts">
import { defineProps, ref, watchEffect } from 'vue'
import type { PropType } from 'vue'
import TableTypes from '../table'
const props = defineProps({
  sequence: Array as any,
  values: Object as PropType<TableTypes.tRow['values']>,
  last: Boolean,
})
// 需要加上tooltip的数据
const isTooltips = ['txnHash', 'from', 'to']
const tooltipsData = ref()

watchEffect(() => {
  tooltipsData.value = {
    txnHash: props.values?.txnHashTooltip,
    from: props.values?.fromTooltip,
    to: props.values?.toTooltip,
  }
})
</script>

<style lang="scss" scoped></style>
