<template>
  <div>
    <div class="container" @click="HeroDialog(data)">
      <!-- <div class="no-sale">
        <div class="for-rent">
          <div class="for-rent-img">
            <img
              width="205px"
              src="../../../assets/market/hero/for-rent.png"
              alt=""
            />
          </div>
         
        </div>
      </div> -->
      <div class="type-img" v-if="data.info !== null">
        <img
          v-if="data.info.is_genesis"
          class="img-item"
          src="../../../assets/market/hero/type-1.png"
          width="214px"
          alt=""
        />
        <img
          v-else
          width="214px"
          class="img-item"
          src="../../../assets/market/hero/type-0.png"
          alt=""
        />
        <div class="hero-img">
          <img
            v-if="data.item_id"
            width="214px"
            :src="require('@/assets/market/hero/' + data.item_id + '.png')"
            alt=""
          />
          <img
            v-if="data.c_id"
            width="214px"
            :src="require('@/assets/market/hero/' + data.c_id + '.png')"
            alt=""
          />
          <!-- <img width="214px" :src="data.details.image" alt="" /> -->
        </div>
        <div class="hero-name">
          {{ data.c_name ? data.c_name : data.detail.hero_name }}
        </div>
        <div class="gen" v-if="data.info !== null">
          <img
            width="42px"
            v-if="data.info.is_genesis"
            src="../../../assets/market/hero/gen.png"
            alt=""
          />
        </div>
      </div>
      <div class="info">
        <div class="info-level">
          Lv: <span class="level"></span>
          <span> {{ fillZero(levelNumber) }}</span>
          <span>{{ this.data.detail.quality }}</span>
        </div>

        <div class="level-img">
          <div
            class="level-levelList"
            v-if="this.data.detail.quality > 0 && this.data.detail.quality <= 5"
          >
            <div class="item-Image" v-for="(item, i) in firstOrder" :key="i">
              <div><img width="28px" :src="item.Image" alt="" /></div>
            </div>
          </div>
          <div
            class="level-levelList"
            v-else-if="
              this.data.detail.quality > 5 && this.data.detail.quality <= 10
            "
          >
            <div class="item-Image" v-for="(item, i) in secondOrder" :key="i">
              <div><img width="28px" :src="item.Image" alt="" /></div>
            </div>
          </div>
          <div class="level-levelList" v-else>
            <div class="item-Image" v-for="(item, i) in thirdOrder" :key="i">
              <div><img width="28px" :src="item.Image" alt="" /></div>
            </div>
          </div>
        </div>
      </div>

      <div class="lease-listing" v-if="isType == 'mynft'">
        <div class="rent"></div>
        <div class="sell">Sell</div>
      </div>
      <div class="sale" v-else>
        <div>
          <img width="40px" src="../../../assets/market/hero/icon.png" alt="" />
        </div>
        <div class="price">{{ data.s_price ? data.s_price : " " }}</div>
        <div>
          <a href="javascript:void(0)">
            <img
              width="78px"
              height="36px"
              src="../../../assets/market/hero/buy-mini.png"
              alt=""
          /></a>
        </div>
      </div>
    </div>
    <Herodialog
      :dialogVisible="dialogVisible"
      @on-close="HeroDialoghide"
      :isTab="isTab"
      :isType="isType"
      :type="type"
      :isBuy="isBuy"
      @handBuyShow="handBuyShow"
      @handBuyHide="handBuyHide"
      @closeTip="closeTip"
      @showTip="showTip"
      @on-click="HeroDialog"
      :isPiecePut="isPiecePut"
      @handPutShow="handPutShow"
      @handPutHide="handPutHide"
      :hero="data"
    ></Herodialog>
    <TheSellDialog
      :type="type"
      :isPiecePut="isPiecePut"
      :data="data"
      @handPutShow="handPutShow"
      @handPutHide="handPutHide"
    ></TheSellDialog>
    <TheBuyDialog
      :type="type"
      :isBuy="isBuy"
      :data="data"
      @handBuyShow="handBuyShow"
      @handBuyHide="handBuyHide"
    ></TheBuyDialog>
    <!-- <MosaicChipDialog
      ref="dialog"
      :data="data"
      :isTab="isTab"
      @closeTip="closeTip"
      @showTip="showTip"
    /> -->
  </div>
