<template>
  <div class="body">
    <div class="content">
      <div class="head">
        <span class="back-button" @click="back">
          <span class="i-box">
            <i class="iconfont iconyidong"></i>
          </span>
          返回
        </span>
      </div>
      <!-- 套餐列表 -->
      <ul class="package-list" v-if="steps === 0">
        <li v-for="(item, index) in thePackageList" :key="index">
          <div
            class="package-name"
            :class="{
              'package-name--A': item.level === 1,
              'package-name--B': item.level === 2,
              'package-name--C': item.level === 3,
              'package-name--D': item.level === 4,
              'package-name--E': item.level === 5,
            }"
          >
            {{ item.name }}
          </div>
          <div class="VIP-level">
            <div class="vip-box">
              <div
                class="title-box"
                :class="{
                  'title-box--A': item.level === 1,
                  'title-box--B': item.level === 2,
                  'title-box--C': item.level === 3,
                  'title-box--D': item.level === 4,
                  'title-box--E': item.level === 5,
                }"
              >
                VIP{{ item.level }}
                <div
                  class="icon-box"
                  :class="{
                    'icon-box--A': item.level === 1,
                    'icon-box--B': item.level === 2,
                    'icon-box--C': item.level === 3,
                    'icon-box--D': item.level === 4,
                    'icon-box--E': item.level === 5,
                  }"
                >
                  <i class="iconfont iconshoucang"></i>
                </div>
              </div>
            </div>
          </div>
          <p class="number number--A">
            {{ item.chain_times }}
            <span>次</span>
          </p>
          <p class="price">
            价格：
            <span>{{ item.price }}</span
            >元人民币
          </p>
          <p class="average-price">上链均价：{{ item.chain_price }}</p>
          <div class="buy">
            <div class="buy-button" @click="buyNow(item)">立即购买</div>
          </div>
        </li>
      </ul>
      <!-- 提示 -->
      <div class="tip-box" v-if="steps === 0">
        <p>提示：</p>
        <p>
          1、由于BEST的价格波动性，所以充值数量为估算，具体金额根据当前交易时间BEST的市值来计算；
        </p>
        <p>
          2、燃料充值年费说明：开通年费会员后，充值的套餐有效期一年，隔年自动作废，请尽快使用；
        </p>
        <p>
          3、套餐选购：按需购买套餐，套餐金额越大，单价越低，根据您的上链数量进行选购；
        </p>
        <p>
          4、由于BEST的市场价值波动，避免账户大量囤积，账户的上链次数使用完才能进行下一次充值；
        </p>
        <p>
          5、充值未完成时请不要切换账户，或者退出，否则可能出现充值不到账的情况；
        </p>
      </div>
      <!-- 订单列表 -->
      <div v-if="steps === 1">
        <div class="order-box">
          <div class="order-box-top">
            <div class="order-box-left">
              <div class="icondingdanshijian2x-box">
                <i class="iconfont icondingdanshijian2x"></i>
              </div>
            </div>
            <div class="order-box-right">
              <p class="prompt-order">
                您的订单已提交成功，现在只差最后一步啦！
              </p>
              <p class="the-order-no">订单编号：{{ orderId }}</p>
            </div>
          </div>
          <p class="amount-payable">
            应付金额：
            <span>￥{{ price }}.00</span> 元
          </p>
        </div>
        <div class="method-payment">
          <p class="title">支付方式</p>
          <ul>
            <li
              v-for="(item, index) in PaymentList"
              :key="index"
              :class="{ check: index === activeIndex }"
              @click="choose(item, index)"
            >
              <img :src="item.s_image_url" />
              <div class="selected" v-if="index === activeIndex">
                <i class="iconfont iconxuanzhong"></i>
              </div>
            </li>
          </ul>
          <div class="button" @click="determinePay">去支付</div>
        </div>
        <p class="warm-prompt">
          温馨提示：所有套餐都是年费套餐，超过一年剩余的套餐将会被清零，详情请
          <span class="contact-customer-service">联系客服</span>
          <span class="customer-service-WeChat">
            <p class="title">客服微信</p>
            <span class="imgbox">
              <img src="../../assets/images/userCenter/qrcode.png" alt />
            </span>
            <p class="tip">扫一扫添加客服微信号</p>
          </span>
        </p>
      </div>
      <!-- 步骤三 -->
      <div v-if="steps === 2">
        <div class="top-box">
          <div
            class="bg-box"
            v-if="this.PaymentList[this.activeIndex].type === 1"
          ></div>
          <div
            class="bg-box--other"
            v-if="this.PaymentList[this.activeIndex].type === 2"
            :style="bg"
          ></div>
          <div>
            <p>
              距离二维码过期还剩 <span>{{ times }}S</span>
            </p>
            <div class="right">订单编号：{{ orderId }}</div>
          </div>
        </div>
        <div
          class="money-box"
          v-if="this.PaymentList[this.activeIndex].type === 1"
        >
          应付金额：<span>￥{{ price }}.00</span> 元
        </div>
        <!--  -->
        <div
          class="money-box"
          v-if="this.PaymentList[this.activeIndex].type === 2"
        >
          应付{{ this.PaymentList[this.activeIndex].coin }}：<span>{{
            price
          }}</span>
          个
        </div>
        <div class="Qr-code">
          <img :src="payUrl" />
        </div>
        <div
          class="prompt-box"
          v-if="this.PaymentList[this.activeIndex].type === 1"
        >
          <div class="left">
            <i class="iconfont iconsaoma"></i>
          </div>
          <div class="right">
            <p>请使用微信扫一扫</p>
            <p>扫描二维码支付</p>
          </div>
        </div>
        <div
          class="prompt-box prompt-box--blue"
          v-if="this.PaymentList[this.activeIndex].type === 2"
        >
          <div class="left">
            <i class="iconfont iconsaoma"></i>
          </div>
          <div class="right">
            <p>请使用B钱包扫一扫</p>
            <p>扫描二维码支付</p>
          </div>
        </div>
        <div
          class="download"
          v-if="this.PaymentList[this.activeIndex].type === 2"
        >
          钱包下载地址：https://d.biqianbao.net
        </div>
        <div
          class="top-up-hints"
          v-if="this.PaymentList[this.activeIndex].type === 2"
        >
          <span>提示：</span>
          实际到账时间取决于区块链确认速度，大概需要5-30分钟时间。
        </div>
      </div>
    </div>
    <common-dialog showMask v-if="PromptShow" @closePopup="PromptShow = false">
      <prompt
        tip="您的账户还很充足奥~请剩余少量余额时在进行充值"
        @close="PromptShow = false"
      />
    </common-dialog>
  </div>
