<template>
  <div class="manual003">
    <div class="title">产品详情</div>
    <div class="text">
      <div class="desc">
        <div class="main" v-html="pageData.orderingInfo"></div>
      </div>
      <div class="btmZZ"></div>
    </div>
    <div v-if="pageData.givePhoneInfo">
      <div class="title">流量使用说明</div>
      <div class="btmText">
        <div class="main" v-html="pageData.givePhoneInfo"></div>
      </div>
    </div>
    <div class="oreder">
      <div class="oerdetText" @click="getMember">领取权益</div>
      <div class="oerdetText" @click="beforeLogin">退订产品</div>
    </div>
    <!--退订弹窗-->
    <van-overlay :show="showUnbuy" :duration="0.1">
      <div class="unbuy-modal modal">
        <img src="../../templates/assets/top.png" class="top" />
        <img src="../../templates/assets/logo.png" class="logo" />
        <div class="body-box">
          <div class="input-box">
            <div class="input">
              <input
                type="text"
                v-model="loginForm.phone"
                placeholder="手机号码"
              />
            </div>
          </div>
          <div class="input-box">
            <div class="input">
              <input
                type="text"
                v-model="loginForm.vcode"
                v-on:input="checkVcode"
                placeholder="验证码"
              />
            </div>
            <div :class="{ code: 1, number: codeState.state }" @click="getCode">
              {{ codeState.state ? codeState.time + "s" : "获取验证码" }}
            </div>
          </div>
          <div class="btn-box">
            <div class="btn right" @click="handleLogin">退订</div>
            <div class="btn left" @click="showUnbuy = false">取消</div>
          </div>
          <div v-if="unBuyText" class="unBuyText">
            {{ unBuyText }}
          </div>
        </div>
      </div>
    </van-overlay>
    <van-overlay
      :show="showTimeout"
      :duration="0.1"
      @click="showTimeout = false"
    >
      <div class="timeout-modal modal" @click.stop>
        <div>中国联通正在努力为您开通，</div>
        <div>请以收到开通成功的短信为准。</div>
        <div>感谢您的耐心等待！</div>
        <div class="btn" @click="showTimeout = false">确认</div>
      </div>
    </van-overlay>
    <!-- 图形验证 -->
    <vue-puzzle :show="showVcode" @success="onSuccessCode"></vue-puzzle>
  </div>
</template>

<script>
import addR from "../../common/addRecord";
import vuePuzzle from "vue-puzzle-vcode";
import {
  postBuy,
  getCode,
  login,
  detMainProduct,
  addRecord,
} from "../../api/index";
export default {
  name: "manual003",
  components: { vuePuzzle },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMGS_URL,
      showQr: false,
      showUnbuy: false,
      showTimeout: false,
      showVcode: false,
      loginForm: {
        phone: "",
        vcode: "",
      },
      codeState: {
        state: false,
        time: 60,
        task: null,
      },
      productId: "",
      channl: {},
      channelKey: "",
      pageData: {},
      unBuyText: "",
    };
  },
  created() {
    this.productId = this.$route.query.productId;
    this.channelKey = this.$route.query.channelKey;
    this.unBuyText = this.$route.query.unBuyText;
    this.getProductInfo();
  },
  methods: {
    getProductInfo() {
      let productId = this.productId;
      return detMainProduct({ productId: productId }).then((res) => {
        this.pageData = res.data;
      });
    },
    // 登录验证框弹起
    beforeLogin() {
      this.showUnbuy = true;
    },
    // 登录验证成功后
    handleLogin() {
      this.onLogin().then(() => {
        this.showUnbuy = false;
        addR.unBuyClick();
        this.unbuy();
      });
    },
    // 领取会员
    getMember() {
      let userid = localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "";
      if (userid) {
        addRecord({
          userid: userid,
          accessResource: "发起登录",
          channelKey: this.channelKey,
          eventType: "7",
          fromSource: localStorage.getItem("beCome"),
          productId: this.productId,
        });
        setTimeout(() => {
          window.location.href = "https://cs.mige.tv/H";
        }, 200);
      } else {
      }
    },
    unbuy() {
      let updata = {
        cpid: this.pageData.cpid,
        spid: this.pageData.spid,
        productId: this.pageData.id,
        channelKey: this.channelKey,
        token: "00011223360000011223360012233600",
        type: "1",
        userid: this.$store.state.user.userid,
      };
      postBuy(updata).then(
        (res) => {
          if (res.code === 10000) {
            this.isBuy = "已退订";
            addR.unBuySuccess();
            this.$toast.success("退订成功");
          }
        },
        (res) => {
          addR.unBuyFail(res);
          this.$toast(res.message);
        }
      );
    },
    checkVcode() {
      if (this.loginForm.vcode.length > 6) {
        this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
      }
    },
    onSuccessCode() {
      this.showVcode = false;
      let { phone } = this.loginForm;
      getCode({
        phone,
      }).then(
        (res) => {
          this.$toast("验证码已发送");
          this.codeState.state = true;
          this.codeState.task = setInterval(() => {
            if (this.codeState.time <= 0) {
              clearInterval(this.codeState.task);
              this.codeState.task = null;
              this.codeState.state = false;
              this.codeState.time = 60;
            } else {
              this.codeState.time--;
            }
          }, 1000);
        },
        (res) => {
          this.$toast(res.message);
        }
      );
    },
    getCode() {
      if (this.codeState.state) return;
      let { phone } = this.loginForm;
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      this.showVcode = true;
    },
    onLogin() {
      let { phone, vcode } = this.loginForm;
      if (!vcode) {
        return this.$toast("请输入验证码");
      }
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      return new Promise((resolve, reject) => {
        login({
          phone,
          vcode,
        }).then(
          (res) => {
            if (res.code === 500 || res.data === "") {
              this.$toast.fail("登录失败");
              reject();
            } else {
              clearInterval(this.codeState.task);
              this.codeState.task = null;
              this.codeState.state = false;
              this.codeState.time = 60;
              let flag = this.$store.state.user.userid === "";
              this.$store.commit("setUser", {
                userid: res.data.userid,
                phone: this.loginForm.phone,
              });
              if (localStorage.getItem("userid")) {
                addR.loginSuccess();
              }
              this.loginForm = {};
              resolve();
            }
          },
          (res) => {
            this.$toast(res.message);
            reject();
          }
        );
      });
    },
  },
};
</script>

