<template>
  <div class="member001">
    <div class="header">
      <!-- <img
        class="img"
        src="../../assets/img/order-return.png"
        @click="$router.go(-1)"
      /> -->
      <div class="phone">{{ phone | formatPhone }}</div>
    </div>
    <!-- 单产品 -->
    <div class="group" v-if="itemInfo.isCompositeProduct === 0">
      <div class="order" v-for="(item, i) in orderList" :key="i">
        <div class="inner">
          <div class="title-box">
            <div class="title">
              {{ item.productName }}
            </div>
            <div v-if="
                item.resultcode === '9083' &&
                (itemInfo.isCompositeProduct === 0 ||
                  itemInfo.isCompositeProduct === null)
              " @click="giveMember(item)">
              领取
            </div>
            <div v-else-if="
                item.resultcode === '0' && itemInfo.isCompositeProduct > 0
              " @click="giveMember(item)">
              领取
            </div>
            <div v-else class="isMem">已领取</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 复合产品 -->
    <div class="group" v-else-if="itemInfo.isCompositeProduct === 1">
      <div class="order">
        <div class="inner">
          <div class="title-box">
            <div class="title">
              {{ itemInfo.productName }}
            </div>
            <div v-if="memberState !== 0" @click="receiveMember()">领取</div>
            <div v-else class="isMem">已领取</div>
          </div>
        </div>
      </div>
    </div>
    <div class="hint">显示您的会员领取记录</div>
    <div class="hint" style="line-height: 20px;">
      如有疑问可至“联通畅视”小程序—我的—联系客服，或者请拨打4000600611客服电话
    </div>
  </div>
</template>
<script>
import {
  memberList,
  memberGive
} from "../../api";
import filter from "../../common/filter";
import addR from "../../common/addRecord";
export default {
  data () {
    return {
      orderList: [],
      filter: filter,
      memberState: 1,
      itemInfo: {},
    };
  },
  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);
    }
  },
  created () {
    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.itemInfo.productName = this.$route.query.productName;
    if (
      this.itemInfo.isCompositeProduct === 0 ||
      this.itemInfo.isCompositeProduct === null
    ) {
      this.getData();
    } else if (this.itemInfo.isCompositeProduct === 1) {
      this.getMemberList();
    }
  },
  methods: {
    getData () {
      this.orderList = [];
      let {
        cpid,
        spid,
        isCompositeProduct,
        activeType
      } = this.itemInfo;
      memberList({
        userid: this.user,
        cpid,
        spid,
        isCompositeProduct,
        activeType,
      })
        .then((res) => {
          if (res.code == 10000) {
            let list = [];
            for (var i = 0; i < res.data.length; i++) {
              if (
                res.data[i].resultcode == "9083" ||
                res.data[i].resultcode == "0"
              ) {
                list.push(res.data[i]);
              }
            }
            this.orderList = list;
          }
        })
        .catch((res) => {
          this.$toast(res.message);
          console.warn(res);
        });
      this.pageData;
    },
    getMemberList () {
      let {
        cpid,
        spid,
        isCompositeProduct,
        activeType
      } = this.itemInfo;
      memberList({
        userid: this.user,
        cpid,
        spid,
        isCompositeProduct,
        activeType,
      })
        .then((res) => {
          if (res.code === 10000) {
            for (var i = 0; i < res.data.length; i++) {
              if (res.data[i].resultcode !== "9087") {
                this.memberState = 1;
              } else {
                this.memberState = 0;
              }
            }
          }
        })
        .catch((res) => {
          this.$toast(res.message);
        });
    },
    receiveMember () {
      let updata = {
        activeType: this.itemInfo.activeType,
        userid: this.user,
        channelKey: localStorage.getItem("key"),
        isCompositeProduct: 1,
      };
      addR.memberClick();
      memberGive(updata)
        .then(
          (res) => {
            this.getMemberList();
            addR.memberSuccess();
            this.$toast("领取成功");
          },
          (response) => {
            addR.memberFail(response);
            this.$toast(response.message);
          }
        )
        .catch((res) => {
          this.$toast(res.message);
        });
    },
    giveMember (item) {
      let updata = {
        activeType: item.activeType,
        userid: this.user,
        channelKey: localStorage.getItem("key"),
        isCompositeProduct: this.itemInfo.isCompositeProduct,
      };
      addR.memberClick();
      memberGive(updata)
        .then(
          (res) => {
            this.getData();
            addR.memberSuccess();
            this.$toast("领取成功");
          },
          (response) => {
            addR.memberFail(response);
            this.$toast(response.message);
          }
        )
        .catch((res) => {
          console.log(res);
        });
    },
  },
  beforeRouteLeave (to, from, next) {
    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
    this.$destroy(true);
    next();
  },
};
</script>
<style lang="scss">
.member001 {
  min-height: 100vh;
  background-color: #f8f9fc;

  .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;

    .img {
      width: 48px;
      height: 38px;
    }
  }

  .group {
    padding-top: 40px;

    .month {
      padding: 0 60px;
      line-height: 92px;
      font-size: 32px;
      font-weight: 500;
      color: #999999;
    }

    .order {
      padding: 40px 60px;
      background-color: #fff;

      .inner {
        height: 80px;
        border-bottom: 0.5px solid #cacaca;
        padding-right: 60px;
      }

      &:last-of-type .inner {
        border-bottom: none;
      }

      .title-box {
        font-size: 36px;
        font-weight: bold;
        color: #000000;
        line-height: 36px;
        display: flex;
        justify-content: space-between;

        .title {
          max-width: 450px;
        }

        .isMem {
          color: #909090;
        }
      }

      .time {
        margin-top: 14px;
        font-size: 24px;
        font-weight: 400;
        color: #0e0e0e;
      }
    }
  }

  .hint {
    line-height: 94px;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    color: #999999;
  }

  .receiveMember {
    font-size: 40px;
    font-weight: bold;
    color: #0e0e0e;
    text-align: center;
    text-decoration: underline;
  }
}
</style>