<template>
  <div>
    <a-table :data-source="nftData" :pagination="false">
      <a-table-column title="NFT" data-index="nft" :width="400">
        <template  #default="{ text: nft }">
          <div class="nft">
            <div class="nft-img">
              <img :src="nft.image" alt="">
            </div>
            <div class="nft-name">{{ nft.name }}</div>
          </div>
      </template>
      </a-table-column>
      <a-table-column title="Price" data-index="event">
        <template  #default="{ text: event }">
          <div class="price">
            {{ event.data.buy[0].amount }}
          </div>
      </template>
      </a-table-column>
      <a-table-column title="Create time" data-index="event">
        <template  #default="{ text: event }">
          <div>
            {{ event.data.created_at }}
          </div>
      </template>
      </a-table-column>
      <a-table-column title="Expiry date" data-index="event">
        <template  #default="{ text: event }">
          <div>
            {{ event.data.end_at }}
          </div>
      </template>
      </a-table-column>
      <a-table-column  title="" data-index="event">
        <template  #default="{ text: event }">
          <div class="event-btn" @click="eventNft(event)">
            Off the shelves
          </div>
        </template>
      </a-table-column>
      
    </a-table>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { BlockChain } from "@/components/chain/BlockChain"

const props = defineProps({
  nftData: {
    type: Array,
    required: true,
  },
});

const eventNft = async (e) => {
  console.log(e.data.id)
  // return
  const bc = new BlockChain()
  let res = await bc.market.cancelOrder(e.data.id)
  console.log("---",res)
}


</script>

<style lang="scss" scoped>
div {
  :deep(.ant-table-wrapper) {
    .ant-spin-nested-loading {
      .ant-spin-container {
        .ant-table {
          color: #fff;
          background: #16141b;
          .ant-table-container {
            .ant-table-content {
              .ant-table-thead {
                tr {
                  th {
                    color: #B3B5DA;
                    background: #16141b;
                    border-color: #34354e;
                    text-align: center;
                    &::before {
                      display: none;
                    }
                  }
                }
              }
              .ant-table-tbody {
                tr {
                  background: #16141b;
                  td {
                    border-color: #34354e;
                    background: #16141b !important;
                    vertical-align: middle;
                    >div {
                      text-align: center;
                    }
                    .nft {
                      display: flex;
                      align-items: center;
                      justify-content: space-evenly;
                      .nft-img {
                        width: 213px;
                        height: 100%;
                        // display: none;
                        img {
                          width: 100%;
                          height: 100%;
                        }
                      }
                      .nft-name {
                        width: 120px;
                        text-align: left;
                        margin-left: 20px;
                      }
                    }
                    .price {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                    .event-btn {
                      width: 348px;
                      margin: 0 auto;
                      height: 57px;
                      line-height: 57px;
                      background: #FF6271;
                      border-radius: 12px;
                      font-family: 'Poppins';
                      font-weight: bold;
                      font-size: 28px;
                      cursor: pointer;
                    }
                    
                  }
                  &:hover {
                    background: #16141b !important;
                    td {
                      background: #16141b !important;
                    }
                    .ant-table-cell-row-hover {
                      background: #16141b !important;
                    }
                    .ant-table-cell {
                      background: #16141b !important;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>