<template>
  <div class="unicomPage">
    <div class="round left">
      <div class="roundBox"></div>
    </div>

    <div class="body">
      <div class="boxImg" v-if="page=='无产品信息'">
        <img src="./2.png" alt="">
        <div class="title">
          该产品不存在，有疑问请联系客服4000600611
        </div>
        <div class="btn" @click="goBack">
          返回
        </div>
      </div>

      <div class="boxImg" v-else-if="page=='不在合约期内'|| page=='未订购产品' || page=='在合约期内'">
        <img class="image" src="./3.png" alt="">
        <div class="span">确定退订么？</div>
        <div class="title2" v-if="page=='不在合约期内'|| page=='未订购产品'">
          用户{{phone | formatPhone}}您好，确定要退订{{ productInfo.productName}}产品么？
        </div>
        <div v-else class="title2">
          用户{{phone | formatPhone}}您好，您订购的{{ productInfo.productName}}产品，仍在合约期内，<span style="color:red">退订需扣除违约金{{ productInfo.originalPrice-0.01 }}元，</span>是否仍要退订？
        </div>
        <div class="btn2 red" @click="unbuyClick">
          退订
        </div>
        <div class="btn2 gray" @click="goBack">
          返回
        </div>
      </div>

      <div class="boxImg" v-else-if="page=='退订成功' || page=='合约退订成功'">
        <img class="image" src="./1.png" alt="">
        <div class="span">退订成功</div>
        <div class="title2" v-if="page=='退订成功'">
          用户{{phone | formatPhone}}您好，您订购的{{ productInfo.productName}}产品已经退订成功，流量仍可以使用到本月底，有疑问请联系客服4000600611
        </div>
        <div class="title2" v-else-if="page=='合约退订成功'">
          用户{{phone | formatPhone}}您好，您订购的{{ productInfo.productName}}产品已经退订成功，本月内仍可以使用定向流量，违约金{{ productInfo.originalPrice-0.01 }}元同步扣除。
        </div>
        <div class="btn2 red" @click="goBack">
          返回
        </div>
      </div>
      <div class="boxImg" v-else-if="page =='已退订产品'">
        <img class="image" src="./4.png" alt="">
        <div class="span" style="color:#888888">已退订</div>
        <div class="title2">
          用户{{phone | formatPhone}}您好，您订购的{{ productInfo.productName}}产品已经退订，无需重复退订，您还可以使用到本月底，有疑问请联系客服4000600611
        </div>
        <div class="btn2 red" @click="goBack">
          返回
        </div>
      </div>

      <div class="boxImg" v-else-if="page=='退订失败'">
        <img class="image" src="./error.png" alt="">
        <div class="span">退订失败</div>
        <div class="title2">
          用户{{phone | formatPhone}}您好，您订购的{{ productInfo.productName}}产品退订失败，其他提示，有疑问请联系客服4000600611
        </div>
        <div class="btn2 red" @click="goBack">
          返回
        </div>
      </div>
    </div>
    <div class="roundmini right">
      <div class="roundBox"></div>
    </div>
    <div class="logo">
      <img src="./logo.png" alt="">
    </div>

  </div>
</template> 

