<template>
  <!-- 结果页 -->
  <div class="result">
    <!-- 结果页盒子 -->
    <div class="resultbox" v-if="pairData">
      <!-- 配对指数 -->
      <p class="num">{{ pairData.score }}</p>
      <!-- 情侣 -->
      <div class="lovers">{{pairData.title}}</div>
      <!-- 测试结果 -->
      <template v-if="pairData.detail_list">
        <div
          class="testresult"
          v-for="(el, idx) in pairData.detail_list"
          :key="idx"
        >
          <!-- 标题 -->
          <div class="restitle">{{ el.title }}</div>
          <!-- 内容 -->
          <div class="rescontent" v-html="el.content"></div>
        </div>
      </template>
    </div>
    <!-- 跳转链接 -->
    <div class="navurl" @click="copyURL"></div>
    <!-- 底部提示 -->
    <div class="footerTips">
      复制链接后，可打开微信发送或保存链接，便于后期反复查阅
    </div>
    <!-- 回到顶部 -->
    <div
      class="returnTop"
      :class="showTop ? 'showx' : ''"
      id="retTop"
      @click="returnTop"
    ></div>
    <!-- 弹窗重新支付 -->
    <div class="popcontentbox" v-if="notpay">
      <div class="popcontent">
        <!-- 标题 -->
        <p class="title">离双方配对报告只差1步</p>
        <p class="titletwo">支付后查看契合度报告</p>
        <!-- 进度 -->
        <div class="progress">
          <div class="progressTop">
            <img class="tick tickbor" src="../image/true.png" alt="" />
            <img class="tick" src="../image/true.png" alt="" />
            <p>仅剩0.7%</p>
          </div>
          <img src="../image/line.png" alt="" />
          <div class="bottomFont">
            <p>信息提交</p>
            <p>生成报告</p>
            <p>查看契合度</p>
          </div>
        </div>
        <!-- 支付按钮 -->
        <div class="paybtn" @click="againpay">重新支付</div>
        <!-- 优惠按钮 -->
        <!-- <div class="discount">领取优惠红包</div> -->
        <!-- 领取报告 -->
        <!-- <div class="report">已支付点击领取报告</div> -->
        <!-- 已有人数 -->
        <!-- <p class="footerFont">已有1386706人解锁姓名测试</p> -->
        <p class="footerFont bottomLine" @click="navhome">
          姓名错误，需要重新填写>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Result",
  data() {
    return {
      // 返回顶部
      showTop: true,
      //  情侣姓名
      name: [],
      // 未支付
      notpay: false,
    };
  },
  methods: {
    // 回到顶部
    async returnTop() {
      //滚动条总路程
      var gdt = document.documentElement.scrollTop;
      //滚动条速度
      var gdtsudu = gdt / 20;
      var timer = setInterval(() => {
        document.documentElement.scrollTop -= gdtsudu;
        if (document.documentElement.scrollTop <= 0) {
          clearInterval(timer);
          this.showTop = true;
        }
      }, 10);
    },
    // 复制链接
    copyURL() {
      var _val = window.location.href;
      new this.ClipboardJS(".navurl", {
        text: () => {
          Toast("复制成功");
          return _val;
        },
      });
    },
    //返回首页
    navhome() {
      this.$router.push("/home");
    },
    // 重新支付
    async againpay() {
      await this.$store.dispatch("gainPayWX", {
        order_no: this.$route.query.order_no,
      });
      location.href =
        this.$store.state.pay.WXurl +
        "&redirect_url=" +
        encodeURIComponent(
          "http://estimate.gzrkkj.cn/#/result?order_no=" +
          this.$route.query.order_no
        );
    },
  },
  async activated() {
    // 姓名
    // this.name = await JSON.parse(localStorage.getItem("name"));
    // 配对信息
    // try {
    //   await this.$store.dispatch("gainPair", {
    //     boy: this.name[0],
    //     girl: this.name[1],
    //     key: this.$md5(this.name[0] + this.name[1] + "cz321456").toUpperCase(),
    //   });
    // } catch (error) {
    //   console.log(error);
    //   Toast(error);
    // }
  },
  async mounted() {
    //  支付后数据
    await this.$store.dispatch("gainPayResult", this.$route.query.order_no);
    // 未支付弹出重新支付框
    if (this.$store.state.pay.resultDate.need_pay == 1) {
      this.notpay = true;
    }
    // 返回顶部显示
    document.addEventListener("scroll", () => {
      if (document.documentElement.scrollTop > 350) {
        this.showTop = false;
      }
    });
  },
  computed: {
    // 支付结果数据
    pairData() {
      return this.$store.state.pay.resultDate;
    },
  },
};
</script>