<style scoped lang="scss">
.manual003 {
  background-color: #1b1414;
  color: #f6f6f7;
  height: 100vh;
  overflow-y: scroll;
  font-family: PingFang SC;
  padding: 0 62px;
  color: #f6f6f7;
  .title {
    font-size: 42px;
    font-weight: bold;
    padding-top: 40px;
  }
  .text {
    position: relative;
    .desc {
      margin-top: 20px;
      height: 780px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      line-height: 40px;
      position: relative;
      padding-bottom: 10px;
      .main {
        width: auto;
        /*width: 626px;*/
        word-break: break-all;
      }
    }
    .btmZZ {
      width: 624px;
      position: absolute;
      bottom: 0;
      height: 40px;
      background-image: linear-gradient(
        180deg,
        rgba(27, 20, 20, 0.65),
        #1b1414
      );
      border-radius: 6px;
    }
  }
  .btmText {
    padding-bottom: 200px;
    .main {
      word-break: break-all;
    }
  }
  .oreder {
    color: #fd5200;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    text-decoration: underline;
    padding: 50px 0 100px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    background-color: #1b1414;
  }
  .unbuy-modal {
    top: 366px;
    .body-box {
      padding: 40px 50px 70px;
      .input-box {
        display: flex;
        line-height: 75px;
        margin-bottom: 25px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #d6000f;

        .input {
          font-size: 32px;
          color: #000;
          flex: 1;
          background-color: transparent;

          input {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            width: 100%;
          }
        }

        .code {
          font-size: 28px;
          width: 150px;
          margin: 0 10px;
          color: #d6000f;

          &.number {
            color: #a7a7a7;
          }
        }
      }
      .btn-box {
        display: flex;
        justify-content: space-between;

        .btn {
          width: 190px;
          margin-top: 20px;
          height: 80px;
          line-height: 80px;
          border-radius: 40px;
          font-size: 34px;
          font-weight: bold;
          text-align: center;
        }

        .left {
          background: #ffffff;
          border: 2px solid #bfbfbf;
          border-radius: 8px;
        }

        .right {
          color: #d6000f;
          background: #ffffff;
          border: 2px solid #d6000f;
          border-radius: 8px;
        }
      }
    }
    .btn {
      margin-top: 40px;
      height: 80px;
      line-height: 80px;
      background: #fdc51b;
      border-radius: 40px;
      font-size: 34px;
      font-weight: bold;
      color: #0d0d0d;
      text-align: center;
    }
    .unBuyText {
      margin-top: 40px;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      color: #0d0d0d;
    }
  }
  .timeout-modal {
    padding: 60px 65px;
    font-size: 28px;
    line-height: 50px;
    text-align: center;
    color: #222222;

    .btn {
      width: 160px;
      line-height: 60px;
      margin: 50px auto 0;
      border-radius: 8px;
      background-color: #1876bc;
      color: #fff;
    }
  }
  .modal {
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 333px;
    transform: translateX(-50%);
    width: 530px;
    background-color: #fff;
    border-radius: 8px;

    .close {
      width: 80px;
      height: 80px;
      position: absolute;
      bottom: -130px;
      left: 50%;
      transform: translateX(-50%);
    }

    .top {
      width: 530px;
      height: 96px;
    }

    .logo {
      width: 92px;
      height: 50px;
      position: absolute;
      top: 22px;
      left: 37px;
    }
  }
}
</style>
