<template>
  <div class="hero-right">
    <div class="bg"></div>
    <div class="container">
      <div class="hero-left-info">
        <div class="hero-left-info-img">
          <img
            v-if="data.item_id"
            :src="require('@/assets/market/weapon/' + data.item_id + '.png')"
            alt="aoi-hero"
          />
          <img
            v-if="data.c_id"
            :src="require('@/assets/market/weapon/' + data.c_id + '.png')"
            alt="aoi-hero"
          />
        </div>
      </div>
      <div class="chip-right-content">
        <div class="chip-left">
          <div class="chip-tab-left">
            <div class="chip-item">
              <div
                :class="chipsid == 1 ? 'active-bg' : 'bg'"
                v-if="data.detail.chips_info[1].item_id"
              >
                <img
                  class="hill-icon-img"
                  width="117px"
                  @click="handChipDetils(1)"
                  height="110px"
                  :src="
                    require('@/assets/market/chip/details/' +
                      data.detail.chips_info[1].item_id +
                      '_full.png')
                  "
                  alt=""
                />
              </div>
              <div v-else></div>
            </div>
            <div class="chip-item">
              <div
                :class="chipsid == 2 ? 'active-bg' : 'bg'"
                v-if="data.detail.chips_info[2].item_id"
              >
                <img
                  class="hill-icon-img"
                  width="117px"
                  @click="handChipDetils(2)"
                  height="110px"
                  :src="
                    require('@/assets/market/chip/details/' +
                      data.detail.chips_info[2].item_id +
                      '_full.png')
                  "
                  alt=""
                />
              </div>
              <div v-else></div>
            </div>
          </div>
          <div class="chip-tab-right">
            <div class="chip-item">
              <div
                :class="chipsid == 0 ? 'active-bg' : 'bg'"
                v-if="data.detail.chips_info[0].item_id"
              >
                <img
                  class="hill-icon-img"
                  width="117px"
                  height="110px"
                  @click="handChipDetils(0)"
                  :src="
                    require('@/assets/market/chip/details/' +
                      data.detail.chips_info[0].item_id +
                      '_full.png')
                  "
                  alt=""
                />
              </div>
              <div v-else></div>
            </div>
            <div class="chip-reactor-item">
              <div class="reactor-bg">
                <img
                  v-if="data.detail.chip_core.length > 0"
                  class="hill-icon-img"
                  @click="handChipDetils(5)"
                  width="169px"
                  src="../../assets/market/reactor-active.png"
                  alt=""
                />
                <img
                  v-else
                  class="hill-icon-img"
                  width="169px"
                  src="../../assets/market/reactor-bg.png"
                  alt=""
                />
              </div>
            </div>
            <div class="chip-item">
              <div
                :class="chipsid == 3 ? 'active-bg' : 'bg'"
                v-if="data.detail.chips_info[3].item_id"
              >
                <img
                  class="hill-icon-img"
                  width="117px"
                  height="110px"
                  @click="handChipDetils(3)"
                  v-if="data.detail.chips_info[3].item_id"
                  :src="
                    require('@/assets/market/chip/details/' +
                      data.detail.chips_info[3].item_id +
                      '_full.png')
                  "
                  alt=""
                />
              </div>
              <div v-else></div>
            </div>
          </div>
        </div>
        <div class="chip-right">
          <div class="chip-right-top" v-if="chipsid !== 5">
            <div class="token-lable">TOKEN ID</div>
            <div class="token-id">
              #{{
                chipsid == 5 ? "" : data.detail.chips_info[chipsid].token_id
              }}
            </div>
          </div>
          <div class="chip-right-bottom">
            <div class="chip-assult">
              <div class="owner" v-if="chipsid !== 5">
                <div class="owner-content">
                  <div>Owner :</div>
                  <div v-if="data.detail.chips_info[chipsid].nft_address">
                    {{ address }}
                  </div>
                </div>
                <div class="owner-mint">
                  <div>Mint Time :</div>
                  <div v-if="data.detail.chips_info[chipsid].nft_address">
                    {{ modifytime }}
                    UTC
                  </div>
                </div>
                <div class="owner-history">
                  <div>History :</div>
                  <div>#3006985843100103 (NFTLink)</div>
                </div>
              </div>
              <DefContent
                :chipsinfo="
                  chipsid == 5 ? data.detail.chip_core : data.detail.chips_info
                "
                :chipsid="chipsid"
              ></DefContent>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DefContent from "./DefContent.vue";
