<template>
  <el-dialog :show-close="false" :visible.sync="visible">
    <div class="bg"></div>
    <div class="container">
      <div class="chip-left" v-if="data.detail">
        <img
          v-if="data.detail.item_id"
          width="240px"
          :src="
            require('@/assets/market/chip/details/' + data.detail.item_id + '_full.png')
          "
          alt=""
        />
      </div>
      <div class="chip-right">
        <div class="chip-right-top">
          <div class="token-id">#{{ data.token_id }}</div>
        </div>
        <div class="chip-right-bottom">
          <div class="chip-assult">
            <div class="assult-rifle">
              <div class="assult-rifle-content">
                <div class="assult-rifle-name">Assult Rifle</div>
                <div class="hill-icon">
                  <img
                    width="28px"
                    src="../../assets/market/hero/hill-icon.png"
                    alt=""
                  />
                </div>
              </div>
              <div class="level">
                <div>
                  <span class="level-name">Lv</span>
                  <span class="level-number" v-if="data.detail">{{
                    data.detail.chip_grade
                  }}</span>
                </div>
                <div class="lucky-value">
                  <div class="lucky-img">
                    <img
                      width="35px"
                      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">
                      {{ data.detail.lucky_temporary }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="owner">
              <div class="owner-content">
                <div>Owner :</div>
                <div>{{ owner }}</div>
              </div>
              <div class="owner-mint">
                <div>Mint Time:</div>
                <div>{{ time }} UTC</div>
              </div>
              <div class="owner-history">
                <!-- <div>History :</div>
                <div>#3006985843100103 (NFTLink)</div> -->
              </div>
            </div>
          </div>
          <div class="def-content" v-if="data.detail">
            <div
              class="def-item"
              v-for="(item, i) in data.detail.rand_attr"
              :key="i"
            >
              <div>{{ chipArridName(item.attr_id) }}</div>
              <div>{{ parseFloat(item.val * 100).toFixed(2) }}%</div>
            </div>
            <div class="def-item">
              LUCKY Unlocked at Lv.{{ data.detail.chip_grade }}
            </div>
          </div>
        </div>
      </div>
      <div class="buy-price">
        <div class="mynft" v-if="isType === 'mynft'">
          <div class="for-rent-btn" v-if="data.o_link > 0">
            <div class="adjust" @click="handPutShow"></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">{{
              formatPriceShow(data.s_price ? data.s_price : " ", 18)
            }}</span>
          </div>
          <div>
            <a href="javascript:void(0)">
              <img
                @click="handBuyShow"
                width="345px"
                src="../../assets/market/hero/buy.png"
                alt="aoi-hero"
            /></a>
          </div>
        </div>
      </div>
    </div>

    <Close @closeMyself="closeMyself" />
  </el-dialog>
</template>

<script>
import Close from "./Close.vue";

import { formatSelect } from "@/utils/UTCTime";
import { formatAddress, getChipArrid } from "@/utils/formatAddress";
import { AppModule } from "@/store/modules/app";
import { formatPrice } from "@/utils/chain.util";
import { CONTRACT_ADDRESS } from "@/configs/config_chain";
import ChainManager from "@/chain/ChainManager";