<style lang="scss" scoped>
// 适配函数计算
@function vw($px) {
  @return 100 * $px/720 + vw;
}
* {
  margin: 0;
  padding: 0;
}
// 动画
// 按钮动画
@keyframes bigSmall {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
// 结果页
.result {
  width: vw(720);
  display: flex;
  flex-direction: column;
  align-items: center;
  //   结果页盒子
  .resultbox {
    width: vw(720);
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    background: url("../image/resultBC.png") 0 0 /100% no-repeat;
    background-color: #ffaaaf;
    padding-bottom: vw(29);
    box-sizing: border-box;
    // 配对指数
    .num {
      position: absolute;
      top: vw(235);
      font-size: vw(44);
      color: white;
    }
    // 情侣
    .lovers {
      font-size: vw(44);
      font-weight: 500;
      color: #ffffff;
      margin-top: vw(540);
    }
    // 测试结果
    .testresult {
      margin-top: vw(40);
      width: vw(720);
      display: flex;
      flex-direction: column;
      align-items: center;
      //   标题
      .restitle {
        width: vw(720);
        height: vw(76);
        display: flex;
        align-items: center;
        padding-left: vw(80);
        box-sizing: border-box;
        background: url("../image/restitle.png") 0 0 /100% no-repeat;
      }
      .rescontent {
        width: vw(680);
        font-size: vw(28);
        font-weight: 400;
        color: #222222;
        margin-top: vw(31);
        line-height: vw(48);
      }
    }
  }
  //跳转链接
  .navurl {
    width: vw(429);
    height: vw(93);
    margin-top: vw(64);
    animation: bigSmall 2.5s linear infinite;
    background: url("../image/navurl.png") 0 0 /100% no-repeat;
  }
  //  底部提示
  .footerTips {
    width: vw(720);
    height: vw(76);
    background-color: #f9ddda;
    margin-top: vw(15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #df454b;
    font-size: vw(24);
  }
  //   回到顶部
  .returnTop {
    width: vw(70);
    height: vw(70);
    background: url("../image/returnTop.png") 0 0 /100% no-repeat;
    position: fixed;
    right: vw(20);
    top: vw(800);
  }
  // 弹窗
  .popcontentbox {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(85, 85, 85, 0.355);
    display: flex;
    align-items: center;
    justify-content: center;
    .popcontent {
      // height: vw(268);
      // justify-content: space-around;

      height: vw(628);

      width: vw(540);
      // height: vw(868);
      background: #ffffff;
      border-radius: vw(20);
      display: flex;
      align-items: center;
      flex-direction: column;

      // 标题
      .title {
        font-size: vw(40);
        font-weight: 600;
        color: #be061a;
        margin: vw(50) 0 vw(20) 0;
      }
      .titletwo {
        font-size: vw(40);
        font-weight: 600;
        color: #be061a;
      }
      // 进度
      .progress {
        width: vw(403);
        height: vw(104);
        margin-top: vw(52);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // background-color: red;
        .progressTop {
          width: vw(403);
          display: flex;
          align-items: center;
          justify-content: space-between;
          .tick {
            width: vw(35);
            height: vw(30);
          }
          .tickbor {
            padding: vw(5);
            border: vw(1) dashed gainsboro;
          }
          p {
            font-size: vw(22);
            font-weight: 500;
            color: #f4a525;
          }
        }
        img {
          width: vw(403);
          height: vw(22);
        }
        .bottomFont {
          width: vw(403);
          height: vw(30);
          display: flex;
          align-items: center;
          justify-content: space-between;
          p {
            font-size: vw(22);
            font-weight: 400;
            color: #333333;
          }
        }
      }
      %btnfont {
        width: vw(443);
        height: vw(90);
        border-radius: vw(50);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: vw(36);
        font-weight: 400;
        color: #ffffff;
      }
      // 支付按钮
      .paybtn {
        background-color: #cf0316;
        margin: vw(46) 0 vw(30) 0;
        @extend %btnfont;
      }
      // 优惠按钮
      .discount {
        background-color: #f4a525;
        @extend %btnfont;
      }
      // 领取报告
      .report {
        border: vw(2) solid #e9ca8f;
        @extend %btnfont;
        color: black;
        margin: vw(30) 0 vw(30) 0;
      }
      // 已有人数
      .footerFont {
        font-size: vw(30);
        font-weight: 400;
        color: #c75c5c;
      }
      .bottomLine {
        margin-top: vw(18);
        text-decoration: underline;
      }
    }
  }

  // 回到顶部隐藏
  .showx {
    display: none !important;
  }
}
</style>