</template>
<script lang="ts">
interface DialogConfigtype {
  name: string;
  title: string;
  selHeader: boolean;
  drag: boolean;
  mask: boolean;
  maskClick: boolean;
  animationEnter: string;
  animationLeave: string;
  destroyTime: number;
}
import { Component, Prop, Vue } from "vue-property-decorator";
import Herodialog from "../Herodialog.vue";
import TheBuyDialog from "../TheBuyDialog.vue";
import TheSellDialog from "../TheSellDialog.vue";

@Component({
  name: "HeroNft",
  components: {
    Herodialog,
    TheSellDialog,
    TheBuyDialog,
  },
  props: ["data", "isType"],
})
export default class HeroNft extends Vue {
  //  @Prop() data
  // boxState = 'n'
  dialogVisible: boolean = false;
  isTab: boolean = false;
  isPiecePut: boolean = false;
  isBuy: boolean = false;
  type: string = "hero";
  // created() {
  //   console.log(this.data, "nftlist3sdfsadff");
  // }

  firstOrder = [
    { Image: require("@/assets/market/hero/star01.png") },
    { Image: require("@/assets/market/hero/star01.png") },
    { Image: require("@/assets/market/hero/star01.png") },
    { Image: require("@/assets/market/hero/star01.png") },
    { Image: require("@/assets/market/hero/star01.png") },
  ];
  firstOrder2 = [
    { Image: require("@/assets/market/hero/star01.png") },
    { Image: require("@/assets/market/hero/star01.png") },
    { Image: require("@/assets/market/hero/star01.png") },
    { Image: require("@/assets/market/hero/star01.png") },
    { Image: require("@/assets/market/hero/star01.png") },
  ];
  secondOrder = [
    { Image: require("@/assets/market/hero/star02.png") },
    { Image: require("@/assets/market/hero/star02.png") },
    { Image: require("@/assets/market/hero/star02.png") },
    { Image: require("@/assets/market/hero/star02.png") },
    { Image: require("@/assets/market/hero/star02.png") },
  ];
  thirdOrder = [
    { Image: require("@/assets/market/hero/star03.png") },
    { Image: require("@/assets/market/hero/star03.png") },
    { Image: require("@/assets/market/hero/star03.png") },
    { Image: require("@/assets/market/hero/star03.png") },
    { Image: require("@/assets/market/hero/star03.png") },
  ];

