<template>
  <div class="hero-right">
    <div class="bg"></div>
    <div class="container">
      <div class="left-img">
        <img src="" alt="" />
      </div>
      <div class="chip-left">
        <div class="chip-tab-left">
          <div class="chip-item">
            <div class="bg">
              <img
                class="hill-icon-img"
                width="169px"
                src="../../assets/market/chip-item-bg.png"
                alt=""
              />
            </div>
          </div>
          <div class="chip-item">
            <div class="bg">
              <img
                class="hill-icon-img"
                width="169px"
                src="../../assets/market/chip-item-bg.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <!-- <div class="left-content"></div> -->
        <div class="chip-tab-right">
          <div class="chip-item">
            <div class="bg">
              <img
                class="hill-icon-img"
                width="169px"
                src="../../assets/market/chip-item-bg.png"
                alt=""
              />
            </div>
          </div>
          <div class="chip-item">
            <div class="bg">
              <img
                class="hill-icon-img"
                width="169px"
                src="../../assets/market/chip-item-bg.png"
                alt=""
              />
            </div>
          </div>
          <div class="chip-item">
            <div class="bg">
              <img
                class="hill-icon-img"
                width="169px"
                src="../../assets/market/chip-item-bg.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <div class="chip-right">
        <div class="chip-right-top">
          <div class="token-lable">TOKEN ID</div>
          <div class="token-id">#3006985843100103</div>
        </div>
        <div class="chip-right-bottom">
          <div class="chip-assult">
            <div class="owner">
              <div class="owner-content">
                <div>Owner :</div>
                <div>0x21cE………e1a4</div>
              </div>
              <div class="owner-mint">
                <div>Mint Time :</div>
                <div>2022-12-31 23:59:59 UTC</div>
              </div>
              <div class="owner-history">
                <div>History :</div>
                <div>#3006985843100103 (NFTLink)</div>
              </div>
            </div>
            <div class="def-content">
              <div class="def-item">
                <div>DEF PCT</div>
                <div>+8%</div>
              </div>
              <div class="def-item">
                <div>DEF PCT</div>
                <div>+7.2%</div>
              </div>
              <div class="def-item" style="justify-content: center">
                Unlocked at Lv.5
              </div>
              <div class="def-item">LUCKY Unlocked at Lv.5</div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="buy-price">
        <div class="price"><span class="price-number">9999.99</span></div>
        <div>
          <a href="javascript:void(0)">
            <img
              width="263px"
              height="71px"
              src="../../assets/market/hero/buy.png"
              alt="aoi-hero"
          /></a>
        </div>
      </div> -->
    </div>

    <!-- <span @click="closeTip" class="close">
      <img
        src="../../assets/market/hero/cose.png"
        width="56px"
        height="56px"
        alt=""
    /></span> -->
  </div>
</template>

