<template>
  <div class="tuiding-zhijia" id="temp" :style="{'backgroundColor':pageData.mainJson.pageBgcol}">
    <div class="banner">
      <img :src="imgUrl+pageData.mainJson.bannerImg" alt="">
    </div>
    <div class="box">
      <div v-if="page == 1">
        <div class="text">
          您订购的 <span style="color:#68B748">{{pageData.mainProduct.productName}}</span><span v-if="isVal == 1">已守护您的家人<span style="color:#D92222">{{day}}</span>天</span>
        </div>
        <div class="text2">
          确定要退订吗?
          <div style="font-size:14px;color:#909090;margin-top:20px">产品到期后，您的产品配置信息将保留15天</div>
        </div>
        <div class="btnRow">
          <div class="btnLeft" @click="unBuyClick">退订</div>
          <div class="btnRight" @click="page=3">取消</div>
        </div>
      </div>
      <div v-else-if="page==2">
        <img class="success" src="./success.png" alt="">
        <div class="text3">退订成功!</div>
      </div>
      <div v-else-if="page==3">
        <div class="text4">您订购的<span style="color:#68B748">{{pageData.mainProduct.productName}}</span>将继续为您的家人保驾护航!</div>
      </div>
    </div>

    <van-overlay :show="tuidingModal" :duration="0.1">
      <div class="handal-modal handalModal" @click.stop>
        <div class="title">
          <div class="successImg">
            <img src="../../assets/img/icon_you.png" alt="">
          </div>
          <div class="titleText"> 退订成功</div>
        </div>
        <div class="text-box">
          退订成功，5秒后请点击确认转入服务页面
        </div>
        <div class="btn-box">
          <div class="btnRow" @click="goUrl" :class="timeCode>0?'btnDisabled':''">确定 <span v-if="timeCode>0">（{{ timeCode }}）</span></div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import util from '../../util'
import addR from '../../common/addRecord'
import { orderList, postBuy, changeUseridToPhone } from '../../api'
export default {
  data () {
    return {
      page: 0,
      imgUrl: process.env.VUE_APP_IMGS_URL,
      isVal: 0,
      day: "",
      tuidingModal: false,
      timeCode: 5
    }
  },
  computed: {
    user () {
      return this.$store.state.user
    },
    pageData () {
      return this.$store.state.pageData
    }
  },
  watch: {
    tuidingModal: function () {
      if (this.tuidingModal == true) {
        setInterval(() => {
          if (this.timeCode > 0) {
            this.timeCode--
          } else if (this.timeCode == 0) {
            clearInterval()
          }
        }, 1000)
      }
    }
  },
  created () {
    addR.openPage() // 页面打开事件
    let {
      userid,
    } = util.query2obj(location.search)
    if (userid) {
      changeUseridToPhone({
        userid: decodeURIComponent(userid)
      }).then(res => {
        this.$store.commit('setUser', {
          userid: decodeURIComponent(userid),
          phone: res.data
        })
        this.getIsbuy(decodeURIComponent(userid))
        addR.loginSuccess()
      })
    }
  },
  methods: {
    goUrl () {
      window.open('https://mec.5gi.10010.com/gold/test/index.html#/home')
    },
    // 获取订购记录
    getIsbuy (userid) {
      orderList({
        userid: userid,
        cpid: this.pageData.mainProduct.cpid,
        spid: this.pageData.mainProduct.spid,
      }).then((res) => {
        let data = res.data;
        if (data.length === 0) {
          this.page = 1
        } else {
          if (data[0].ENDTIME !== '') {
            this.page = 2
          } else {
            this.page = 1
            this.isVal = 1;
            let orderTime = data[0].ORDERTIME
            let orderYear = parseInt(orderTime.substring(0, 4))
            let orderMonth = parseInt(orderTime.substring(4, 6))
            let orderDay = parseInt(orderTime.substring(6, 8))
            let orderDate = `${orderYear}/${orderMonth}/${orderDay}`
            let orderTimeNum = Date.parse(new Date(orderDate))
            let dateNum = new Date().getTime()
            this.day = parseInt((dateNum - orderTimeNum) / (1000 * 3600 * 24))
          }
        }
      });
    },
    unBuyClick () {
      let updata = {
        cpid: this.pageData.mainProduct.cpid,
        spid: this.pageData.mainProduct.spid,
        productId: this.pageData.mainProduct.id,
        channelKey: this.pageData.channl.channelKey,
        token: "00011223360000011223360012233600",
        type: "1",
        userid: this.user.userid,
      };
      postBuy(updata).then((res) => {
        if (res.code === 10000) {
          addR.unBuySuccess();
          this.page = 2
          setTimeout(() => {
            this.tuidingModal = true
          }, 1000)
        }
      }, (err) => {
        this.$toast(err.message)
        // console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.handal-modal {
  top: 412px;
  padding: 60px 51px;
  font-size: 28px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #222222;

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    // margin: 0 auto;
    .successImg {
      width: 30px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #909090;
      border-radius: 50%;
      display: inline-block;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .titleText {
      font-size: 36px;
      font-weight: 700;
      text-align: center;
      margin-left: 10px;
    }
  }

  .text-box {
    line-height: 48px;
    // text-align: center;
  }

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

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

    .left {
      border: 2px #fdc51b solid;
      color: #fdc51b;
      background-color: #ffffff;
    }

    .right {
      color: #0d0d0d;
      background: #fdc51b;
    }
    .btnRow {
      width: 100%;
      margin-top: 60px;
      height: 80px;
      line-height: 80px;
      border-radius: 40px;
      font-size: 30px;
      font-weight: bold;
      text-align: center;
      color: #0d0d0d;
      background: #fdc51b;
    }
    .btnDisabled {
      color: #909090;
      background: #ccc;
    }
  }
}

.handalModal {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 333px;
  transform: translateX(-50%);
  width: 520px;
  background-color: #fff;
  border-radius: 8px;
  .close {
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: -130px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.tuiding-zhijia {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background-color: rgb(175, 198, 255);
  .banner {
    width: 750px;
    height: 800px;
    border-radius: 50px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 0px 0px 200px 200px;
    }
  }
  .box {
    margin: 0 auto;
    width: 700px;
    min-height: 467px;
    background: #ffffff;
    border-radius: 20px;
    margin-top: -130px;
    position: relative;
    z-index: 1;
    padding: 85px 65px 65px 65px;
    box-sizing: border-box;
    text-align: center;
    font-size: 36px;
    .text {
      font-weight: 600;
      color: #2c2721;
      line-height: 50px;
    }
    .text2 {
      margin-top: 50px;
      font-weight: 400;
    }
    .btnRow {
      display: flex;
      justify-content: space-between;
      margin-top: 49px;
      div {
        width: 257px;
        height: 79px;
        background: #ffffff;
        border-width: 1px;
        border-style: solid;
        border-radius: 10px;
        text-align: center;
        line-height: 79px;
      }
      .btnLeft {
        color: #68b748;
        border-color: #68b748;
      }
      .btnRight {
        color: #8b8b8b;
        border-color: #8b8b8b;
      }
    }
    .success {
      width: 151px;
      height: 151px;
      margin-top: 28px;
    }
    .text3 {
      margin-top: 59px;
      font-weight: 600;
      color: #2c2721;
    }
    .text4 {
      width: 480px;
      margin: 93px auto;
      font-weight: 600;
      color: #2c2721;
      line-height: 50px;
      text-align: start;
    }
  }
}
</style>
