<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">
              <ImgCard :nftData="nft" />
            </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">
            <div>
              {{ priceCalculated(event.amount, event.decimals) }}
            </div>
            <p>$ &nbsp; {{ (event.usd) }}</p>
          </div>
      </template>
      </a-table-column>
      <a-table-column  title="" data-index="event">
        <template  #default="{ text: event }">
          <div class="price-icon">
            <!-- <span>{{event}}</span> -->
            <img :src="event.icon" alt="">
          </div>
        </template>
      </a-table-column>
      <a-table-column title="Listing Time" data-index="event">
        <template  #default="{ text: event }">
          <div>
            {{ showTime(event.data.created_at) }}
          </div>
      </template>
      </a-table-column>
      <a-table-column title="Expiration Time" data-index="event">
        <template  #default="{ text: event }">
          <div>
            {{ showTime(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, toRaw, onMounted, inject } from "vue"
const message = inject('$message')
import ImgCard from "@/components/common/imgCard.vue"
import { priceCalculated, showTime } from "@/configs/priceCalculate"
import { BlockChain } from "@/components/chain/BlockChain"
const emit = defineEmits(['renewMyNft'])


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

// 取消出售
const eventNft = async (e) => {
  try {
    const bc = new BlockChain()
    let res = await bc.market.cancelOrder([e.data.id])
    if(res.result) {
      let timer = setTimeout(() => {
        message.success('Your item has been unlisted.')
        emit('renewMyNft')
        clearTimeout(timer);
      }, 2000);
    }
  } catch (e) {
    message.error('Your item has failed to be unlisted.')
  }
  
}

</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;
                    font-size: 24px;
                    &::before {
                      display: none;
                    }
                  }
                }
              }
              .ant-table-tbody {
                tr {
                  background: #16141b;
                  td {
                    border-color: #34354e;
                    background: #16141b !important;
                    vertical-align: middle;
                    >div {
                      text-align: center;
                      font-family: 'Poppins';
                      font-weight: 600;
                      font-size: 20px;
                      color: #F3F0FF;
                    }
                    .nft {
                      display: flex;
                      align-items: center;
                      justify-content: space-evenly;
                      .nft-img {
                        width: 213px;
                        height: 100%;
                        .card-img-common {
                          .img-top {
                            width: 60px;
                            height: 20px;
                            top: 10px;
                            left: 10px;
                            font-size: 14px;
                          }
                          .img-btm {
                            bottom: 15px;
                            left: 20px;
                            >div {
                              width: 58px;
                              height: 20px;
                              font-size: 12px;
                            }
                            div:nth-child(2) {
                              margin-left: 8px;
                            }
                          }
                        }
                      }
                      .nft-name {
                        width: 120px;
                        text-align: left;
                        margin-left: 20px;
                      }
                    }
                    .price {
                      font-weight: 400;
                      color: #BB7FFF;
                      position: relative;
                      div {
                        font-family: 'Anton';
                        font-size: 42px;
                      }
                      p {
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 100%;
                        font-family: 'Poppins';
                        font-size: 24px;
                      }
                    }
                    .price-icon {
                        width: 39px;
                        height: 39px;
                        margin-left: 10px;
                        img {
                          width: 100%;
                          height: 100%;
                        }
                      }
                    .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>