export default {
  components: { Close },
  props: ["dialogVisible", "data", "isType"],
  data() {
    return {
      chainManager: new ChainManager(),
      loadingInstance:null,
      visible:this.dialogVisible
    };
  },
   watch: {
    dialogVisible(val) {
      this.visible = val;
    },
  },
  computed: {
    time() {
      return formatSelect(this.data.modifytime);
    },
    owner() {
      return formatAddress(this.data.owner_address);
    },
  },
  methods: {
    closeMyself(hide) {
      this.$emit("on-close", hide);
      //如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
    },
    open() {
      this.$emit("on-open");
      //如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
    },
    handPutShow() {
      this.$emit("handPutShow");
    },
    formatPriceShow(price, decimals, fixed = 2) {
      return formatPrice(price, decimals, fixed);
    },
    handBuyShow() {
      this.$emit("handBuyShow");
    },
    chipArridName(nameId) {
      return getChipArrid(nameId);
    },
    async handRemove() {
    
      try {
        this.showLoading()
        const nftres = await this.chainManager.bc.beginCancelOrder(
          this.data.o_link,
          CONTRACT_ADDRESS[AppModule.chainId].marketAddress
        );
         if (nftres.status == true) {
          this.$emit("handMessage", 1); 
          this.hideLoading();
           setTimeout(() => {
            this.$emit("handMessageHide");
            this.$emit("on-close");
            setTimeout(() => {
              this.$emit("getMarketNftList");
            }, 1000);
          }, 1000);
        }
      } catch (err) {
        console.log("query order status error", err);
        this.hideLoading();
          this.$emit("handMessage", 1);
      }
    },
    showLoading() {
      this.loadingInstance = this.$loading({
        background: "rgba(0, 0, 0, 0.8)",
      });
    },

    hideLoading() {
      this.loadingInstance?.close();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog,
.el-pager li {
  position: relative;
  width: 993px !important;
  height: 446px !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;
}
.contaier {
  display: flex;
}
.close {
  position: absolute;
  cursor: pointer;
  right: -18px;
  top: -20px;
}
.container {
  display: flex;
  .chip-left {
    margin-left: 60px;
    margin-top: 94px;
    margin-right: 38px;
  }
  .chip-right {
    margin-top: 11px;
  }
  .chip-right-top {
    color: #ffffff;
    margin-left: 137px;
    width: 319px;
    .token-lable {
      text-align: center;
      font-size: 34px;
      font-weight: bold;
      color: #ffffff;
    }
    .token-id {
      font-size: 28px;
      font-family: "Bahnschrift";
      font-weight: bold;
      color: #ffffff;
      width: 311px;
      height: 41px;
      margin-top: 21px;
      line-height: 49px;
      text-align: center;
      margin-bottom: 12px;
      background: #28c1ed;
      border: 4px solid rgba(91, 211, 246, 0.4);
      border-radius: 24px;
    }
  }
  .chip-right-bottom {
    display: flex;
  }
  .chip-assult {
  }
  .owner {
    width: 316px;
    height: 85px;
    padding-top: 18px;
    background: rgba(5, 57, 68, 0.3);
    border-radius: 14px;
    margin-top: 18px;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
  }
  .assult-rifle {
    width: 316px;
    height: 142px;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    background: rgba(26, 58, 175, 0.3);
    border-radius: 20px;
  }
  .assult-rifle-name {
    margin-top: 20px;
    margin-left: 20px;
    height: 26px;
    font-size: 34px;
    // font-family: "SairaStencilOne";
    color: #ffffff;
  }
  .def-content {
    width: 222px;
    padding-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
    height: 238px;
    background: rgba(5, 57, 68, 0.3);
    border-radius: 14px;
    margin-left: 18px;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
  }
  .hill-icon {
    margin-top: 24px;
    margin-right: 23px;
  }
  .assult-rifle-content {
    display: flex;
    justify-content: space-between;
  }
  .level {
    margin-top: 18px;
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
    .level-number {
      font-size: 41px;
      font-style: italic;
      margin-left: 4px;
      color: #ffffff;
    }
    .level-name {
      font-size: 35px;
      font-style: italic;
      margin-left: 5px;
      color: #ffffff;
    }
    .lucky-value {
      width: 140px;
      height: 51px;
      margin-right: 19px;
      background: rgba(249, 140, 23, 0.7);
      display: flex;
      align-items: center;
      border-radius: 29px;
    }
    .lucky-img {
      width: 45px;
      height: 45px;
      background: rgba(250, 178, 100, 0.8);
      display: flex;
      margin-left: 4px;
      justify-content: center;
      align-items: center;
      line-height: 45px;
      margin-right: 5px;
      border-radius: 50%;
    }
    .lucky-text {
      font-size: 13px;
      margin-top: 3px;
      font-style: italic;
      color: #ffffff;
      line-height: 23px;
    }
    .lucky-number {
      font-size: 20px;
      font-style: italic;
      color: #ffffff;
    }
    .lucky-boder {
      width: 90px;
      height: 2px;
      background: linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.1) 90%,
        rgba(255, 255, 255, 0) 100%
      );
      border-radius: 1px;
    }
  }
}
.owner-content {
  display: flex;
  justify-content: space-between;
  margin-left: 13px;
  margin-right: 13px;
}
.owner-mint {
  display: flex;
  margin-top: 10px;
  margin-right: 13px;
  justify-content: space-between;
  margin-left: 13px;
}
.owner-history {
  display: flex;
  margin-top: 10px;
  margin-right: 13px;
  justify-content: space-between;
  margin-left: 13px;
}
.def-item {
  width: 202px;
  height: 43px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  margin-bottom: 14px;
  padding-right: 7px;
  padding-left: 13px;
}
.buy-price {
  position: absolute;
  right: 63px;
  bottom: -41px;
  display: flex;
  .maeket {
    display: flex;
  }
  .price {
    width: 187px;
    height: 66px;
    font-size: 27px;
    position: relative;
    text-align: right;
    font-family: "Arciform";
    margin-right: 20px;
    color: #ffffff;
    background: url("../../assets/market/hero/price.png") no-repeat;
    background-size: contain;
    .price-number {
      line-height: 66px;
      margin-right: 10px;
      // margin-left: 60px;
    }
  }
  .mynft {
    display: flex;
  }
  .rent {
    width: 277px;
    height: 72px;
    // text-align: center;
    // font-size: 44px;
    // line-height: 72px;
    // color: #ffffff;
    // background: url("../../assets/market/chip/sell-btn.png") no-repeat;
    // background-size: contain;
  }
  .sell {
    width: 277px;
    height: 72px;
    text-align: center;
    font-size: 44px;
    line-height: 72px;
    color: #ffffff;
    background: url("../../assets/market/chip/sell-btn.png") no-repeat;
    background-size: contain;
  }
  .for-rent-btn {
    display: flex;
    // margin-top: 170px;
    .adjust {
      width: 277px;
      height: 72px;
      cursor: pointer;
      // margin-left: 14px;
      background: url("../../assets/market/chip/adjust.png") no-repeat;
      background-size: 100% 100%;
    }
    .remove {
      width: 277px;
      height: 72px;
      cursor: pointer;
      margin-left: 14px;
      background: url("../../assets/market/chip/remove.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