<script>
import { ssotoken, getCbpid, changeUseridToPhone, orderList, postBuy } from '../../api'
import util from '../../util'
export default {
  data () {
    return {
      userid: "",
      page: 0,
      phone: "",
      productInfo: {},
      isTreaty: "",
      url: "",
      opoutRes: null
    }
  },
  created () {
    document.title = "退订"
    this.getUserId()
  },
  filters: {
    formatPhone: (phone) => {
      phone = phone.toString();
      return phone.substr(0, 3) + "****" + phone.substr(7, 11);
    },
  },
  methods: {
    getUserId () {
      let { ticket, pid, backurl, userid } = util.query2obj(location.search)
      this.url = decodeURIComponent(backurl)
      getCbpid({ cbpid: pid }).then(res => {
        if (res.data != null) {
          this.productInfo = res.data
          let { cpid, spid } = res.data
          let traty = JSON.parse(res.data.cacheSeatOne)[0].isTreaty
          this.isTreaty = traty
          if (userid) {
            let userId = decodeURIComponent(userid)
            this.userid = userId
            changeUseridToPhone({
              userid: userId
            }).then(result => {
              this.phone = result.data
              this.getIsbuy(cpid, spid, userId, traty)
            })
          }
          if (ticket) {
            ssotoken({ ticket: ticket }).then(res => {
              if (res.code == 10000) {
                let data = JSON.parse(res.data)
                this.userid = data.user_id
                this.phone = data.phone
                this.getIsbuy(cpid, spid, this.userid, traty)
              }
            })
          }
        } else {
          this.page = '无产品信息'
        }
        // console.log(res)
      })


    },
    // 查询订购记录是否在合约期
    getIsbuy (cpid, spid, userid, isTreaty) {
      orderList({ cpid: cpid, spid: spid, userid: userid }).then(res => {
        if (res.data.length > 0 && res.data != null) {
          //主产品为订购状态 根据合约期条件显示合约期提示
          if (res.data[0].STATUS === "0") {
            if (isTreaty == '0') {
              this.page = "不在合约期内"
            } else {
              this.opoutRes = res
              this.getOpout()
            }
          } else {
            this.page = "已退订产品"
          }
        } else {
          this.page = "未订购产品"
        }
      })
    },
    // 合约期计算规则
    getOpout () {
      let res = this.opoutRes
      let orderTime = res.data[0].ORDERTIME.substring(0, 8)
      let date = new Date()
      let year = parseInt(date.getFullYear())
      let month = parseInt(date.getMonth() + 1)
      let orderYear = parseInt(orderTime.substring(0, 4))
      let orderMonth = parseInt(orderTime.substring(4, 6))
      if (orderYear == year) {
        if ((month - orderMonth) < 5) {
          this.page = "在合约期内"
        } else {
          this.page = "不在合约期内"
        }
      } else if ((year - orderYear) == 1) {
        let number = (12 - orderMonth) + month
        if (number < 5) {
          this.page = "在合约期内"
        } else {
          this.page = "不在合约期内"
        }
      } else {
        this.page = "不在合约期内"
      }
    },
    // 退订
    unbuyClick () {
      let updata = {
        cpid: this.productInfo.cpid,
        spid: this.productInfo.spid,
        productId: this.productInfo.id,
        channelKey: "332a17a6ff88",
        token: "00011223360000011223360012233600",
        type: "1",
        userid: this.userid,
      };
      postBuy(updata).then((res) => {
        if (res.code === 10000) {
          if (this.isTreaty == '1') {
            let result = this.opoutRes
            let orderTime = result.data[0].ORDERTIME.substring(0, 8)
            let date = new Date()
            let year = parseInt(date.getFullYear())
            let month = parseInt(date.getMonth() + 1)
            let orderYear = parseInt(orderTime.substring(0, 4))
            let orderMonth = parseInt(orderTime.substring(4, 6))
            if (orderYear == year) {
              if ((month - orderMonth) < 5) {
                this.page = "合约退订成功"
              } else {
                this.page = "退订成功"
              }
            } else if ((year - orderYear) == 1) {
              let number = (12 - orderMonth) + month
              if (number < 5) {
                this.page = "合约退订成功"
              } else {
                this.page = "退订成功"
              }
            } else {
              this.page = "退订成功"
            }
            // this.page = "合约退订成功"
          } else {
            this.page = "退订成功"
          }
        } else {
          this.page = '退订失败'
        }
      }).catch(err => {
        this.page = '退订失败'
      })
    },
    // 返回
    goBack () {
      if (this.url.indexOf('https://img.client.10010.com') != -1) {
        window.location.href = this.url
      } else {
        this.$toast('返回无效！')
      }

    }
  },


}
</script>

<style lang="scss" scoped>
.unicomPage {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  overflow-y: scroll;
  position: relative;
  // .box {
  //   width: 100%;
  //   height: 128px;
  //   background: #f8f8f8;
  // }
  .round {
    width: 400px;
    height: 400px;
    opacity: 0.08;
    border-radius: 50%;
    // border-color: rgba(255, 150, 174, 1);
    background-image: linear-gradient(
      rgba(255, 169, 174, 1),
      rgba(211, 46, 52, 1)
    );
    .roundBox {
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background-color: #fff;
      margin: 60px auto;
    }
  }
  .roundmini {
    width: 300px;
    height: 300px;
    opacity: 0.08;
    border-radius: 50%;
    // border-color: rgba(255, 150, 174, 1);
    background-image: linear-gradient(
      rgba(255, 169, 174, 1),
      rgba(211, 46, 52, 1)
    );
    .roundBox {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #fff;
      margin: 50px auto;
    }
  }
  .body {
    width: 500px;
    min-height: 500px;
    // border: 1px solid #000;
    position: absolute;
    top: 160px;
    left: 130px;
    .boxImg {
      width: 100%;
      height: 100%;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .image {
        display: block;
        width: 160px;
        height: 160px;
        margin: 0 auto;
      }
      .span {
        font-size: 36px;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #333333;
        text-align: center;
        margin-top: 20px;
      }
      .title {
        position: absolute;
        top: 283px;
        font-size: 32px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        text-align: center;
        line-height: 45px;
      }
      .title2 {
        font-size: 32px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        text-align: center;
        line-height: 45px;
        margin: 60px 0 30px 0;
      }
      .btn {
        width: 100%;
        height: 88px;
        border-radius: 44px;
        position: absolute;
        bottom: 15px;
        background-color: #ed6b39;
        color: #fff;
        text-align: center;
        line-height: 88px;
        font-size: 36px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
      }
      .btn2 {
        width: 100%;
        height: 88px;
        border-radius: 44px;
        text-align: center;
        line-height: 88px;
        font-size: 36px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        margin-top: 30px;
      }
      .red {
        color: #fff;
        background-color: #ed6b39;
      }
      .gray {
        background-color: #c2c2c2;
        color: #fff;
      }
    }
  }

  .left {
    position: absolute;
    left: -200px;
    top: 20px;
  }
  .right {
    position: absolute;
    right: -150px;
    bottom: 280px;
  }

  .logo {
    width: 204px;
    height: 60px;
    position: absolute;
    bottom: 120px;
    left: 273px;
    img {
      width: 100%;
      height: auto;
    }
  }
}
</style>