import { formatAddress } from "@/utils/formatAddress";
import { formatSelect } from "@/utils/UTCTime";
export default {
  props: ["data", "isTab", "type"],
  components: { DefContent },
  data() {
    return {
      piece: "",
      chipsid: 0,
    };
  },
  computed: {
    chips_info() {
      let list = this.data.detail.chips_info.filter((el) => {
        return el !== " ";
      });
      return list;
    },

    address() {
      return formatAddress(
        this.data.detail.chips_info[this.chipsid].nft_address
      );
    },
    modifytime() {
      return formatSelect(this.data.detail.chips_info[this.chipsid].modifytime);
    },
  },
  created() {
    let list = this.data.detail.chips_info.sort((a, b) => {
      if (a == null) return -1;
      if (b == null) return 1;
      return (b.idx || 0) - (a.idx || 0);
    });
  },
  methods: {
    closeTip() {
      this.$emit("closeTip", false);
    },
    showTip() {
      this.$emit("showTip", true);
    },
    closeMyself() {},
    init(data) {
      this.dialogVisible = true;
      this.piece = data;
    },
    handChipDetils(i) {
      this.chipsid = i;
    },
  },
};
</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;
}
.hero-left-info {
  width: 702px;
  height: 702px;
  margin-top: 32px;
  margin-left: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../assets/market/weapon/elliptical-bg.png") no-repeat;
  background-size: cover;
  .hero-left-info-img {
    width: 668px;
    height: 274px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
    }
  }
}

.container {
  display: flex;
  justify-content: space-between;
  .chip-right-content {
    display: flex;
  }
  .chip-left {
    position: relative;
    margin-left: 190px;
    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 {
          width: 169px;
          height: 146px;
          background: url("../../assets/market/chip-item-bg.png") no-repeat;
          background-size: 100% 100%;
          margin-left: 33px;
          margin-top: 54px;
          display: flex;
          justify-content: center;
          .hill-icon-img {
            margin-top: 13px;
            cursor: pointer;
            margin-right: 10px;
          }
        }
        .active-bg {
          width: 169px;
          height: 146px;
          background: url("../../assets/market/artive-bg.png") no-repeat;
          background-size: 100% 100%;
          margin-left: 33px;
          margin-top: 54px;
          display: flex;
          justify-content: center;
          .hill-icon-img {
            cursor: pointer;
            margin-top: 13px;
            margin-right: 10px;
          }
        }
      }
    }
    .chip-item {
      width: 252px;
      height: 238px;
      display: flex;
      background: url("../../assets/market/chip-bg.png") no-repeat;
      background-size: 100% 100%;
      .bg {
        width: 169px;
        height: 146px;
        background: url("../../assets/market/chip-item-bg.png") no-repeat;
        background-size: 100% 100%;
        margin-left: 33px;
        margin-top: 54px;
        display: flex;
        justify-content: center;
        .hill-icon-img {
          margin-top: 13px;
          margin-right: 5px;
        }
      }
      .reactor-bg {
        .hill-icon-img {
          margin-left: 33px;
          margin-top: 54px;
          // margin-top: 13px;
          // margin-right: 5px;
        }
      }
      .active-bg {
        width: 169px;
        height: 146px;
        background: url("../../assets/market/artive-bg.png") no-repeat;
        background-size: 100% 100%;
        margin-left: 33px;
        margin-top: 54px;
        display: flex;
        justify-content: center;
        .hill-icon-img {
          margin-top: 13px;
          margin-right: 5px;
        }
      }
    }
    .chip-reactor-item {
      width: 252px;
      height: 238px;
      display: flex;
      background: url("../../assets/market/chip-rector-bg.png") no-repeat;
      background-size: 100% 100%;
      // .bg {
      //   width: 169px;
      //   height: 146px;
      //   background: url("../../assets/market/chip-item-bg.png") no-repeat;
      //   background-size: 100% 100%;
      //   margin-left: 33px;
      //   margin-top: 54px;
      //   display: flex;
      //   justify-content: center;
      //   .hill-icon-img {
      //     margin-top: 13px;
      //     margin-right: 5px;
      //   }
      // }
      .reactor-bg {
        .hill-icon-img {
          margin-left: 35px;
          margin-top: 38px;
          // margin-top: 13px;
          // margin-right: 5px;
        }
      }
      .active-bg {
        width: 169px;
        height: 146px;
        background: url("../../assets/market/artive-bg.png") no-repeat;
        background-size: 100% 100%;
        margin-left: 33px;
        margin-top: 54px;
        display: flex;
        justify-content: center;
        .hill-icon-img {
          margin-top: 13px;
          margin-right: 5px;
        }
      }
    }
  }
  .chip-right {
    width: 431px;
    margin-top: 24px;
    margin-right: 52px;
  }
  .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 {
    width: 60%;
    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;
  img {
    width: 100%;
  }
}
.img-details {
  width: 802px;
  height: 651px;
  position: absolute;
  top: -41px;
  left: -40px;
  // opacity: 0;
  img {
    width: 100%;
    // opacity: 0;
  }
}
.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>
