<template>
  <div class="member002">
    <div class="header">
      <div class="phone">{{ phone | formatPhone }}</div>
    </div>
    <div class="productList">
      <div
        @click="tabSwitch('0')"
        class="itemList"
        :style="
          active === 0 ? { borderColor: '#ff8917' } : { borderColor: '#f1f1f1' }
        "
      >
        <img src="../../assets/img/TX@2x.png" alt="" />
        <span class="spName">腾讯月会员</span>
        <span
          class="spState"
          :style="item1 !== 0 ? { color: '#ccc' } : { color: '#000' }"
          >{{ item1 === 0 ? "未领取" : "已领取" }}</span
        >
      </div>
      <div
        class="itemList"
        @click="tabSwitch('1')"
        :style="
          active === 1 ? { borderColor: '#ff8917' } : { borderColor: '#f1f1f1' }
        "
      >
        <img src="../../assets/img/aqy@2x.png" alt="" />
        <span class="spName">爱奇艺月会员</span>
        <span
          class="spState"
          :style="item2 !== 0 ? { color: '#ccc' } : { color: '#000' }"
          >{{ item2 === 0 ? "未领取" : "已领取" }}</span
        >
      </div>
      <div
        class="itemList"
        @click="tabSwitch('2')"
        :style="
          active === 2 ? { borderColor: '#ff8917' } : { borderColor: '#f1f1f1' }
        "
      >
        <img src="../../assets/img/yk@2x.png" alt="" />
        <span class="spName">优酷月会员</span>
        <span
          class="spState"
          :style="item3 !== 0 ? { color: '#ccc' } : { color: '#000' }"
          >{{ item3 === 0 ? "未领取" : "已领取" }}</span
        >
      </div>
    </div>
    <div class="buyBox">
      <div
        v-if="item1 === 0 && item2 === 0 && item3 === 0"
        class="btn"
        @click="giveMember"
        :style="{
          'background-color': '#ff8917',
        }"
      >
        领取会员
      </div>
      <div
        v-else-if="
          (item1 === 1 || item2 === 1 || item3 === 1) && day !== 2 && day !== 3
        "
        class="btn"
        @click="switchMember"
        :style="{
          'background-color': '#ff8917',
        }"
      >
        切换会员权益
      </div>
    </div>
  </div>
</template>
<script>
import { memberGive, memberList, setmultivip } from "../../api";
import filter from "../../common/filter";
import addR from "../../common/addRecord";
import { Dialog } from "vant";
export default {
  data() {
    return {
      orderList: [],
      filter: filter,
      active: 0,
      activeType: "42",
      givecpId: "tencent",
      item1: 0,
      item2: 0,
      item3: 0,
      itemInfo: {},
      day: new Date().getDate(),
    };
  },
  filters: {
    formatPhone: (phone) => {
      phone = phone.toString();
      return phone.substr(0, 3) + "****" + phone.substr(7, 11);
    },
  },
  computed: {
    user() {
      return localStorage.getItem("userid");
    },
    phone() {
      return localStorage.getItem("phone");
    },
  },
  activated() {
    if (this.$store.state.global.sensors === 0) {
      this.$sensors.track("pageOpenMember");
      this.$sensors.track("searchMemberRecord");
    }
    document.title = "领取会员";
    if (!this.user) {
      this.$toast({
        type: "fail",
        message: "非法进入",
        forbidClick: true,
        duration: 4000,
      });
      setTimeout(() => {
        window.opener = null;
        window.open("about:blank", "_top").close();
      }, 4001);
    }
  },
  mounted() {
    document.title = "领取会员";
    this.itemInfo.cpid = this.$route.query.cpid;
    this.itemInfo.spid = this.$route.query.spid;
    this.itemInfo.isCompositeProduct = Number(
      this.$route.query.isCompositeProduct
    );
    this.itemInfo.activeType = this.$route.query.activeType;
    this.getMemberList();
  },
  methods: {
    getMemberList() {
      let { cpid, spid, isCompositeProduct, activeType } = this.itemInfo;
      memberList({
        userid: this.user,
        cpid,
        spid,
        isCompositeProduct,
        activeType,
      })
        .then((res) => {
          if (res.code === 10000) {
            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i].cpid === "tencent") {
                if (res.data[i].resultcode === "9087") {
                  this.item1 = 1;
                  this.active = i;
                }
              } else if (res.data[i].cpid === "aiqy") {
                if (res.data[i].resultcode === "9087") {
                  this.item2 = 1;
                  this.active = i;
                }
              } else if (res.data[i].cpid === "youtu") {
                if (res.data[i].resultcode === "9087") {
                  this.item3 = 1;
                  this.active = i;
                }
              }
            }
          }
        })
        .catch((res) => {
          this.$toast(res.message);
        });
    },
    tabSwitch(num) {
      if (num === "0") {
        this.active = 0;
        this.givecpId = "tencent";
      } else if (num === "1") {
        this.active = 1;
        this.givecpId = "aiqy";
      } else if (num === "2") {
        this.active = 2;
        this.givecpId = "youtu";
      }
    },

    // 会员领取
    giveMember() {
      let updata = {
        activeType: this.activeType,
        userid: this.user,
        channelKey: localStorage.getItem("key"),
        isCompositeProduct: 2,
        givecpId: this.givecpId,
      };
      addR.memberClick();
      memberGive(updata)
        .then(
          (res) => {
            Dialog({
              title: "提示",
              message: "会员领取成功!",
              theme: "round-button",
            }).then(() => {
              this.getMemberList();
            });
            addR.memberSuccess();
          },
          (response) => {
            this.$toast(response.message);
            setTimeout(() => {
              addR.memberFail(response);
            }, 2000);
          }
        )
        .catch((res) => {
          console.log(res);
        });
    },
    // 切换会员权益
    switchMember() {
      let updata = {
        activeType: this.activeType,
        userId: this.user,
        giveCpid: this.givecpId,
      };
      setmultivip(updata).then((res) => {
        if (res.data.resultcode === "0") {
          Dialog({
            title: "提示",
            message: "会员切换成功!",
            theme: "round-button",
          }).then(() => {
            this.getMemberList();
          });
        } else {
          this.$toast.fail(res.data.errorinfo);
        }
      });
    },
  },
  beforeRouteLeave(to, from, next) {
    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
    this.$destroy(true);
    next();
  },
};
</script>
<style lang="scss">
.member002 {
  min-height: 100vh;
  background-color: #f8f9fc;

  @keyframes scale {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(0.8);
    }
  }

  .header {
    box-sizing: border-box;
    padding: 0 60px;
    height: 85px;
    line-height: 85px;
    font-size: 32px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .productList {
    width: 690px;
    margin: 0 auto;

    .itemList {
      margin: 30px auto;
      height: 120px;
      line-height: 120px;
      background-color: #f1f1f1;
      border-width: 6px;
      border-style: solid;
      border-radius: 20px;
      position: relative;

      img {
        width: 80px;
        height: 80px;
        margin-top: 20px;
        margin-left: 20px;
      }

      .spName {
        font-size: 35px;
        font-weight: bold;
        position: absolute;
        left: 200px;
      }

      .spState {
        font-size: 30px;
        font-weight: bold;
        position: absolute;
        right: 30px;
      }
    }
  }

  .buyBox {
    margin-top: 50px;

    .btn {
      width: 690px;
      margin: 0 auto;
      height: 100px;
      border-radius: 50px;
      line-height: 100px;
      font-size: 40px;
      border: 4px solid;
      font-weight: bold;
      text-align: center;
      color: #ffffff;
      animation-name: scale;
      animation-duration: 0.6s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
    }
  }
}
</style>