<template>
  <el-dialog :show-close="false" :visible.sync="isBuy">
    <div class="bg"></div>
    <div class="container">
      <div class="hero-top">
        <div class="piece-left">
          <div class="piece-img">
            <img
              v-if="piece.c_id"
              width="97px"
              :src="require('@/assets/market/piece/' + piece.c_id + '.png')"
              alt=""
            />
            <img
              v-else
              width="97px"
              :src="
                require('@/assets/market/chip/details/' +
                  data.c_id +
                  '_full.png')
              "
              alt=""
            />
          </div>
          <div class="name">
            {{ piece.c_name ? piece.c_name : data.c_name }}
          </div>
        </div>
        <div class="hero-right">
          <div class="userinfo">
            <div class="srabded">
              <div>Srabded</div>
              <div>ERC721</div>
            </div>
            <div class="token-id">
              <div>ERC721</div>
              <div>#{{ piece.token_id ? piece.token_id : data.token_id }}</div>
            </div>
          </div>
          <div class="priece">
            <div class="priece-btn">
              <div class="priece-number">
                {{ piece.s_price ? piece.s_price : data.s_price }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="priece-bottom">
        <div class="token-usid">
          <div class="token-item-top">
            <div>Token</div>
            <div>USDT</div>
          </div>
          <div class="token-item">
            <div>Price</div>
            <div>{{ piece.s_price ? piece.s_price : data.s_price }}</div>
          </div>
          <div class="token-item-balance">
            <div>Balance</div>
            <div class="balance">0.37</div>
          </div>
        </div>
        <div class="buy-state">
          <div class="title">You don’t hane enough USDT to purchase.</div>
          <div class="progress-content">
            <div class="progress">
              <div class="approve-progress"></div>
              <div class="boder"></div>
              <div class="buy-progress"></div>
            </div>

            <div class="progress-neme">
              <div>Approve</div>
              <div>buy</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pending">
        <div class="pending-order" @click="haldBuy">PEBDING ORDER</div>
        <div class="confirm">CONFIRM</div>
      </div>
    </div>

    <span @click="closeTip" class="close">
      <img
        src="../../assets/market/hero/cose.png"
        width="38px"
        height="38px"
        alt=""
    /></span>
  </el-dialog>
</template>

<script>
import { AppModule } from "@/store/modules/app";
import { CONTRACT_ADDRESS } from "@/configs/config_chain";
import ChainManager from "@/chain/ChainManager";
export default {
  props: ["isBuy", "data"],
  data() {
    return {
      piece: "",
      orderId: 0,
      chainManager: new ChainManager(),
      dialogVisible: false,
    };
  },
  methods: {
    async haldBuy() {
      try {
        const nftres = await this.chainManager.bc.beginBuy(
          this.orderId,
          CONTRACT_ADDRESS["1338"].address
        );
        console.log(nftres, "beginSell");
      } catch (err) {
        console.log("query order status error", err);
      }
    },
    closeTip() {
      // 分发自定义事件(事件名: closeTip)
      this.$emit("handBuyHide", false);
      // console.log("closeTip");
    },
    init(data) {
      this.piece = data;
      console.log(data, "dfgdg0900,2020-19");
      console.log(this.piece, "this.piece.detail.balance12qrqwerqwer");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog,
.el-pager li {
  position: relative;
  width: 634px !important;
  height: 593px !important;
  background: url("../../assets/market/dialog/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: -46px;
  top: -31px;
}
.container {
  padding-top: 28px;
  padding-left: 36px;
  padding-right: 34px;
  padding-bottom: 27px;
  height: 538px;
  position: relative;
  .price-title {
    font-size: 33px;
    font-weight: bold;
    padding-bottom: 14px;
    text-align: center;
    color: #ffffff;
  }
  .hero-top {
    display: flex;
    justify-content: space-between;
    .hero-left {
      width: 149px;
      height: 163px;
      background: url("../../assets/market/chip/bg-there.png") no-repeat;
      background-size: 100% 100%;
    }
    .hero-right {
      font-size: 25px;
      font-weight: bold;
      color: #ffffff;
      .userinfo {
        width: 368px;
        height: 87px;
        font-size: 22px;
        font-weight: bold;
        color: #ffffff;
        background: #28c1ed;
        border: 4px solid rgba(91, 211, 246, 0.4);
        border-radius: 18px;
        .srabded {
          display: flex;
          margin-top: 10px;
          margin-bottom: 10px;
          margin-right: 18px;
          margin-left: 19px;
          justify-content: space-between;
        }
        .token-id {
          display: flex;
          margin-left: 19px;
          margin-right: 18px;
          justify-content: space-between;
        }
      }
      .priece {
        width: 100%;
        display: flex;
        justify-content: flex-end;

        .priece-btn {
          width: 148px;
          height: 52px;
          font-size: 25px;
          font-weight: bold;
          margin-top: 21px;
          line-height: 52px;
          //   text-align: center;
          background: url("../../assets/market/hero/price.png") no-repeat;
          background-size: 100% 100%;
          .priece-number {
            margin-left: 46px;
          }
        }
      }
    }
  }

  .priece-bottom {
    margin-top: 19px;
    .token-usid {
      width: 564px;
      height: 155px;
      background: rgba(26, 58, 175, 0.3);
      border-radius: 20px;
      .token-item-top {
        display: flex;
        height: 50px;
        // width: 100%;
        // padding-top: 15px;
        padding-left: 25px;
        padding-right: 55px;
        font-size: 26px;
        font-weight: bold;
        color: #ffffff;
        align-items: center;
        justify-content: space-between;
        background: rgba(26, 58, 175, 0.3);
        border-radius: 20px;
      }
      .token-item {
        display: flex;
        justify-content: space-between;
        padding-top: 20px;
        color: #ffffff;
        padding-right: 55px;
        font-size: 22px;
        font-weight: 600;
        color: #ffffff;
        padding-left: 27px;
      }
      .token-item-balance {
        display: flex;
        justify-content: space-between;
        padding-top: 15px;
        color: #ffffff;
        padding-right: 55px;
        font-size: 22px;
        font-weight: 600;
        color: #ffffff;
        padding-left: 27px;
        .balance {
          font-weight: 600;
          color: #ff3b3b;
        }
      }
    }
    .buy-state {
      width: 100%;
      margin-top: 10px;
      .title {
        text-align: center;
        font-size: 22px;
        font-weight: 600;
        color: #fe3c3e;
      }
      .progress {
        display: flex;
        align-items: center;
        justify-content: center;
        .approve-progress {
          width: 17px;
          height: 17px;
          background: rgba(43, 204, 237, 1);
          border: 2px solid #557cda;
          border-radius: 50%;
        }
        .boder {
          width: 250px;
          height: 2px;
          background: #cfdcff;
          border-radius: 1px;
        }
        .buy-progress {
          width: 17px;
          height: 17px;
          background: rgba(170, 191, 247, 1);
          border: 2px solid #557cda;
          border-radius: 50%;
        }
      }
      .progress-neme {
        display: flex;
        margin-left: 106px;
        margin-right: 133px;
        font-size: 22px;
        font-weight: 600;
        color: #ffffff;
        margin-top: 6px;
        justify-content: space-between;
      }
    }
  }

  .pending {
    position: absolute;
    right: 95px;
    bottom: -103px;
    font-size: 26px;
    .pending-order {
      width: 426px;
      height: 76px;
      text-align: center;
      color: #ffffff;
      cursor: pointer;
      line-height: 76px;
      margin-bottom: 47px;
      background: url("../../assets/market/dialog/order.png") no-repeat;
      background-size: 100% 100%;
    }
    .confirm {
      width: 426px;
      height: 76px;
      text-align: center;
      line-height: 76px;
      cursor: pointer;
      color: #9dabd3;
      background: url("../../assets/market/dialog/confirm.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
.piece-left {
  width: 137px;
  height: 150px;
  background: url("../../assets/market/chip/bg-there.png") no-repeat;
  background-size: 100% 100%;
  .piece-img {
    margin-top: 20px;
    margin-left: 21px;
  }
  .name {
    width: 100%;
    text-align: center;
  }
}
</style>
