<template>
  <el-dialog
    :show-close="false"
    :class="isTabs ? 'contents' : 'contents'"
    :visible.sync="dialogVisible"
  >
    <Transition v-if="!isTabs">
      <div class="hero-tab-left">
        <div class="bg"></div>
        <div class="contaier">
          <div class="hero-left">
            <img
              v-if="hero.c_id"
              :src="
                require('@/assets/market/hero/details/' +
                  hero.c_id +
                  '_full.png')
              "
              alt="aoi-hero"
            />
            <img
              v-if="hero.item_id"
              :src="
                require('@/assets/market/hero/details/' +
                  hero.item_id +
                  '_full.png')
              "
              alt="aoi-hero"
            />
          </div>
          <div class="hero-left-info">
            <img
              v-if="hero.c_id"
              :src="
                require('@/assets/market/hero/details/' +
                  hero.c_id +
                  '_full.png')
              "
              alt="aoi-hero"
            />
            <img
              v-if="hero.item_id"
              :src="
                require('@/assets/market/hero/details/' +
                  hero.item_id +
                  '_full.png')
              "
              alt="aoi-hero"
            />
          </div>
          <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>
                  <img
                    width="34px"
                    src="../../assets/market/hero/hill-icon.png"
                    alt=""
                  />
                </div>
              </div>
              <LeveStars :quality="hero.detail.quality"> </LeveStars>
              <LuckyValue
                :level="hero.detail.hero_lv"
                :lucky="hero.detail.lucky"
              ></LuckyValue>
              <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
                      width="32px"
                      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
                      width="32px"
                      src="../../assets/market/hero/attack.png"
                      alt=""
                    />
                  </div>
                  <div>ATTACK</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
                      width="32px"
                      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
                      width="33px"
                      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
                      width="33px"
                      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
                      width="33px"
                      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
                      width="33px"
                      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
                      width="32px"
                      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"
            >
            </AccountCard>
          </div>
        </div>
      </div>
    </Transition>
    <Transition v-else>
      <div>
        <MosaicChipDialog :type="type" :hero="hero" /></div
    ></Transition>
    <div class="buy-price">
      <div class="mynft" v-if="isType === 'mynft'">
        <div class="for-rent-btn" v-if="hero.selling > 0">
          <div class="adjust" @click="handPutShow(hero)"></div>
          <div class="remove" @click="handremove"></div>
        </div>
        <div v-else>
          <div class="rent"></div>
          <div class="sell" @click="handPutShow">Sell</div>
        </div>
      </div>
      <div class="maeket" v-else>
        <div class="price">
          <span class="price-number">{{
            hero.s_price ? hero.s_price : " "
          }}</span>
        </div>
        <div>
          <a href="javascript:void(0)">
            <img
              @click="handBuyShow"
              width="469px"
              src="../../assets/market/hero/buy.png"
              alt="aoi-hero"
          /></a>
        </div>
      </div>
    </div>
    <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="33px" src="../../assets/market/lock.png" alt="aoi-hero" />
        </div>
      </div>
    </div>
    <Close @closeMyself="closeMyself" />
  </el-dialog>
</template>

