<template>
  <div class="wmassageMask" v-show="detailVisible && hero" @touchmove.prevent>
    <div class="tabs">
      <div :class="isTabs ? 'chip-tab' : 'hero-tab'" @click="handHeroTab">
        HERO
      </div>
      <div>
        <div
          v-if="hero.detail.chips_info.length > 0 && hero.detail.chips_info"
          :class="isTabs ? 'hero-tab' : 'chip-tab'"
          @click="handChipTab"
        >
          CHIP
        </div>
        <div v-else :class="isTabs ? 'hero-tab' : 'chip-tab'">
          <img
            width="9px"
            src="../../../assets/market/lock.png"
            alt="aoi-hero"
          />
        </div>
      </div>
    </div>
    <div class="messageMaskContent content">
      <div v-if="!isTabs">
        <div class="hero-details-info">
          <img
            v-if="hero.item_id"
            :src="
              require('@/assets/market/hero/details/' +
                hero.item_id +
                '_full.png')
            "
            alt="aoi-hero"
          />
           <img
            v-if="hero.c_id"
            :src="require('@/assets/market/hero/details/' + hero.c_id + '_full.png')"
            alt=""
          />
        </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">#{{ hero.detail.token_id }}</div>
            <div class="hill">
              <div class="hill-content">
                <div class="hill-name">
                  {{ hero.c_name ? hero.c_name : hero.detail.hero_name
                  }}<span class="name">Name</span>
                </div>
                <div class="hill-icon">
                  <img
                    width="34px"
                    src="../../../assets/market/hero/hill-icon.png"
                    alt=""
                  />
                </div>
              </div>

              <LevelStar :level="hero.detail.quality"> </LevelStar>
              <LevelValue
                :level="hero.detail.hero_lv"
                :lucky="hero.detail.lucky"
              ></LevelValue>
              <ProgressCard
                color="rgba(184, 77, 204, 0.7)"
                progressImg="aggressivity"
                definecolor="#ca61dc"
                :max="hero.detail.pvp_ceg_uplimit"
                :min="hero.detail.pvp_ceg_uplimit"
              ></ProgressCard>
              <ProgressCard
                color="rgba(193, 168, 93, 0.7)"
                progressImg="defense"
                definecolor="#d0bd7a"
                :max="hero.detail.pve_ceg_uplimit"
                :min="hero.detail.pve_ceg_uplimit"
              ></ProgressCard>
              <ProgressCard
                color="rgba(81, 194, 224, 0.7)"
                progressImg="lightning"
                definecolor="#7dd6ff"
                :max="hero.detail.hero_tili_max"
                :min="hero.detail.hero_tili"
              ></ProgressCard>
            </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/hp.png" alt="" />
                  </div>
                  <div>HP</div>
                </div>
                <div>
                  {{
                    hero.detail.rand_attr[0].val
                      ? hero.detail.rand_attr[0].val >= 100
                        ? parseInt(hero.detail.rand_attr[0].val * 1)
                        : (hero.detail.rand_attr[0].val * 1).toFixed(2)
                      : ""
                  }}
                </div>
              </div>
              <div class="hero-item hero-item-attack">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/hero/attack.png" alt="" />
                  </div>
                  <div>TTACK</div>
                </div>
                <div>
                  {{
                    hero.detail.rand_attr[1].val
                      ? hero.detail.rand_attr[1].val >= 100
                        ? parseInt(hero.detail.rand_attr[1].val * 1)
                        : (hero.detail.rand_attr[1].val * 1).toFixed(2)
                      : ""
                  }}
                </div>
              </div>

              <div class="hero-item hero-item-def">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/hero/def.png" alt="" />
                  </div>
                  <div>DEFENCE</div>
                </div>
                <div>
                  {{
                    hero.detail.rand_attr[2].val
                      ? hero.detail.rand_attr[2].val >= 100
                        ? parseInt(hero.detail.rand_attr[2].val * 1)
                        : (hero.detail.rand_attr[2].val * 1).toFixed(2)
                      : ""
                  }}
                </div>
              </div>
              <div class="hero-item hero-item-cri">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/hero/cri.png" alt="" />
                  </div>
                  <div>CRITICAL</div>
                </div>
                <div>
                  {{
                    hero.detail.rand_attr[4].val
                      ? (hero.detail.rand_attr[4].val * 1 * 100).toFixed(2)
                      : "0"
                  }}%
                </div>
              </div>
              <div class="hero-item hero-item-criDam">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/hero/criDam.png" alt="" />
                  </div>
                  <div>CRI DAMAGE</div>
                </div>
                <div>
                  {{
                    hero.detail.rand_attr[5].val
                      ? (hero.detail.rand_attr[5].val * 1 * 100).toFixed(2)
                      : "0"
                  }}%
                </div>
              </div>
              <div class="hero-item hero-item-dodge">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/hero/dodge.png" alt="" />
                  </div>
                  <div>DODGE</div>
                </div>
                <div>
                  {{
                    hero.detail.rand_attr[6].val
                      ? (hero.detail.rand_attr[6].val * 1 * 100).toFixed(2)
                      : "0"
                  }}%
                </div>
              </div>
              <div class="hero-item hero-item-reduces">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/hero/reduces.png" alt="" />
                  </div>
                  <div>RUDUCE</div>
                </div>
                <div>
                  {{
                    hero.detail.rand_attr[7].val
                      ? (hero.detail.rand_attr[7].val * 1 * 100).toFixed(2)
                      : "0"
                  }}%
                </div>
              </div>
              <div class="hero-item hero-item-speed">
                <div class="item">
                  <div class="item-img">
                    <img src="../../../assets/market/hero/speed.png" alt="" />
                  </div>
                  <div>SPEED</div>
                </div>
                <div>
                  {{
                    hero.detail.rand_attr[3].val
                      ? hero.detail.rand_attr[3].val
                      : ""
                  }}
                </div>
              </div>
            </div>
            <AccountCard
              :owner="
                hero.owner_address
                  ? hero.owner_address
                  : hero.info.owner_address
              "
              :time="hero.modifytime"
            />
          </div>
        </div>
      </div>
      <MosaicChip v-if="isTabs" :data="hero"></MosaicChip>
   
      <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>
