<template>
  <div class="wmassageMask" v-show="detailVisible" @touchmove.prevent>
    <div class="messageMaskContent content">
      <div>
        <div class="weapon-bg"></div>
        <div class="hero-details-info">
          <img
          :src="require('@/assets/market/weapon/gun-details_' + weapon.gunid + '.png')"
            alt="aoi-hero"
          />
        </div>
        <div class="hero-details">
          <img
            src="../../../assets/market/hero/hero-details_01.png"
            alt="aoi-hero"
          />
        </div>
        <div class="hero-bottom">
          <div class="hero-right-token">
            <div class="token-name">TOKEN ID</div>
            <div class="token-id">#3006985843100103</div>
            <div class="hill">
              <div class="hill-content">
                <div class="hill-name">Assult Rifle<span class="name">Name</span></div>
                <div class="hill-icon">
                  <img
                    width="34px"
                    src="../../../assets/market/hero/hill-icon.png"
                    alt=""
                  />
                </div>
              </div>

              <div class="star">
                <div class="level-img">
                  <div
                    class="level-levelList"
                    v-if="weapon.level > 0 && weapon.level <= 5"
                  >
                    <div
                      class="item-Image"
                      v-for="(item, i) in levelList.firstOrder"
                      :key="i"
                    >
                      <div class="star-img">
                        <img :src="item.Image" alt="" />
                      </div>
                    </div>
                  </div>
                  <div
                    class="level-levelList"
                    v-else-if="weapon.level > 5 && weapon.level <= 10"
                  >
                    <div
                      class="item-Image"
                      v-for="(item, i) in levelList.secondOrder"
                      :key="i"
                    >
                      <div class="star-img">
                        <img :src="item.Image" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="level-levelList" v-else>
                    <div
                      class="item-Image"
                      v-for="(item, i) in levelList.thirdOrder"
                      :key="i"
                    >
                      <div class="star-img">
                        <img :src="item.Image" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="level">
                <div>
                  <span class="level-lable">Lv</span>
                  <span class="level-number">08</span>
                </div>
                <div class="lucky-value">
                  <div class="lucky-img">
                    <img
                      src="../../../assets/market/hero/lucky-img.png"
                      alt=""
                    />
                  </div>
                  <div>
                    <div class="lucky-text">Lucky</div>
                    <div class="lucky-boder"></div>
                    <div class="lucky-number">9999</div>
                  </div>
                </div>
              </div>
              <div class="numerical-value aggressivity">
                <div class="numerical-left aggressivity-left">
                  <img
                    src="../../../assets/market/hero/aggressivity.png"
                    alt=""
                  />
                </div>
                <div class="numerical-right">
                  <div class="progress">
                    <el-progress
                      :text-inside="true"
                      :show-text="false"
                      color="#FFFFFF"
                      define-back-color="#C1C1C1"
                      :stroke-width="4"
                      :width="242"
                      :percentage="80"
                      status="warning"
                    ></el-progress>
                  </div>
                  <div class="progress-number">999.99/999.99</div>
                </div>
              </div>
              <div class="numerical-value defense">
                <div class="numerical-left defense-left">
                  <img src="../../../assets/market/hero/defense.png" alt="" />
                </div>
                <div class="numerical-right">
                  <div class="progress">
                    <el-progress
                      :text-inside="true"
                      :show-text="false"
                      :width="242"
                      color="#FFFFFF"
                      define-back-color="#C1C1C1"
                      :stroke-width="4"
                      :percentage="80"
                      status="warning"
                    ></el-progress>
                  </div>
                  <div class="progress-number">999.99/999.99</div>
                </div>
              </div>
              <div class="numerical-value lightning">
                <div class="numerical-left lightning-left">
                  <img src="../../../assets/market/hero/lightning.png" alt="" />
                </div>
                <div class="numerical-right">
                  <div class="progress">
                    <el-progress
                      :text-inside="true"
                      :show-text="false"
                      color="#FFFFFF"
                      :width="242"
                      define-back-color="#C1C1C1"
                      :stroke-width="4"
                      :percentage="80"
                      status="warning"
                    ></el-progress>
                  </div>
                  <div class="progress-number">999.99/999.99</div>
                </div>
              </div>
            </div>
          </div>
          <div class="hero-right-hp">
            <div class="hero-hp">
              <div class="hero-item hero-item-hp">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/hero/attack.png" alt="" />
                  </div>
                  <div>ATTACK</div>
                </div>
                <div>9999</div>
              </div>
              <div class="hero-item hero-item-attack">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/weapon/range.png" alt="" />
                  </div>
                  <div>RANGE</div>
                </div>
                <div>1234.56</div>
              </div>

              <div class="hero-item hero-item-def">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/weapon/rate.png" alt="" />
                  </div>
                  <div>REAT</div>
                </div>
                <div>1234.56</div>
              </div>
              <div class="hero-item hero-item-cri">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/weapon/clip.png" alt="" />
                  </div>
                  <div>CLIP</div>
                </div>
                <div>99.99%</div>
              </div>
              <div class="hero-item hero-item-criDam">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/weapon/reload.png" alt="" />
                  </div>
                  <div>RELOAD</div>
                </div>
                <div>99.99%</div>
              </div>
              <div class="hero-item hero-item-dodge">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/hero/cri.png" alt="" />
                  </div>
                  <div>CRITICAL</div>
                </div>
                <div>99.99%</div>
              </div>
              <div class="hero-item hero-item-reduces">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/hero/criDam.png" alt="" />
                  </div>
                  <div>RUDUCE</div>
                </div>
                <div>99.99%</div>
              </div>
             
              <div class="hero-item hero-item-speed">
                <div class="item">
                  <div class="item-img">
                    <img   src="../../../assets/market/weapon/brain.png" alt="" />
                  </div>
                  <div> BRAIN LIFE PCT</div>
                </div>
                <div>6</div>
              </div>
              <div class="hero-item hero-item-speed">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/weapon/bulletSpeed.png" alt="" />
                  </div>
                  <div>BULLET SPEED</div>
                </div>
                <div>6</div>
              </div>
            </div>
            <div class="hp-bottom">
              <div class="userinfo">
                <div>Owner:</div>
                <div>0x21cE………e1a4</div>
              </div>

              <div class="userinfo">
                <div>Mint Time:</div>
                <div>2022-12-31 23:59:59 UTC</div>
              </div>

              <div class="userinfo">
                <div>History:</div>
                <div>#3006...0103 (NFTLink)</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="buy-price">
        <div class="price"><span class="price-number">9999.99</span></div>
        <div class="buy-img">
          <a href="">
            <img src="../../../assets/market/hero/buy.png" alt="aoi-hero"
          /></a>
        </div>
      </div>
      <span @click="closeTip" class="close">
        <img src="../../../assets/market/hero/cose.png" alt="" />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "HeroModal",
  data() {
    return {
      detailVisible: false,
      weapon: "",
      levelList: {
        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") },
        ],
        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") },
        ],
      },
    };
  },
  created() {
    console.log(this.hero, "hero");
  },
  methods: {
    closeTip() {
      // 分发自定义事件(事件名: closeTip)
      this.$emit("closeTip");
    },
    init(data) {
      this.detailVisible = true;
      this.weapon = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.wmassageMask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(20, 28, 34, 0.6);
  z-index: 9999;
  .content {
    position: relative;
    .close {
      width: 62px;
      height: 62px;
      position: absolute;
      cursor: pointer;
      right: 36px;
      top: 58px;
      img {
        width: 100%;
      }
    }
  }
  .weapon-bg {
    position: absolute;
    left: 50px;
    top: 44px;
    width: 968px;
    height: 646px;
    background: url("../../../assets/mobile/market/weson/weapon-bg.png")
      no-repeat;
    background-size: contain;
  }
  .hero-details-info {
    position: absolute;
    top: 24%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 968px;
    height: 646px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 755px;
      height: 301px;
    }
  }
  .hero-details {
    width: 930px;
    margin: 0 auto;
    height: 790px;
    text-align: center;
    display: flex;
    justify-content: center;
    opacity: 0;
    img {
      width: 100%;
    }
  }
  .messageMaskContent {
    position: absolute;
    top: 252px;
    left: 26px;
    width: 1026px;
    height: 1648px;
    background: url("../../../assets/mobile/market/modal-bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .hero-bottom {
    display: flex;
    margin-left: 39px;
    .hero-right-token {
      width: 402px;

      color: #ffffff;

      .token-name {
        text-align: center;
        margin-top: 25px;
        font-size: 34px;
        margin-bottom: 11px;
        font-weight: bold;
        font-weight: bold;
        color: #ffffff;
      }
      .token-id {
        width: 402px;
        height: 41px;
        font-size: 34px;
        font-weight: bold;
        color: #ffffff;
        line-height: 49px;
        text-align: center;
        margin-bottom: 32px;
        background: #28c1ed;
        border: 4px solid rgba(91, 211, 246, 0.4);
        border-radius: 24px;
      }
      .hill {
        width: 395px;
        height: 569px;
        margin-top: 31px;
        background: url("../../../assets/market/hero/hill-bg.png") no-repeat;
        background-size: 100% 100%;
        .hill-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 15px;
          margin-left: 32px;
          margin-right: 24px;
          // margin-top: 30px
          margin-bottom: 26px;
        }
        .hill-icon {
          width: 36px;
          height: 36px;
          img {
            width: 100%;
          }
        }
        .hill-name {
          font-size: 53px;
          //
          position: relative;
          color: #ffffff;
        }
        .progress {
          margin-top: 19px;
        }
        .progress-number {
          font-size: 20px;

          font-style: italic;
          color: #ffffff;
        }
        .name {
          font-size: 19px;
          position: absolute;
          left: -27px;
          bottom: -21px;
          // font-family: "OPPOSans";
          font-weight: normal;
          color: #ffffff;
          margin-left: 33px;
        }
        .star {
          width: 344px;
          height: 67px;
          background: rgba(255, 255, 255, 0.2);
          // opacity: 0.2;
          border-radius: 30px;
          margin-left: 23px;
          margin-top: 19px;
          margin-bottom: 20px;
          .level-img {
            width: 100%;
            height: 100%;
          }
        }
        .level-levelList {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .level {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 22px;
          margin-left: 32px;
          .level-lable {
            font-size: 44px;
            font-style: italic;
            color: #ffffff;
            margin-right: 9px;
          }
          .level-number {
            font-size: 51px;
            font-style: italic;

            color: #ffffff;
          }
        }
        .lucky-value {
          width: 174px;
          height: 64px;
          background: rgba(249, 140, 23, 0.7);
          display: flex;
          padding-left: 4px;
          align-items: center;
          border-radius: 29px;
        }
        .lucky-img {
          width: 57px;
          height: 57px;
          background: rgba(250, 178, 100, 0.8);
          display: flex;
          justify-content: center;
          align-items: center;
          line-height: 50px;
          margin-right: 5px;
          border-radius: 50%;
          img {
            width: 45px;
            height: 45px;
          }
        }
        .lucky-text {
          font-size: 4px;
          white-space: nowrap;
          font-style: italic;
          color: #ffffff;
          line-height: 23px;
        }
        .lucky-number {
          font-size: 22px;
          font-style: italic;
          color: #ffffff;
          line-height: 33px;
        }
        .numerical-value {
          width: 345px;
          height: 73px;
          margin: 0 auto;
          display: flex;
          margin-top: 18px;
          margin-bottom: 14px;
          border-radius: 12px;
          .numerical-left {
            width: 61px;
            height: 63px;
            margin-top: 5px;
            margin-left: 6px;
            border-radius: 10px;
            text-align: center;
            img {
              width: 100%;
              height: 50px;
              margin-top: 9px;
            }
          }
          .numerical-right {
            margin-left: 16px;
            width: 242px;
          }
        }
        .lightning {
          background: rgba(81, 194, 224, 0.7);
        }
        .lightning-left {
          background: #7dd6ff;
          border-radius: 10px;
        }
        .aggressivity {
          background: rgba(184, 77, 204, 0.7);
        }
        .aggressivity-left {
          background: #ca61dc;
          border-radius: 10px;
        }
        .defense {
          background: rgba(193, 168, 93, 0.7);
        }
        .defense-left {
          background: #d0bd7a;
          border-radius: 10px;
        }
        .lucky-boder {
          width: 100px;
          height: 2px;
          background: linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0.1) 90%,
            rgba(255, 255, 255, 0) 100%
          );
          border-radius: 1px;
        }
      }
    }
    .hero-right-hp {
      margin-left: 28px;
      .hero-hp {
        width: 464px;
        height: 523px;
        background: rgba(5, 57, 68, 0.3);
        padding-top: 29px;
        padding-left: 35px;
        padding-right: 31px;
        border-radius: 20px;
        .hero-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 27px;
          font-family: "Bahnschrift";
          font-weight: bold;
          color: #ffffff;
          .item {
            display: flex;
            font-size: 27px;
            font-family: "Bahnschrift";
            font-weight: bold;
            color: #ffffff;
            .item-img {
              width: 36px;
              height: 36px;

              margin-right: 26px;
              img {
                width: 100%;
              }
            }
          }
        }
        .hero-item-hp {
          margin-bottom: 17px;
        }
        .hero-item-attack {
          margin-bottom: 17px;
        }
        .hero-item-def {
          margin-bottom: 17px;
        }
        .hero-item-cri {
          margin-bottom: 17px;
        }
        .hero-item-criDam {
          margin-bottom: 17px;
        }
        .hero-item-dodge {
          margin-bottom: 17px;
        }
        .hero-item-reduces {
          margin-bottom: 17px;
        }
        .hero-item-speed{
          margin-bottom: 17px;
        }
      }

      .hp-bottom {
        width: 490px;
        // height: 143px;
        font-size: 25px;
        padding-bottom: 3px;
        font-family: "Bahnschrift";
        font-weight: bold;
        color: #ffffff;
        margin-top: 13px;
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 18px;
        background: rgba(5, 57, 68, 0.3);
        border-radius: 20px;
        .userinfo {
          display: flex;
          margin-bottom: 12px;
          justify-content: space-between;
        }
      }
    }
  }
  .buy-price {
    position: absolute;
    left: 96px;
    bottom: -41px;
    display: flex;
    .price {
      width: 283px;
      height: 100px;
      font-size: 48px;
      position: relative;
      color: #ffffff;
      background: url("../../../assets/market/hero/price.png") no-repeat;
      background-size: contain;
      .price-number {
        position: absolute;
        right: 35px;
        top: 20px;
        // right: 82px;
        // bottom: -41px;
      }
    }
    .buy-img {
      margin-left: 31px;
      width: 523px;
      height: 100px;
      img {
        width: 523px;
        height: 100px;
      }
    }
  }
}
.star-img {
  width: 47px;
  height: 45px;
  margin-right: 16px;
  img {
    width: 100%;
  }
}
::v-deep {
  .el-button--mini,
  .el-button--small {
    font-size: 0.44rem;
    border-radius: 0.59rem;
    width: 40%;
    font-family: PingFang SC;
  }
  .el-button--primary {
    background: #0464c6;
    border-color: #0464c6;
  }
  .el-button--primary.is-disabled {
    background: #a0cfff;
    border-color: #a0cfff;
  }
  .el-button--default {
    color: #0464c6;
    border: 1px solid #0464c6;
  }
}
.lucky-text {
  font-size: 17px;
}
</style>