<script>
import LeveStars from "./LeveStars.vue";
import Close from "./Close.vue";
import AccountCard from "./AccountCard.vue";
import ProgressCard from "./ProgressCard.vue";
import LuckyValue from "./LuckyValue.vue";
import MosaicChipDialog from "./MosaicChip.vue";
import { AppModule } from "@/store/modules/app";
import { CONTRACT_ADDRESS } from "@/configs/config_chain";
import ChainManager from "@/chain/ChainManager";
export default {
  props: ["dialogVisible", "hero", "isType"],
  components: {
    LeveStars,
    Close,
    AccountCard,
    ProgressCard,
    MosaicChipDialog,
    LuckyValue,
  },
  data() {
    return {
      isTabs: false,
      type: "hero",
      orderId: 1,
      chainManager: new ChainManager(),
    };
  },
  methods: {
    closeMyself(hide) {
      this.$emit("on-close", hide);
      //如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
    },
    open() {
      this.$emit("on-open");
      //如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
    },

    closeTip() {},
    showTip() {
      this.isTabs = true;
      this.$nextTick(() => {
        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
        //init调用的是dialog-component组件里面的init方法
        //data是传递给弹窗页面的值
        this.$refs.dialog.init(this.hero);
      });
    },
    closeTip() {
      // 分发自定义事件(事件名: closeTip)
      this.$emit("closeTip", false);
    },
    showTip() {
      this.$emit("showTip", true);
    },
    handHeroTab() {
      this.$emit("closeTip", false);
      this.isTabs = false;
    },
    handChipTab() {
      this.$emit("showTip", true);
      this.isTabs = true;
    },
    handPutShow(data) {
      this.$emit("handPutShow",data);
      console.log("ppwowerw");
    },
    handBuyShow() {
      this.$emit("handBuyShow");
      console.log("handBuyShow");
    },
    async handremove() {
      try {
        const nftres = await this.chainManager.bc.beginCancelOrder(
          this.orderId,
          CONTRACT_ADDRESS[AppModule.chainId].marketDddress
        );
        console.log(nftres, "beginSell");
      } catch (err) {
        console.log("query order status error", err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.contents {
  ::v-deep .el-dialog,
  .el-pager li {
    position: relative;
    width: 1727px !important;
    height: 775px !important;
    background: url("../../assets/market/hero/dialog-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;
  }
}
.content {
  ::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;
  }
}
.hero-tab-left {
  .contaier {
    display: flex;
  }
  .hero-left {
    width: 802px;
    height: 651px;
    position: absolute;
    top: -41px;
    left: -40px;
    img {
      width: 100%;
    }
  }
  .hero-left-info {
    width: 949px;
    height: 651px;
    margin-top: 36px;
    img {
      width: 100%;
      opacity: 0;
    }
  }

  .hill {
    width: 100%;
    height: 509px;
    margin-top: 31px;
    background: url("../../assets/market/hero/hill-bg.png") no-repeat;
    background-size: contain;
    .hill-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 15px;
      margin-left: 32px;
      margin-right: 24px;
      margin-bottom: 26px;
    }
    .hill-name {
      font-size: 47px;
      // font-family: "SairaStencilOne";
      position: relative;
      color: #ffffff;
    }
    .name {
      font-size: 17px;
      position: absolute;
      left: -27px;
      bottom: -11px;
      font-family: "OPPOSans";
      font-weight: normal;
      color: #ffffff;
      margin-left: 33px;
    }
  }
  .hero-right-token {
    width: 353px;
    color: #ffffff;
    right: 0px;
    .token-name {
      text-align: center;
      margin-top: 51px;
      font-size: 34px;
      margin-bottom: 11px;
      font-weight: bold;
      font-weight: bold;
      color: #ffffff;
    }
    .token-id {
      width: 345px;
      height: 41px;
      font-size: 30px;
      line-height: 49px;
      text-align: center;
      margin-bottom: 32px;
      background: #28c1ed;
      border: 4px solid rgba(91, 211, 246, 0.4);
      border-radius: 24px;
    }
  }

  .hero-right-hp {
    width: 33%;
    margin-left: 25px;
    margin-top: 36px;
    color: #ffffff;
    right: 0px;
    .hero-hp {
      width: 409px;
      height: 466px;
      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: 24px;
    font-family: "Bahnschrift";
    font-weight: bold;
    color: #ffffff;
    .item {
      display: flex;
      font-size: 24px;
      font-family: "Bahnschrift";
      font-weight: bold;
      color: #ffffff;
      .item-img {
        margin-right: 26px;
      }
    }
  }
  .hero-item-hp {
    margin-bottom: 13px;
  }
  .hero-item-attack {
    margin-bottom: 25px;
  }
  .hero-item-def {
    margin-bottom: 17px;
  }
  .hero-item-cri {
    margin-bottom: 13px;
  }
  .hero-item-criDam {
    margin-bottom: 20px;
  }
  .hero-item-dodge {
    margin-bottom: 18px;
  }
  .hero-item-reduces {
    margin-bottom: 22px;
  }

  .hp-bottom {
    width: 435px;
    height: 126px;
    font-size: 22px;
    font-family: "Bahnschrift";
    font-weight: bold;
    color: #ffffff;
    margin-top: 13px;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 28px;
    background: rgba(5, 57, 68, 0.3);
    border-radius: 20px;
    .userinfo {
      display: flex;
      margin-bottom: 12px;
      justify-content: space-between;
    }
  }
}
.buy-price {
  position: absolute;
  right: 89px;
  bottom: -46px;
  display: flex;
  .maeket {
    display: flex;
  }
  .price {
    width: 281px;
    height: 89px;
    font-size: 43px;
    position: relative;
    font-family: "Arciform";
    font-weight: 400;
    color: #ffffff;
    background: url("../../assets/market/hero/price.png") no-repeat;
    background-size: contain;
    .price-number {
      line-height: 89px;
      margin-left: 90px;
    }
  }
  .mynft {
    display: flex;
  }

  .sell {
    width: 384px;
    height: 89px;
    cursor: pointer;
    text-align: center;
    font-size: 44px;
    line-height: 89px;
    color: #ffffff;
    background: url("../../assets/market/chip/sell-btn.png") no-repeat;
    background-size: 100% 100%;
  }
  .rent {
    width: 384px;
    height: 89px;
    margin-right: 35px;
  }
  .for-rent-btn {
    display: flex;
    .adjust {
      width: 384px;
      height: 89px;
      cursor: pointer;
      background: url("../../assets/market/hero/adjust.png") no-repeat;
      background-size: 100% 100%;
    }
    .remove {
      width: 384px;
      height: 89px;
      cursor: pointer;
      margin-left: 14px;
      background: url("../../assets/market/hero/remove.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
.tabs {
  position: absolute;
  left: 734px;
  top: -70px;
  display: flex;
  .hero-tab {
    width: 306px;
    height: 80px;
    cursor: pointer;
    font-size: 63px;
    font-family: "SairaStencilOne";
    font-weight: 400;
    color: #ffffff;
    line-height: 80px;
    text-align: center;
    margin-right: 10px;
    background: url("../../assets/market/tabhshow.png") no-repeat;
    background-size: contain;
  }
  .chip-tab {
    width: 290px;
    height: 70px;
    font-size: 46px;
    line-height: 70px;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    font-family: "SairaStencilOne";
    font-weight: 400;
    color: #5e82d7;
    background: url("../../assets/market/tabhied.png") no-repeat;
    background-size: 100% 100%;
  }
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-to,
.v-leave-from {
  opacity: 1;
}
</style>