</template>

<script>
import { packageList, pay, orderType, getMethods } from "./Api.service";
import { payQR } from "@/utils/app/common";
import { GO_URLS } from "@/config/URLS";
import { getLoginCode } from "@/plugins/storage";
import CommonDialog from "@/components/CommonDialog.vue";
import prompt from "@/components/userCenter/prompt.vue";
export default {
  data() {
    return {
      thePackageList: [],
      steps: 0, //步骤
      price: 0,
      orderId: 0,
      payUrl: "",
      time: 18,
      isclick: true,
      PromptShow: false,
      PaymentList: [], // 支付方式列表
      activeIndex: 0,
      times: 180,
    };
  },
  components: {
    CommonDialog,
    prompt,
  },
  created() {
    this.getlist();
    this.Payment();
    if (this.$route.query.charset) {
      this.back();
    }
  },
  computed: {
    bg() {
      return (
        "background-image:url('" +
        this.PaymentList[this.activeIndex].s_image_url +
        "')"
      );
    },
  },
  methods: {
    //
    // 倒计时
    reduce() {
      this.timeID = setInterval(() => {
        this.times--;
        if (this.times === 0) {
          clearInterval(this.timeID);
        }
      }, 1000);
    },
    // 确定支付
    determinePay() {
      if (this.PaymentList[this.activeIndex].type === 0) {
        // 支付宝
        this.PaymentOrder(this.PaymentList[this.activeIndex].type);
      } else if (this.PaymentList[this.activeIndex].type === 1) {
        // 微信
        this.WeChatPay(this.PaymentList[this.activeIndex].type);
        this.steps = 2;
        this.reduce();
      } else if (this.PaymentList[this.activeIndex].type === 2) {
        // 币钱包支付
        this.OtherPayment(
          this.PaymentList[this.activeIndex].type,
          this.PaymentList[this.activeIndex].coin
        );
        this.steps = 2;
        this.reduce();
      }
    },
    async OtherPayment(type, coin) {
      const res = await pay({
        coin: coin,
        device: 0,
        id: this.orderId,
        method: type,
        return_url: window.location.href,
      });
      if (res) {
        this.cycle();
        this.price = JSON.parse(res.data.pay_url).amount / 100000000;
        if (res.data.pay_url) this.payUrl = await payQR(res.data.pay_url);
      }
    },
    choose(item, index) {
      this.activeIndex = index;
    },
    // 查询订单状态
    async getOrder() {
      const res = await orderType(this.orderId);
      if (res) {
        if (res.data.status === 2) {
          clearInterval(this.intervalHandle);
          clearInterval(this.timeID);
          this.$message({
            message: "恭喜您支付成功",
            type: "success",
          });
          this.$router.push({
            path: "/userCenter",
          });
        }
      }
    },
    // 倒计时
    cycle() {
      this.intervalHandle = setInterval(() => {
        if (this.time > 0) {
          this.time--;
          this.getOrder();
        } else {
          clearInterval(this.intervalHandle);
          this.$router.push({
            path: "/userCenter",
          });
        }
      }, 10000);
    },
    // 微信支付
    async WeChatPay(type) {
      const res = await pay({
        device: 0,
        id: this.orderId,
        method: type,
        return_url: window.location.href,
      });
      if (res) {
        this.cycle();
        this.payUrl = await payQR(res.data.pay_url);
      }
    },
    // 支付宝支付
    async PaymentOrder(type) {
      if (!this.isclick) return;
      this.isclick = false;
      const res = await pay({
        device: 0,
        id: this.orderId,
        method: type,
        return_url: window.location.href,
      });
      if (res) {
        this.isclick = true;
        this.cycle();
        window.open(res.data.pay_url);
      }
    },
    // 购买套餐
    async buyNow(item) {
      this.price = item.price;
      this.addOrder(item.id);
    },
    // 获取所有支付方式列表
    async Payment() {
      const res = await getMethods();
      if (res) this.PaymentList = res.data.pay_methods;
    },
    // 新增订单
    async addOrder(id) {
      var xhr = new XMLHttpRequest();
      var url = GO_URLS.addOrder;
      let data = {
        plan_id: id,
      };
      let token = "Bearer " + getLoginCode();
      xhr.open("post", url, true);
      xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
      xhr.setRequestHeader("Authorization", token);
      xhr.onload = this.uploadComplete; //请求完成、
      xhr.onerror = this.uploadFailed; //请求失败
      xhr.send(JSON.stringify(data));
    },
    uploadComplete(xhr) {
      //返回的结果
      const res = JSON.parse(xhr.target.response);
      if (res.code === 10603) {
        this.PromptShow = true;
      } else if (res.code === 200) {
        this.orderId = res.data.id;
        this.steps = 1;
      } else if (res.code == 403) {
        this.$message({
          message: "登录过期,请刷新页面",
          type: "warning",
        });
        sessionStorage.removeItem("user");
        router.push({ path: "/" });
      }
    },
    uploadFailed(xhr) {
      this.$message({
        message: "网络异常",
        type: "error",
      });
    },
    // 返回上个操作，删除所有定时器
    back() {
      clearInterval(this.intervalHandle);
      clearInterval(this.timeID);
      this.$router.push({ path: "/userCenter" });
    },
    async getlist() {
      const res = await packageList();
      if (res) {
        this.thePackageList = res.data.results;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  min-width: 1000px;
  padding: 16px 21px 56px 19px;
  background: rgba(248, 250, 251, 1);
}
.content {
  background: white;
  padding-left: 28px;
  height: 755px;
  padding-right: 38px;
}
.head {
  padding-top: 20px;
  padding-bottom: 36px;
}
.top-box {
  height: 65px;
  background: #f9f9f9;
  border-radius: 4px;
  line-height: 65px;
  p {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #353535;
    display: inline-block;
    span {
      color: #f3322d;
    }
  }
  .right {
    float: right;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #797d84;
    margin-right: 44px;
  }
}
.money-box {
  text-align: center;
  margin-top: 62px;
  height: 30px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #353535;
  line-height: 20px;
  margin-bottom: 17px;
  span {
    color: #ff3838;
    font-size: 22px;
  }
}
.Qr-code {
  width: 187px;
  height: 187px;
  margin: 0 auto;
  border: 1px solid #000;
  img {
    width: 100%;
  }
}
.prompt-box {
  width: 196px;
  height: 49px;
  background: #60cd48;
  margin: 0 auto;
  margin-top: 11px;
  color: white;
  .left {
    float: left;
    height: 100%;
    line-height: 49px;
    margin-left: 31px;
    i {
      font-size: 24px;
    }
  }
  .right {
    float: left;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    height: 49px;
    color: #ffffff;
    margin-left: 13px;
    P {
      &:first-child {
        padding-top: 7px;
        padding-bottom: 4px;
      }
    }
  }
}
.prompt-box--blue {
  background: #3f79fe;
}
.download {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 30px;
  height: 17px;
  cursor: pointer;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #353535;
  line-height: 17px;
}
.top-up-hints {
  width: 435px;
  height: 45px;
  background: #f5f9fc;
  border-radius: 4px;
  line-height: 45px;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #797d84;
  span {
    color: #462f2e;
  }
}
.bg-box {
  width: 150px;
  margin-right: 57px;
  height: 34px;
  float: left;
  margin-top: 15px;
  margin-left: 96px;
  background: url("../../assets/images/userCenter/WeChat.png") no-repeat center;
}
.bg-box--other {
  width: 160px;
  margin-right: 57px;
  height: 34px;
  float: left;
  margin-top: 15px;
  margin-left: 96px;
  // background: url("../../assets/images/userCenter/other.png") no-repeat center;
  background-position: center;
  background-repeat: no-repeat;
}
.back-button {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  cursor: pointer;
  color: rgba(63, 121, 254, 1);
  .i-box {
    transform: rotate(180deg);
    display: inline-block;
    vertical-align: middle;
    i {
      font-size: 14px;
    }
  }
}
.tip-box {
  margin-top: 26px;
  p:first-child {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3f79fe;
    line-height: 20px;
  }
  p {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #797d84;
    line-height: 20px;
  }
}
.package-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    width: calc(20% - 22px);
    max-width: 294px;
    height: 420px;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(248, 250, 251, 1);
    border-radius: 3px;
    &:hover {
      border: 1px solid rgba(63, 121, 254, 1);
    }
  }
}
.package-name {
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 64px;
  text-align: center;
  height: 64px;
}
.package-name--A {
  background: linear-gradient(
    270deg,
    rgba(52, 172, 255, 1) 0%,
    rgba(63, 128, 254, 1) 100%
  );
}
.package-name--B {
  background: linear-gradient(
    270deg,
    rgba(95, 190, 255, 1) 0%,
    rgba(0, 178, 254, 1) 100%
  );
}
.package-name--C {
  background: linear-gradient(
    270deg,
    rgba(52, 226, 255, 1) 0%,
    rgba(63, 190, 254, 1) 100%
  );
}
.package-name--D {
  background: linear-gradient(
    270deg,
    rgba(52, 226, 255, 1) 0%,
    rgba(63, 190, 254, 1) 100%
  );
}
.package-name--E {
  background: linear-gradient(
    270deg,
    rgba(52, 226, 255, 1) 0%,
    rgba(63, 190, 254, 1) 90%
  );
}
.VIP-level {
  margin-top: 54px;
  margin-bottom: 12px;
  .vip-box {
    margin: 0 auto;
    width: 40px;
  }
}
.title-box {
  width: 56px;
  height: 24px;
  border-radius: 12px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 24px;
  position: relative;
  text-indent: 22px;
}
.title-box--A {
  color: rgba(53, 53, 53, 1);
  background: rgba(193, 231, 245, 1);
}
.title-box--B {
  color: white;
  background: rgba(239, 200, 153, 1);
}
.title-box--C {
  color: white;
  background: rgba(255, 160, 101, 1);
}
.title-box--D {
  color: white;
  background: rgba(246, 210, 38, 1);
}
.title-box--E {
  color: white;
  background: rgba(246, 200, 38, 1);
}
.icon-box {
  width: 30px;
  position: absolute;
  height: 30px;
  border-radius: 15px;
  text-align: center;
  top: -3px;
  left: -11px;
  line-height: 30px;
  text-indent: initial;
  i {
    color: white;
  }
}
.icon-box--A {
  background: rgba(129, 188, 227, 1);
}
.icon-box--B {
  background: rgba(195, 141, 83, 1);
}
.icon-box--C {
  background: rgba(255, 127, 39, 1);
}
.icon-box--D {
  background: rgba(250, 203, 48, 1);
}
.icon-box--E {
  background: rgba(246, 200, 38, 1);
}
.number {
  text-align: center;
  margin: 0;
  height: 42px;
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;

  line-height: 42px;
  span {
    color: #353535;
    font-size: 14px;
  }
}
.number--A {
  color: rgba(193, 210, 246, 1);
}
.number--B {
  color: #c37e3d;
}
.number--C {
  color: #ff7700;
}
.number--D {
  color: #ffd200;
}
.price {
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(53, 53, 53, 1);
  text-align: center;
  line-height: 22px;
  margin: 0;
  margin-top: 32px;
  margin-bottom: 10px;
  span {
    color: #3f79fe;
    font-size: 16px;
  }
}
.average-price {
  text-align: center;
  margin: 0;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(129, 129, 129, 1);
  line-height: 20px;
}
.buy {
  margin-top: 46px;
  .buy-button {
    width: 120px;
    height: 40px;
    margin: 0 auto;
    background: rgba(63, 121, 254, 1);
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    transition: 0.3s;
    &:hover {
      transform: scale(1.1);
    }
  }
}
.order-box {
  height: 172px;
  background: #f9f9f9;
  border-radius: 4px;
  padding-left: 42px;
}
.order-box-top {
  height: 116px;
  overflow: hidden;
}
.order-box-left,
.order-box-right {
  float: left;
}
.order-box-right {
  padding-left: 20px;
}
.order-box-left {
  width: 44px;
  height: 100%;
  .icondingdanshijian2x-box {
    width: 44px;
    height: 44px;
    margin-top: 38px;
    background: #3f79fe;
    border-radius: 50%;
    line-height: 44px;
    text-align: center;
  }
  i {
    color: white;
    font-size: 22px;
  }
}
.prompt-order {
  height: 28px;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #353535;
  line-height: 28px;
  padding-top: 32px;
  padding-bottom: 8px;
}
.the-order-no {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #797d84;
  line-height: 20px;
}
.amount-payable {
  line-height: 55px;
  font-size: 14px;
  border-top: 1px solid #e7e7e7;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #353535;
  span {
    color: #ff3838;
    font-size: 22px;
  }
}
.method-payment {
  overflow: hidden;
  margin-top: 42px;
  .title {
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #353535;
    line-height: 22px;
    margin-bottom: 19px;
  }
  ul {
    overflow: hidden;
    li {
      width: 242px;
      list-style: none;
      height: 70px;
      border-radius: 4px;
      margin-right: 28px;
      float: left;
      border: 1px solid #c8c8c8;
      cursor: pointer;
      position: relative;
      img {
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      .selected {
        position: absolute;
        bottom: -1px;
        right: 0;
        color: #3f79fe;
        i {
          font-size: 24px;
        }
      }
    }
    .check {
      border: 1px solid #3f79fe;
    }
  }
  .button {
    margin-top: 31px;
    width: 120px;
    height: 40px;
    background: #3f79fe;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    line-height: 40px;
  }
}
.warm-prompt {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(129, 129, 129, 1);
  margin: 0;
  margin-top: 75px;
  position: relative;
}
.contact-customer-service {
  color: #3f79fe;
  cursor: pointer;
  &:hover + .customer-service-WeChat {
    display: block;
  }
}
.customer-service-WeChat {
  position: absolute;
  width: 153px;
  height: 194px;
  display: none;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.13);
  top: -97px;
  left: 590px;
  .title {
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(53, 53, 53, 1);
    margin: 0;
    margin-top: 17px;
    margin-bottom: 7px;
  }
  .imgbox {
    width: 103px;
    height: 103px;
    display: block;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
  .tip {
    margin: 0;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(129, 129, 129, 1);
    text-align: center;
    margin-top: 7px;
  }
}
</style>>