import LevelStar from "./LevelStar.vue";
import LevelValue from "./LevelValue.vue";
import AccountCard from "./AccountCard.vue";
import ProgressCard from "./ProgressCard.vue";
import MosaicChip from "./MosaicChip.vue";
import { formatAddress } from "@/utils/formatAddress";
import { formatSelect } from "@/utils/UTCTime";
export default {
  components: { LevelStar, ProgressCard, LevelValue, AccountCard,MosaicChip },
  name: "HeroModal",
  data() {
    return {
      detailVisible: false,
      hero: "",
      isTabs: false,
      chipsid: 0,
      cunter: 0,
      name: "",
      chipArrid: {
        39: "Hp Pct",
        40: "Atk Pct",
        41: "Def Pct",
        42: "Critical",
        43: "Cri Damage",
        44: "Dodge",
        45: "Dodge Reduce",
        46: "Hp Recover Pct",
        47: "Brain Life Pct",
        48: "Reload Time Pct",
        49: "Bullet Speed",
        50: "Bullet Speed Pct",
        51: "Cool Down Pct",
      },
    };
  },
  // created() {
  //   let list = this.hero.detail.chips_info.sort((a, b) => {
  //     if (a == null) return -1;
  //     if (b == null) return 1;
  //     return (b.idx || 0) - (a.idx || 0);
  //   });
  //   console.log(list);
  // },
  computed: {
    level() {
      return this.hero.info ? this.hero.info.level : false;
    },

    address() {
      return formatAddress(
        this.hero.detail.chips_info[this.chipsid].nft_address
      );
    },
    modifytime() {
      return formatSelect(this.hero.detail.chips_info[this.chipsid].modifytime);
    },
    chipList() {
      if (this.chipsid == 5) {
        let s = 0;
        this.hero.detail.chip_core.forEach((item) => {
          s += parseFloat(item.val);
        });
        return s;
      } else {
        return this.hero.detail.chips_info[this.chipsid].rand_attr;
      }
    },
  },
  methods: {
    closeTip() {
      // 分发自定义事件(事件名: closeTip)
      this.$emit("closeTip");
    },
    handHeroTab() {
      // this.$emit("closeTip", false);
      this.isTabs = false;
    },
    handChipTab() {
      // this.$emit("showTip", true);
      this.isTabs = true;
    },
    handChipDetils(i) {
      this.chipsid = i;
    },
    init(data) {
      this.detailVisible = true;
      this.hero = data;
    },
  },
  // watch: {
  //   isShow: {
  //     //弹出层禁止背景页面滑动
  //     watch: {
  //       isShow: {
  //         //弹出层禁止背景页面滑动
  //         handler(val) {
  //           var mo = function (e) {
  //             e.preventDefault();
  //           };
  //           if (val) {
  //             document.getElementById("container").style.overflow = "hidden";
  //             document.getElementById("container").style.position = "fixed";
  //             document.addEventListener("touchmove", mo, false); //禁止页面滑动
  //           } else {
  //             document.getElementById("container").style.overflow = ""; //出现滚动条
  //             document.getElementById("container").style.position = "";
  //             document.removeEventListener("touchmove", mo, false);
  //           }
  //         },
  //       },
  //     },
  //   },
  // },
};
</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: 104px;
      height: 104px;
      position: absolute;
      cursor: pointer;
      right: 0px;
      top: 31px;
      img {
        width: 100%;
      }
    }
  }
  .hero-details-info {
    position: absolute;
    top: 21%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 830px;
    height: 830px;
    display: flex;
    justify-content: center;
    img {
      width: 100%;
    }
  }
  .hero-details {
    width: 930px;
    margin: 0 auto;
    height: 790px;
    text-align: center;
    display: flex;
    justify-content: center;
    opacity: 0;
    img {
      width: 100%;
    }
  }
  .tabs {
    position: absolute;
    top: 122px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 504px;
    height: 95px;
    background: #6b95eb;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid rgba(222, 249, 255, 0.3);
    border-radius: 46px;
    .hero-tab {
      width: 224px;
      height: 71px;
      font-size: 39px;
      color: #ffffff;
      line-height: 71px;
      text-align: center;
      background: #3a65cf;
      border-radius: 36px;
    }
    .chip-tab {
      width: 224px;
      height: 71px;
      color: #172e5c;
      line-height: 71px;
      text-align: center;
    }
  }
  .messageMaskContent {
    position: absolute;
    top: 350px;
    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: 23px;
        }
        .hero-item-attack {
          margin-bottom: 23px;
        }
        .hero-item-def {
          margin-bottom: 23px;
        }
        .hero-item-cri {
          margin-bottom: 23px;
        }
        .hero-item-criDam {
          margin-bottom: 23px;
        }
        .hero-item-dodge {
          margin-bottom: 23px;
        }
        .hero-item-reduces {
          margin-bottom: 23px;
        }
      }

      .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>
