<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"
      v-for="(item, index) in sequence"
      :key="index"
    >
      <div
        :class="
          item === 'smartContract'
            ? 'bg-gray-303031 px-[12px] py-[4px] rounded-[4px]'
            : ''
        "
      >
        <span
          v-if="item !== 'result'"
          :class="colorSequence[index] || 'text-white'"
          class="text-[14px] font-medium"
          @click="handleClick(link?.[index])"
        >
          {{ values[item] }}
        </span>
        <div
          v-else
          class="px-[12px] py-[4px] rounded-[4px] w-[87px] flex flex-row items-center"
          :class="values.isSuccess ? 'bg-green-2EAA7D' : 'bg-red-C4403E'"
        >
          <Icons
            :url="values.isSuccess ? 'check_circle' : 'cancel'"
            :size="12"
          />
          <span
            :class="colorSequence[index] || 'text-white'"
            class="text-[12px] font-medium ml-[2px]"
            >{{ values[item] }}
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    v-if="!last"
    class="mx-[34px]"
    style="border-bottom: 1px solid #3b3b3c"
  />
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import TableTypes from '../table'
import Icons from '@src/components/icons/index.vue'
import { useRouter } from 'vue-router'
const props = defineProps({
  sequence: {
    type: Array as PropType<TableTypes.tRow['sequence']>,
    required: true,
  },
  values: {
    type: Object as PropType<TableTypes.tRow['values']>,
    required: true,
  },
  colorSequence: {
    type: Array as PropType<TableTypes.tRow['colorSequence']>,
    required: true,
  },
  link: Array,
  last: Boolean,
})
const router = useRouter()
const handleClick = (route: any) => {
  route && router.replace(`/${route}/${props.values.txnContractAddress}`)
}
</script>

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