<template>
  <div class="member">
    <div class="bannerBox">
      <img class="banner" src="./memberImg/banner.png" alt="" />
      <div class="userBox">
        <div class="userImg">
          <img src="./memberImg/user.png" alt="" />
        </div>
        <div class="user">
          {{ phone === "" ? "请先登录" : formatPhone(phone) }}
        </div>
      </div>
    </div>
    <div class="productBox" :class="isVal !== null ? 'bgo' : ''">
      <div class="product" v-for="(item, index) in productList" :key="index" :class="index === num && isVal === null ? 'active' : ''" @click="isVal === null ? productClick(item.cpid, index) : ''">
        <div v-if="isVal === index" :class="isVal === index ? 'isVal' : ''">
          已领取
        </div>
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
        <div class="productName">
          {{ item.name }}
        </div>
        <div class="sp">月度VIP</div>
      </div>
    </div>
    <div class="receiveBtn" :class="isVal !== null ? 'bgo' : ''" @click="isVal === null ? btnClick() : ''">
      {{ isVal === null ? "立即领取" : "本月已领取" }}
    </div>
    <div class="explain">
      <div class="title">领取须知</div>
      <div class="main">
        <p>
          1.订购、续订本产品当月，请在【腾讯视频】、【爱奇艺】、【优酷视频】会员月卡中任选其一进行领取，领取成功后系统将会员充值到订购手机号码中，如未领取，逾期不补。
        </p>
        <p>
          2.其中如果手机号码已绑定视腾讯视频账号，可直接登录使用，如未绑定，需先绑定方可使用，腾讯视频账号绑定地址
          <a href="https://q.url.cn/CDmhBl" target="_blank">https://q.url.cn/CDmhBl</a>。
        </p>
        <p>3.如有任何疑问，请咨询联通客服4000600611-3。</p>
      </div>
    </div>
    <!-- 登录组件 -->
    <van-overlay :show="loginShow" :duration="0.1">
      <div class="login-modal modal">
        <img src="../../assets/img/close.png" class="close" @click="loginShow = false" />
        <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" @click="onLogin">登录</div>
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 验证图形 -->
    <vue-puzzle :show="showVcode" @success="onSuccessCode"></vue-puzzle>
  </div>
</template>

<script>
import { login, getCode, memberList, memberGive } from "../../api";
import vuePuzzle from "vue-puzzle-vcode";
import addR from "../../common/addRecord";
import filter from "../../common/filter";
import { Dialog } from "vant";
export default {
  data () {
    return {
      productList: [
        {
          img: require("./memberImg/youku.png"),
          name: "优酷视频",
          cpid: "youtu",
        },
        {
          img: require("./memberImg/tengxun.png"),
          name: "腾讯视频",
          cpid: "tencent",
        },
        {
          img: require("./memberImg/aiqiyi.png"),
          name: "爱奇艺视频",
          cpid: "aiqy",
        },
      ],
      datas: [],
      errMessage: '',
      num: 0,
      loginShow: false,
      loginForm: {
        phone: "",
        vcode: "",
      },
      codeState: {
        state: false,
        time: 60,
        task: null,
      },
      showVcode: false,
      phone: "",
      isVal: null,
      givecpId: "youtu",
    };
  },
  components: {
    vuePuzzle,
  },
  computed: {
    userid () {
      return localStorage.getItem("userid");
    },
  },
  created () {
    if (this.userid) {
      this.phone = localStorage.getItem("phone");
      this.getMemberList(this.userid);
    }
  },
  mounted () {
    addR.memberPage()
  },
  methods: {
    formatPhone: (phone) => {
      phone = phone.toString();
      return phone.substr(0, 3) + "****" + phone.substr(7, 11);
    },
    productClick (cpid, num) {
      this.num = num;
      this.givecpId = cpid;
    },
    checkVcode () {
      if (this.loginForm.vcode.length > 6) {
        this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
      }
    },
    getCode () {
      if (this.codeState.state) return;
      let { phone } = this.loginForm;
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      this.showVcode = true;
    },
    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);
        }
      );
    },
    onLogin () {
      let { phone, vcode } = this.loginForm;
      if (!vcode) {
        return this.$toast("请输入验证码");
      }
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      login({
        phone,
        vcode,
      }).then((res) => {
        if (res.code === 500 || res.data === "") {
          this.$toast.fail("登录失败");
        } else {
          clearInterval(this.codeState.task);
          if (res.data.userid) {
            // addR.loginSuccess();
            localStorage.setItem("userid", res.data.userid);
            this.phone = phone;
          }
          this.$toast.success("登录成功");
          this.codeState.task = null;
          this.codeState.state = false;
          this.codeState.time = 60;
          localStorage.setItem("phone", phone);
          this.loginShow = false;
          this.getMemberList(res.data.userid);
        }
      });
    },
    // 点击领取
    btnClick () {
      if (this.phone === "") {
        this.loginShow = true;
        // this.productClick(0);
      } else {
        if (this.datas !== null && this.datas.length > 0) {
          let userid = localStorage.getItem("userid");
          this.giveMember(userid);
        } else {
          Dialog({
            title: "提示",
            message: this.errMessage,
            theme: "round-button",
          });
        }
      }
    },
    // 获取会员产品列表
    getMemberList (userid) {
      let info = {
        userid: userid,
        cpid: "taysxy",
        spid: "99136071",
        isCompositeProduct: 2,
        activeType: "42",
      };
      memberList(info).then((res) => {
        if (res.code === 10000) {
          this.datas = res.data;
          res.data.forEach((val) => {
            if (val.continueFlag === "0") {
              if (val.cpid === "youtu") {
                this.isVal = 0;
              } else if (val.cpid === "tencent") {
                this.isVal = 1;
              } else if (val.cpid === "aiqy") {
                this.isVal = 2;
              }
            }
          });
        }
      }, response => {
        console.log(response)
        this.errMessage = response.message
      });
    },
    // 会员领取
    giveMember (userid) {
      let channelKey = process.env.VUE_CHANNEL;
      let updata = {
        activeType: "42",
        userid: userid,
        channelKey: channelKey,
        isCompositeProduct: 2,
        givecpId: this.givecpId,
      };
      // addR.memberClick();
      memberGive(updata)
        .then(
          (res) => {
            Dialog({
              title: "提示",
              message: "会员领取成功!",
              theme: "round-button",
            }).then(() => {
              this.getMemberList(userid);
            });
            // addR.memberSuccess();
          },
          (response) => {
            this.$toast(response.message);
            // setTimeout(() => {
            //   addR.memberFail(response);
            // }, 2000);
          }
        )
        .catch((res) => {
          console.log(res);
        });
    },
  },
};
</script>

