<template>
  <div class="container">
    <div
      class="list-content"
      v-for="(piece, i) in nftList"
      @click="showTip(piece)"
      :key="i"
    >
      <div class="no-sale" v-if="piece.o_link > 0 && isType == 'mynft'">
        <div class="for-rent">
          <div class="for-rent-img">
            <img
              width="205px"
              src="../../../assets/market/hero/no-sale.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="chip-bg">
        <img
          v-if="piece.detail"
          :src="
            require('@/assets/market/piece/' + piece.detail.token_id + '.png')
          "
          alt=""
        />
         <img
          v-else-if="piece.token_id"
          :src="
            require('@/assets/market/piece/' + piece.token_id + '.png')
          "
          alt=""
        />
        <span class="amount">{{
          piece.amount ? piece.amount : piece.balance
        }}</span>
      </div>
      <div class="level-content">
        <div class="level-lv">
          <!-- Lv <span class="level-number">{{ chip.detail.chip_grade }}</span> -->
        </div>
        <div class="tree-guard">
          {{ piece.c_name ? piece.c_name : piece.detail.name }}
        </div>
      </div>
      <div class="mynft-btn" v-if="isType == 'mynft'">
        <div class="t-icon" v-if="piece.o_link > 0 && isType == 'mynft'">
          <img src="../../../assets/market/chip/t-icon.png" alt="" />
        </div>
        <div class="price" v-if="piece.o_link > 0 && isType == 'mynft'">
          {{ formatPriceShow(piece.s_price, 18) }}
        </div>
        <div class="sell-btn">sell</div>
      </div>
      <div class="price-content" v-else>
        <div class="price-left">
          <div class="t-icon">
            <img src="../../../assets/market/chip/t-icon.png" alt="" />
          </div>
          <div class="price">{{ formatPriceShow(piece.s_price, 18) }}</div>
        </div>
        <div class="buy">
          <img src="../../../assets/market/chip/buy.png" alt="" />
        </div>
      </div>
    </div>
    <PieceModal
      v-if="isShow"
      ref="dialog"
      :isType="isType"
      @closeTip="closeTip"
      @showTip="showTip"
      :isPiecePut="isPiecePut"
      @handBuyShow="handBuyShow"
      @handPutShow="handPutShow"
      @handPutHide="handPutHide"
    ></PieceModal>
    <TheSellDialog
      :type="type"
      :isPiecePut="isPiecePut"
      v-if="currencyTypeList.length > 0 && isType == 'mynft'"
      :currencyTypeList="currencyTypeList"
      ref="selldialog"
      @handMessage="handMessage"
      @handMessageHide="handMessageHide"
      @handPutShow="handPutShow"
      @handPutHide="handPutHide"
    ></TheSellDialog>
    <TheBuyDialog
      :type="type"
      :isBuy="isBuy"
      ref="buydialog"
      @handMessage="handMessage"
      @handMessageHide="handMessageHide"
      @handBuyShow="handBuyShow"
      @handBuyHide="handBuyHide"
    ></TheBuyDialog>
    <MessageBox ref="message"></MessageBox>
  </div>
</template>

<script>
import PieceModal from "./PieceModal.vue";
import TheSellDialog from "./TheSellDialog.vue";
import TheBuyDialog from "./TheBuyDialog.vue";
import MessageBox from "./MessageBox.vue";
import { formatPrice } from "@/utils/chain.util";
export default {
  props: ["nftList", "isType", "currencyTypeList"],
  components: { MessageBox, PieceModal, TheSellDialog, TheBuyDialog },
  data() {
    return {
      isShow: false,
      isPiecePut: false,
      type: "piece",
      isBuy: false,
    };
  },

  methods: {
    chipDialoghide() {
      this.dialogVisible = false;
    },
    formatPriceShow(price, decimals, fixed = 2) {
      return formatPrice(price, decimals, fixed);
    },
    chipDialog() {
      this.dialogVisible = true;
    },
    handMessage() {
      this.$nextTick(() => {
        this.$refs.message.open(1);
      });
    },
    handMessageHide() {
      this.$nextTick(() => {
        this.$nextTick(() => {
          this.$refs.message.close();
        });
      });
    },
    showTip(data) {
      this.isShow = true;
      this.$nextTick(() => {
        this.$refs.dialog.init(data);
      });
    },
    closeTip() {
      this.isShow = false;
    },
    handPutShow(data) {
      this.isPiecePut = true;
      this.$nextTick(() => {
        this.$refs.selldialog.init(data);
      });
    },
    handPutHide() {
      this.isPiecePut = false;
    },
    handBuyShow(data) {
      this.isBuy = true;
      this.$nextTick(() => {
        this.$refs.buydialog.init(data);
      });
    },
    handBuyHide() {
      this.isBuy = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  width: 100%;
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  margin-top: 43px;
  margin-left: 72px;
  align-items: center;
  flex-wrap: wrap;
}
.list-content {
  display: flex;
  flex-direction: column;
  margin-right: 41px;
  width: 382px;
  height: 504px;
  padding-top: 35px;
  padding-left: 33px;
  padding-right: 33px;
  margin-bottom: 20px;
  background: url("../../../assets/mobile/market/chip/bg.png") no-repeat;
  background-size: contain;
  position: relative;
  .no-sale {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3c3c3c;
    border: 4px solid #cdd8fd;
    opacity: 0.8;
    z-index: 11;
    border-radius: 16px;
    .for-rent-img {
      margin-top: 100px;
      margin-bottom: 70px;
      width: 378px;
      img {
        width: 100%;
      }
    }
  }
}
.mynft-btn {
  display: flex;
  justify-content: flex-end;
  // margin-right: 39px;
  margin-top: 20px;
  .sell-btn {
    width: 189px;
    height: 62px;
    background: #2bcced;
    border: 4px solid #85eaff;
    font-size: 47px;
    text-align: center;
    // font-family: "Arciform";
    font-weight: 400;
    color: #ffffff;
    border-radius: 31px;
  }
}
.price-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 32px;
  margin-top: 20px;
}
.level-number {
  font-size: 43px;
  font-style: italic;
  color: #454545;
}
.level-lv {
  font-size: 37px;
  font-style: italic;
  color: #454545;
}
.t-icon {
  width: 59px;
  height: 59px;
  img {
    width: 59px;
    height: 59px;
  }
}
.price {
  font-size: 47px;
  font-family: "Arciform";
  font-weight: 400;
  color: #454545;
  margin-left: 7px;
  margin-right: 7px;
}
.price-left {
  display: flex;
}
.buy {
  width: 137px;
  height: 59px;
  cursor: pointer;
  img {
    width: 137px;
    height: 59px;
  }
}

.level-content {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  margin-left: 4px;
  .level-img {
    display: flex;
  }

  .level-levelList {
    display: flex;
    margin-left: 14px;
  }
  .item-Image {
    margin-left: 6px;
    display: flex;
  }
}
.chip-bg {
  width: 379px;
  height: 336px;
  margin-left: 4px;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  background: url("../../../assets/market/chip/bg-there.png") no-repeat;
  background-size: contain;
  img {
    width: 268px;
    height: 233px;
  }
  .amount {
    position: absolute;
    right: 19px;
    font-size: 41px;
    bottom: 15px;
  }
}
.tree-guard {
  font-size: 38px;
  font-family: "OPPOSans";
  font-weight: normal;
  color: #454545;
}
</style>
