<template>
  <div class="home">
    <statusBar>
      <span>趣味配对</span>
    </statusBar>

    <div class="home-body">
      <div class="img1-father">
        <img class="img1" src="@/assets/img/home/img1.png" alt="" />
        <accrod-with-name ref="accord" class="component-name" />
      </div>

      <div class="img2-father row-center-center">
        <img class="img2" src="@/assets/img/home/img2.png" alt="" />
      </div>

      <div class="img3-father row-center-center">
        <img class="img3" src="@/assets/img/home/img3.png" alt="" />
      </div>

      <div class="img4-father row-center-center">
        <img class="img4" src="@/assets/img/home/img4.png" alt="" />
      </div>

      <div class="img5-father row-center-center">
        <img class="img5" src="@/assets/img/home/img5.png" alt="" />
        <div class="know fs-28 ff-pp fc-sys5">
          <div>
            <img class="img6" src="@/assets/img/home/img6.png" alt="" />
            <div>
              <span class="fs-40">01</span>
              <span>我们俩是否有缘？</span>
            </div>
          </div>
          <div>
            <img class="img7" src="@/assets/img/home/img7.png" alt="" />
            <div>
              <span class="fs-40">02</span>
              <span>俩人在一起相处的怎么样？</span>
            </div>
          </div>
          <div>
            <img class="img8" src="@/assets/img/home/img8.png" alt="" />
            <div>
              <span class="fs-40">03</span>
              <span>彼此牵挂的原因是什么？</span>
            </div>
          </div>
        </div>
      </div>

      <div class="img9-father row-center-center">
        <img class="img9" src="@/assets/img/home/img9.png" alt="" />
        <div class="report-style row-around-center">
          <img src="@/assets/img/home/img10.png" alt="" />
          <img src="@/assets/img/home/img11.png" alt="" />
        </div>
      </div>

      <div class="img12-father row-center-center ff-pp fw-4">
        <img class="img12" src="@/assets/img/home/img12.png" alt="" />
        <div class="test fc-sys5 fs-26">
          本测评基于临床心理学家E.E.Maccoby所提出的「恋爱类型理论」。E.E.Maccoby是一位情感关系权威研究专家，同时也是拥有丰富心理学临床经验的PhD、Professor。本专业研发测评团队基于此理论，经过对国内外100+不同阶段伴侣关系的研究，分别针对其性格、冲突及应对策略、关系满意度、关系质量等维度综合分析,得以编制此测评。
        </div>

        <div class="row-center-center fc-f fs-36 fw-5 btn-father">
          <div class="btn row-center-center" @click="begin">开始配对</div>
        </div>
      </div>
      <p style="margin:5px auto;font-size:12px;text-align:center;color:#F2F6FC;">需付费后方可查看结果，结果纯属娱乐仅供参考</p>
      <div class="compary">
        北京掌驰文化传媒有限公司 <br>
        联系方式：15524321730 <br>
        地址：北京市通州区朱家垡村西900号院2号楼101
      </div>
    </div>
  </div>
</template>

<script>
import StatusBar from "@/components/StatusBar";
import AccrodWithName from "./child_cpn/AccordWithName";
import utils from "@/utils";
import API from "@/service/api";

export default {
  components: {
    StatusBar,
    AccrodWithName,
  },

  mounted() {
    let h5LogsObj = utils.getUrlParams();
    let link = encodeURIComponent(window.location.href);

    utils.setCookie("h5LogsObj", encodeURI(JSON.stringify(h5LogsObj)), 0);
    utils.setCookie("link", encodeURI(link), 0);

    API.API_reportView("home_page_view");
  },

  methods: {
    begin() {
      if (this.$refs.accord.male == "" || this.$refs.accord.female == "") {
        window.scrollTo(0, window.screen.height / 2);
        return;
      } else {
        let params = {
          info: [
            { gender: 1, name: this.$refs.accord.male },
            { gender: 0, name: this.$refs.accord.female },
          ],
        };

        this.$router.push({ path: "/pay", query: params });
      }
    },
  },
};
</script>

<style scoped src='./index.css'>
</style>