<template>
  <el-dialog :show-close="false" :visible.sync="isPiecePut">
    <div class="bg"></div>
    <div class="container">
      <div class="price-title">PRIECE SETTIONG</div>
      <HeroSellTop :data="data" v-if="type === 'hero'" />
      <WeaponSellTop :data="data" v-else-if="type === 'weapon'" />
      <ChipSellTop :data="data" v-else-if="type === 'chip'" />
      <PieceSellTop
        @handReduce="handReduce"
        @handPlus="handPlus"
        :data="piece"
        :cunout="cunout"
        v-else
      />
      <div class="piece-bottom">
        <div class="piece-bottom-top">
          <div class="price-input">
            <el-input placeholder="Input your price" v-model="price"></el-input>
          </div>
          <div class="attributes">
            <el-select
              class="se"
              v-model="value"
              :popper-append-to-body="false"
              placeholder=""
              popper-class="select-popper"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="piece-bottom-center">
          <div class="minimum">
            <div>The minimum price setting is</div>
            <div>1.01 &nbsp;&nbsp;&nbsp;USDT</div>
          </div>
          <div class="minimum">
            <div>The maximum price setting is</div>
            <div>999999.99&nbsp; &nbsp;&nbsp;USDT</div>
          </div>
          <div class="wingning">
            <div>
              <img
                width="57px"
                src="../../assets/market/dialog/wingning.png"
                alt=""
              />
            </div>
            <div class="slogn">
              When you list NFT on the marketplace,<br />
              you wil lose the right to use NFT in the game.
            </div>
          </div>
        </div>
        <div class="pending">
          <div class="pending-order" @click="handMessage">PEBDING ORDER</div>
          <div class="confirm">CONFIRM</div>
        </div>
      </div>
    </div>
    <span @click="closeTip" class="close">
      <img
        src="../../assets/market/hero/cose.png"
        width="51px"
        height="51px"
        alt=""
    /></span>
  </el-dialog>
</template>

<script>
import WeaponSellTop from "./WeaponSellTop.vue";
import PieceSellTop from "./PieceSellTop.vue";
import HeroSellTop from "./HeroSellTop.vue";
import ChipSellTop from "./ChipSellTop.vue";
import { sellMyNft } from "@/api/Market";
import ChainManager from "@/chain/ChainManager";