<script>
export default {
  props: ["hero", "isTab"],
  components: {},
  data() {
    return {
      piece: "",
    };
  },
  methods: {
    closeTip() {
      // 分发自定义事件(事件名: closeTip)
      this.$emit("closeTip", false);
    },
    showTip() {
      this.$emit("showTip", true);
    },
    closeMyself() {},
    init(data) {
      this.dialogVisible = true;
      this.piece = data;
      console.log(data, "dfgdg");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog,
.el-pager li {
  position: relative;
  width: 1354px !important;
  height: 775px !important;
  background: url("../../assets/market/piece/details/bg.png") no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
}
::v-deep .el-dialog__body {
  padding: 0px 0px !important;
}
::v-deep .el-dialog__header {
  padding: 0px 0px 0px;
}

.contaier {
  display: flex;
}
.close {
  position: absolute;
  cursor: pointer;
  right: -46px;
  top: -31px;
}
.container {
  display: flex;

  .chip-left {
    position: relative;
    margin-left: 88px;
    // margin-top: 137px;
    display: flex;
    margin-right: 51px;
    .left-content {
      width: 232px;
    }
    .chip-tab-left {
      position: absolute;
      right: 198px;
      margin-left: 96px;
      margin-top: 129px;
      .chip-item {
        width: 252px;
        display: flex;
        height: 238px;
        background: url("../../assets/market/chip-bg.png") no-repeat;
        background-size: 100% 100%;
        .bg {
          margin-left: 33px;
          margin-top: 54px;
        }
      }
    }
    .chip-item {
      width: 252px;
      height: 238px;
      display: flex;
      background: url("../../assets/market/chip-bg.png") no-repeat;
      background-size: 100% 100%;
      .bg {
        margin-left: 33px;
        margin-top: 53px;
      }
    }
  }
  .chip-right {
    width: 431px;
    margin-top: 24px;
  }
  .chip-right-top {
    color: #ffffff;
    // margin-left: 137px;
    width: 431px;
    margin: 0 auto;
    .token-lable {
      text-align: center;
      font-size: 46px;
      font-weight: bold;
      color: #ffffff;
    }
    .token-id {
      font-size: 36px;
      font-family: "Bahnschrift";
      font-weight: bold;
      color: #ffffff;
      width: 398px;
      height: 66px;
      margin: 0 auto;
      line-height: 66px;
      text-align: center;
      margin-bottom: 26px;
      background: #28c1ed;
      border: 4px solid rgba(91, 211, 246, 0.4);
      border-radius: 24px;
    }
  }
  .chip-right-bottom {
    display: flex;
  }
  .chip-assult {
  }
  .owner {
    width: 428px;
    height: 147px;
    background: rgba(5, 57, 68, 0.3);
    border-radius: 14px;
    padding-top: 30px;
    padding-left: 25px;
    font-size: 21px;
    font-weight: bold;
    color: #ffffff;
  }
  .assult-rifle {
    width: 431px;
    height: 263px;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    background: rgba(5, 57, 68, 0.3);
    border-radius: 20px;
  }
  .assult-rifle-name {
    margin-top: 20px;
    margin-left: 20px;
    height: 26px;
    font-size: 37px;
    // font-family: "SairaStencilOne";
    color: #ffffff;
  }

  .hill-icon {
    margin-top: 14px;
    margin-right: 14px;
    .hill-icon-img {
    }
  }
  .assult-rifle-content {
    display: flex;
    justify-content: space-between;
  }
  .level {
    margin-top: 23px;
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
    .level-number {
      font-size: 41px;
      font-style: italic;
      margin-left: 4px;
      color: #ffffff;
    }
    .piece-number {
      font-size: 29px;
      margin-right: 24px;
      font-family: "Bahnschrift";
      font-weight: bold;
      line-height: 52px;
      color: #ffffff;
    }
    .level-name {
      font-size: 31px;
      font-family: "Bahnschrift";
      font-weight: bold;
      color: #ffffff;
      margin-left: 5px;
    }
  }
}
.owner-content {
  display: flex;
  justify-content: space-between;
  margin-right: 25px;
}
.owner-mint {
  display: flex;
  margin-top: 20px;
  margin-right: 25px;
  justify-content: space-between;
}
.owner-history {
  display: flex;
  margin-top: 20px;
  margin-right: 25px;
  justify-content: space-between;
}

// .buy-price {
//   position: absolute;
//   right: 44px;
//   bottom: -33px;
//   display: flex;
//   .price {
//     width: 201px;
//     height: 71px;
//     font-size: 32px;
//     position: relative;
//     font-family: "Arciform";
//     margin-right: 20px;
//     color: #ffffff;
//     background: url("../../assets/market/hero/price.png") no-repeat;
//     background-size: 100% 100%;
//     .price-number {
//       position: absolute;
//       right: 19px;
//       top: 13px;
//       font-size: 34px;
//       // right: 82px;
//       // bottom: -41px;
//     }
//   }
// }
.left-img {
  width: 802px;
}
.def-content {
  width: 428px;
  padding-top: 25px;
  padding-left: 15px;
  padding-right: 15px;
  height: 265px;
  background: rgba(5, 57, 68, 0.3);
  border-radius: 14px;
  margin-top: 25px;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  .def-item {
    width: 369px;
    height: 48px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 14px;
    padding-right: 18px;
    padding-left: 19px;
  }
}
</style>
