<template>
  <van-overlay :show="value" :duration="0.1">
    <div class="handal-modal handalModal" @click.stop>
      <div v-if="pageData.mainProduct.spid == '1299' || pageData.mainProduct.spid == '1298'">
        <div class="title">
          <div class="successImg">
            <img src="../assets/img/icon_you.png" alt="">
          </div>
          <div class="titleText"> 订购成功</div>
        </div>
        <div v-if="pageData.mainProduct.spid == '1299'">
          <div v-if="is1298 == false">
            <div class="text-box" style="text-align: center">
              订购成功，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>
          <div v-else>
            <div class="text-box" style="text-align: center">
              您同时订购了智家守护基础版”产品，如需退订请返回服务页面，点击头像--订购记录--智家守护基础版进行退订
            </div>
            <div class="btn-box">
              <div class="btnRow" @click="goUrl" :class="timeCode>0?'btnDisabled':''">跳转服务页<span v-if="timeCode>0">（{{ timeCode }}）</span></div>
            </div>
          </div>

        </div>
        <div v-else>
          <div class="text-box" style="text-align: center">
            订购成功，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>

      </div>
      <div v-else>
        <div class="title">
          <div class="successImg">
            <img src="../assets/img/icon_you.png" alt="">
          </div>
          <div class="titleText"> 订购成功</div>
        </div>
        <div class="text-box">
          {{ this.pageData.remarks.handelText }}
        </div>
        <div class="btn-box">
          <div class="btn left" @click="$emit('change', false)">确定</div>
          <div v-if="pageData.remarks.handelJihuo =='1'" class="btn right" @click="$emit('jihuo')">
            激活
          </div>
        </div>
      </div>
    </div>
  </van-overlay>
</template>
<script>
import { orderList } from '../api/index'
export default {
  model: {
    prop: "value",
    event: "change"
  },
  computed: {
    pageData () {
      return this.$store.state.pageData
    },
  },
  data () {
    return {
      timeCode: 5,
      is1298: false,
    }
  },
  props: {
    value: Boolean
  },
    watch: {
      value: function () {
          if (this.value == true) {
              setInterval(() => {
                  if (this.timeCode > 0) {
                      this.timeCode--
                      console.log(this.timeCode)
                  } else if (this.timeCode == 0) {
                      clearInterval()
                  }
              }, 1000)
              this.getIsBuy()
          }
      }
    },
  methods: {
    getIsBuy () {
      let userid = this.$store.state.user.userid
      orderList({
        userid: userid,
        cpid: "zjsh",
        spid: "1298",
      }).then((res) => {
        // console.log(res)
        let data = res.data;
        if (data.length > 0) {
          if (data[0].STATUS == '0') {
            this.is1298 = true
          }
        }

      });
    },
    goUrl () {
      window.open('https://mec.5gi.10010.com/gold/test/index.html#/home')
    },
  }
};
</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;
    }
  }

  // .btn {
  //     margin-top: 40px;
  //     height: 80px;
  //     line-height: 80px;
  //     background: #fdc51b;
  //     border-radius: 40px;
  //     font-size: 34px;
  //     font-weight: bold;
  //     color: #0d0d0d;
  //     text-align: center;
  // }
}

.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%);
  }
}
</style>