export default {
  props: ["isPiecePut", "type", "data"],
  components: {
    WeaponSellTop,
    HeroSellTop,
    ChipSellTop,
    PieceSellTop,
  },
  data() {
    return {
      piece: "",
      price: "",
      chainManager: new ChainManager(),
      cunout: 1,
      dialogVisible: false,
      isWeapon: false,
      options: [
        {
          value: "选项1",
          label: "USDT",
        },
        {
          value: "选项2",
          label: "CEG",
        },
        {
          value: "选项3",
          label: "CEC",
        },
        {
          value: "选项4",
          label: "MATIC",
        },
      ],
      value: "",
    };
  },
  created() {
    console.log(this.data, "data");
  },
  methods: {
    closeTip() {
      this.$emit("handPutHide");
    },
    async handMessage() {
      // this.$emit("handMessage");
      const data = {
        nft_token: this.piece
          ? this.piece.detail.token_id
          : this.data.detail.token_id,
        s_price: this.price,
        amount: this.piece ? this.cunout : null,
      };

      const res = await sellMyNft(data);
      try {
        const shellData = {
          nftToken: "",
          currency: "",
          tokenId: this.piece
            ? this.piece.detail.token_id
            : this.data.detail.token_id,
          amount: this.piece ? this.cunout : null,
          price: this.price,
          marketAddress: "",
        };
        const res = await this.beginSell(shellData);
        console.log(res);
      } catch (err) {
        console.log(err);
        this.$message({
          type: "info",
          message: "error transfer",
        });
      }

      console.log("handMessage1", res);
    },
    async beginSell(data) {
      return this.chainManager.beginNftSell({
        nftToken: data.nftToken,
        currency: data.currency,
        tokenId: data.tokenId,
        amount: data.amount,
        price: data.price,
        marketAddress: data.marketAddress,
      });
    },
    init(data) {
      this.dialogVisible = true;
      this.piece = data;
      console.log(data, "dfgdg");
      console.log(this.piece.detail.balance, "this.piece.detail.balance");
    },
    handReduce() {
      if (this.cunout > 0) {
        this.cunout--;
      }
    },
    handPlus() {
      if (this.cunout < this.piece.balance) {
        this.cunout++;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$item-bg-color: rgba(43, 204, 237, 0.34);
$item-size: 22px;
::v-deep .el-dialog,
.el-pager li {
  position: relative;
  width: 583px !important;
  height: 584px !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: 20px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 24px;
  height: 540px;
  position: relative;
  .price-title {
    font-size: 33px;
    font-weight: bold;
    padding-bottom: 14px;
    text-align: center;
    color: #ffffff;
  }

  .piece-bottom {
    .piece-bottom-top {
      display: flex;
      width: 100%;
      justify-content: space-between;
      margin-top: 20px;
      margin-bottom: 19px;
      .price-input {
        width: 310px;
        height: 48px;
        ::v-deep .el-input__inner {
          height: 48px;
          border-radius: 24px 10px 10px 24px;
        }
        ::v-deep .el-input__inner {
          &::placeholder {
            text-align: center;
            font-size: 23px;
            font-weight: normal;
            color: #d9d8d8;
          }
        }
      }
      .attributes {
        width: 183px;
        height: 48px;
        ::v-deep .el-input--suffix .el-input__inner {
          width: 183px;
          height: 48px;
          background: #2bcced;
          border-radius: 10px 24px 24px 10px;
          border: none;
          font-size: 24px;
          font-weight: 600;
          // text-align: center;
          color: #fff;
        }

        ::v-deep .el-select .el-input .el-select__caret.el-input__icon::before {
          content: "";
          background: url("../../assets/market/filter-left/select-icon.png")
            center center no-repeat;
          color: #fd724e;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        ::v-deep .el-input__inner {
          &::placeholder {
            color: #fff;
          }
        }
        ::v-deep .select-popper {
          background-color: $item-bg-color;
          border-radius: 0.08rem;
          border: solid 0.02rem $item-bg-color;
          border-radius: 18px;
          font-family: "PingFangSC-Regular";

          .el-select-dropdown__item.selected {
            font-family: "PingFangSC-Regular";
            font-size: $item-size;
            border-radius: 18px;
            // color: rgb(16, 17, 17);
          }
          li {
            color: #fff;
            background: transparent;
            color: #fff;
            // text-align: center;
            border-radius: 18px;
            font-weight: 600;
            font-size: $item-size;
          }
          .el-select-dropdown__item:hover,
          .el-select-dropdown__item.hover {
            background: #2bcced;
            margin-right: 1px;
          }
          .popper__arrow::after {
            border-bottom-color: $item-bg-color;
          }
          .popper__arrow {
            border-bottom-color: $item-bg-color;
          }
          .el-select-dropdown__empty {
            padding: 0.2rem;
            font-size: $item-size;
          }
        }
      }
    }
    .minimum {
      display: flex;
      font-size: 17px;
      color: #fc3b57;
      justify-content: space-between;
    }
    .wingning {
      display: flex;
      margin-top: 27px;
      margin-left: 36px;
      align-items: center;
      justify-content: center;
      .slogn {
        width: 350px;
        height: 37px;
        margin-left: 14px;
        font-size: 17px;
        color: #fc3b57;
      }
    }
  }
  .pending {
    position: absolute;
    right: 84px;
    bottom: -101px;
    font-size: 26px;
    .pending-order {
      width: 401px;
      height: 78px;
      text-align: center;
      color: #ffffff;
      cursor: pointer;
      line-height: 78px;
      margin-bottom: 41px;
      background: url("../../assets/market/dialog/order.png") no-repeat;
      background-size: 100% 100%;
    }
    .confirm {
      width: 401px;
      height: 78px;
      text-align: center;
      line-height: 78px;
      cursor: pointer;
      color: #9dabd3;
      background: url("../../assets/market/dialog/confirm.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