  fillZero(str: number | string) {
    var realNum;
    if (str < 10) {
      realNum = "0" + str;
    } else {
      realNum = str;
      console.log(realNum, "realNum");
    }
    return realNum;
  }
  closeTip(hide: boolean) {
    this.isTab = hide;
  }
  showTip(hide: boolean) {
    this.isTab = hide;
  }
  created() {
    // console.log(this.starList, "starList");
    if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
      this.firstOrder.splice(0, 5 - this.data.detail.quality);
      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
    } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
      console.log("2");
      this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
    } else {
      this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
    }
  }
  beforeUpdate(){
     if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
      this.firstOrder2.splice(0, 5 - this.data.detail.quality);
      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
    } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
      console.log("2");
      this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
    } else {
      this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
    }
  }
  // Update(){
  //    if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
  //     this.firstOrder2.splice(0, 5 - this.data.detail.quality);
  //     //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
  //   } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
  //     console.log("2");
  //     this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
  //   } else {
  //     this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
  //   }
  // }
  // get starList() {
  //   if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
  //     console.log('11111111111111',this.firstOrder.splice(0, 5 - this.data.detail.quality));

  //     return this.firstOrder.splice(0, 5 - this.data.detail.quality);
  //   } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
  //      console.log('2');
  //     return this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
  //   } else {
  //     return this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
  //   }
  // }

  get levelNumber() {
    return this.data.detail.hero_lv;
  }
  get qualityNumber() {
    return this.data.detail.quality;
  }
  HeroDialog(data: void) {
    // console.log(data.item_id+'我是英雄弹框');
    this.dialogVisible = true;
    console.log("-=--==--=", this.dialogVisible);
    // get cardBg() {
    //   if (this.nftData.isGenesis) {
    //     return require("@/assets/main/card/card_border_s.png");
    //   } else {
    //     return require("@/assets/main/card/card_border.png");
    //   }
    // }
  }

  HeroDialoghide(data: boolean) {
    this.dialogVisible = data;
  }
  handPutShow() {
    this.isPiecePut = true;
    console.log("");
  }
  handPutHide() {
    this.isPiecePut = false;
  }
  handBuyShow() {
    this.isBuy = true;
    console.log("99999999999999999");
  }
  handBuyHide() {
    this.isBuy = false;
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 256px;
  height: 374px;
  cursor: pointer;
  background: url("../../../assets/market/hero/hero-bg.png") no-repeat;
  background-size: contain;
  position: relative;
  .no-sale {
    position: absolute;
    left: 0;
    top: 0;
    width: 249px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 370px;
    background: #3c3c3c;
    border: 4px solid #cdd8fd;
    opacity: 0.8;
    z-index: 11;
    border-radius: 16px;
    .for-rent-img {
      margin-top: 100px;
      margin-bottom: 70px;
    }
    .for-rent-btn {
      display: flex;
      // margin-top: 170px;
      .adjust {
        width: 105px;
        height: 35px;
        // margin-left: 14px;
        background: url("../../../assets/market/hero/adjust.png") no-repeat;
        background-size: 100% 100%;
      }
      .remove {
        width: 105px;
        height: 35px;
        margin-left: 14px;
        background: url("../../../assets/market/hero/remove.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  // padding-top: 18px;
  .type-img {
    margin-top: 18px;
    margin-left: 18px;
    position: relative;
  }
  .img-item {
    margin-top: 18px;
  }
  .hero-img {
    position: absolute;
    left: 0px;
    bottom: 0px;
  }
  .hero-name {
    //  width: 46px;
    height: 24px;
    // max-width: 86px;
    line-height: 24px;
    padding-right: 14px;
    padding-left: 14px;
    background: url("../../../assets/market/hero/name-bg.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 23px;
    text-align: center;
    color: #fff;
    bottom: 6px;
  }
  .gen {
    position: absolute;
    left: 5px;
    top: 25px;
  }
  .info {
    display: flex;
    // justify-content: center;
    align-items: center;
    margin-top: 8px;
  }
  .info-level {
    color: #000;
    margin-left: 20px;
  }
  .level {
    font-size: 21px;
  }
  .level-img {
    display: flex;
  }
  .level-levelList {
    display: flex;
  }
  .item-Image {
    margin-left: 8px;
    display: flex;
  }
  .sale {
    display: flex;
    justify-content: space-between;
    margin-top: 13px;
    padding-left: 20px;
    padding-right: 20px;
    .price {
      font-size: 26px;
      font-family: Arciform;
      font-weight: 400;
      color: #454545;
    }
  }
  .lease-listing {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 11px;
    font-size: 24px;
    .rent {
      width: 105px;
      height: 40px;
      // text-align: center;
      // line-height: 40px;
      // color: #fff;
      // background: url("../../../assets/market/hero/rent-btn.png") no-repeat;
      // background-size: contain;
    }
    .sell {
      width: 105px;
      height: 40px;
      color: #fff;
      text-align: center;
      margin-left: 14px;
      line-height: 40px;
      background: url("../../../assets/market/hero/sell-btn.png") no-repeat;
      background-size: contain;
    }
  }
}
</style>