<style lang="scss">
.member {
  background-color: #fff;
  color: #0d0d0d;
  min-height: 100vh;
  font-family: PingFang SC, PingFan;
  width: 100vw;
  overflow-x: hidden;
  .bannerBox {
    width: 100%;
    height: 460px;
    position: relative;
    .banner {
      width: 100%;
      height: 100%;
    }
    .userBox {
      width: 100%;
      height: 32px;
      padding-left: 40px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      position: absolute;
      left: 0;
      bottom: 124px;
      .userImg {
        width: 32px;
        height: 32px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .user {
        flex: 1;
        margin-left: 12px;
        font-size: 24px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #000000;
        line-height: 32px;
      }
    }
  }
  .productBox {
    width: 100%;
    margin-top: -100px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    // background-color: #fff;
    // opacity: 0.6;
    .product {
      width: 200px;
      height: 200px;
      margin: 0 18px;
      text-align: center;
      background-color: #ffffff;
      border: 1px solid #d9d9d9;
      border-radius: 20px;
      position: relative;
      .isVal {
        position: absolute;
        left: 0;
        top: 0;
        width: 86px;
        height: 40px;
        background: #d9d9d9;
        border-radius: 20px 0px 20px 0px;
        font-size: 22px;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        line-height: 40px;
      }
      .img {
        width: 100%;
        height: 96px;
        box-sizing: border-box;
        padding: 30px 38px 14px 34px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .productName {
        width: 100%;
        font-size: 26px;
        font-weight: bolder;
        text-align: center;
        color: #000000;
        margin-top: 6px;
      }
      .sp {
        font-size: 24px;
        font-weight: 400;
        text-align: center;
        color: #777777;
        margin-top: 6px;
      }
    }
    .active {
      border: 2px solid #1aa774;
    }
  }
  .bgo {
    // background-color: #fff;
    background: transparent;
    opacity: 0.5;
  }
  .receiveBtn {
    width: 670px;
    height: 108px;
    background: #1aa774;
    border-radius: 54px;
    margin: 28px auto;
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    line-height: 108px;
  }
  .explain {
    margin: 66px 0 36px 0;
    width: 100%;
    min-height: 100px;
    padding: 0 40px;
    box-sizing: border-box;
    .title {
      font-size: 36px;
      font-weight: 700;
      color: #000000;
    }
    .main {
      color: #4f4f4f;
      font-weight: 400;
      font-size: 28px;
      p {
        margin-top: 28px;
        line-height: 45px;
      }
    }
  }
  .modal {
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 333px;
    transform: translateX(-50%);
    width: 620px;
    background-color: #fff;
    border-radius: 20px;

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

  .login-modal {
    top: 366px;

    .body-box {
      padding: 62px 44px 60px 56px;

      .input-box {
        display: flex;
        line-height: 75px;
        margin-bottom: 25px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #d9d9d9;

        .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: #1aa774;

          &.number {
            color: #1aa774;
            opacity: 0.5;
          }
        }
      }

      .text-box {
        font-family: PingFang-SC-Medium;
        text-align: center;
        line-height: 55px;
        font-size: 32px;
      }

      .btn-box {
        display: flex;
        justify-content: space-between;

        .btn {
          width: 520px;
          margin-top: 55px;
          height: 88px;
          line-height: 88px;
          border-radius: 60px;
          font-size: 36px;
          font-weight: bold;
          text-align: center;
          color: #fff;
          background-color: #1aa774;
        }
      }
    }
  }
}
</style>
