<template>
  <!-- 首页 -->
  <div class="home">
    <!-- 首页盒子内容 -->
    <div class="homebox" :style="dynamic">
      <!-- 活动规则 -->
      <div class="activityRule" @click="ruleTips"></div>
      <!-- 左边男方字体 -->
      <img src="../image/nanfont.png" alt="" class="leftFont" />
      <!-- 右边女方字体 -->
      <img src="../image/nvfont.png" alt="" class="rightFont" />

      <!-- 输入内容-->
      <div class="homeContent">
        <!-- 输入框 -->
        <div class="nameIptOne">
          <input
            v-model="boy"
            class="nameIpt"
            type="text"
            placeholder="男孩姓名"
          />
        </div>
        <div class="nameIptTwo">
          <input
            v-model="girl"
            class="nameIpt"
            type="text"
            placeholder="女孩姓名"
          />
        </div>
        <!-- 按钮 -->
        <div class="btnMatching" @click="navPay"></div>
        <!-- 字体 -->
        <p class="footerFont" v-if="homeData">
          已有<span class="fontRed">{{ homeData.total_num }}</span
          >人完成配对,并参与了领<span class="fontRed">{{ homeData.gift }}</span
          >活动提交视为您已同意《隐私协议》
        </p>
      </div>
    </div>
    <!-- 玩法规则提示 -->
    <van-dialog v-model="showTips" title="规则说明" show-cancel-button>
      <!--每一个 -->
      <div class="every">
        1.用户在本平台使用幸运星球，应遵守本规则。
        用户开始使用及/或继续使用本服务，即视为用户同意并已经接受本规则中全部内容。
        此后用户不得以未阅读/未同意本规则内容或类似理由提出任何形式的抗辩。
      </div>
      <div class="every">
        2.点击“立即抽奖”即可进行抽奖，抽中的结果为盲盒的购买资格，结果显示的商品为该盲盒里有概率中奖的商品；
      </div>
      <div class="every">
        3.转盘页面展示的商品均为有概率中奖的商品，除此外还有其它可抽中的商品，
        具体可抽中商品清单及中奖概率请在支付页面点击“全部商品”进行查看；
      </div>
      <div class="every">
        4.付费前，请您务必了解，付款获得的是抽奖资格（盲盒），并非页面显示的当前商品；
      </div>
      <div class="every">
        5.“100%中奖”意为不设空盒，付费成功后您将获得可抽中商品清单里的任一商品；
      </div>
      <div class="every">
        6.该盲盒内商品类型概率:传说款:0.168%、史诗款:0.342%、尊贵款:8.723%、普通款:90.767%;
      </div>
      <div class="every">7.风险提示：商品抽奖存在概率性，付费请谨慎；</div>
      <div class="every">8.未成年人须在家长监督下进行购买；</div>
      <div class="every">
        9.本渠道抽中的所有商品包邮，以下偏远地区（内蒙古、宁夏、海南）
        需补邮费差价25元，受疫情天气及物流公司安排等影响，以下偏远地区
        (新疆、西藏、甘肃、青海) 暂不支持配送；
      </div>
      <div class="every">
        10.付费成功后，您需回到本页面，或下载“幸运星球”查看您的中奖商品，
        填写您的收货地址，等待宝贝发出；
      </div>
      <div class="every">
        11.当您收到盲盒商品后，出现以下质量问题的，您可提供开箱图片或视频，
        由本公司进行确认及受理：商品错发或者数量不符、商品在运输过程造成严重破损，商品做工存在明显瑕疵；
      </div>
      <div class="every">
        12.因工艺原因存在微瑕的商品，轻微盒损的商品，商品漆味重，均不属于质量问题；
      </div>
      <div class="every">
        13.如有疑问，可下载“幸运星球”APP，联系在线客服进行咨询。
      </div>
    </van-dialog>
  </div>
</template>

<script>
// 轻提示
import { Toast } from "vant";
export default {
  name: "Home",
  data() {
    return {
      // 输入框姓名
      boy: "",
      girl: "",
      // 规则提示弹窗
      showTips: false,
      // 动态背景颜色
      dynamic: "",
    };
  },
  methods: {
    // 活动规则
    ruleTips() {
      this.showTips = !this.showTips;
    },
    // 跳转支付页
    async navPay() {
      // 配对信息
      try {
        await this.$store.dispatch("gainPair", {
          boy: this.boy,
          girl: this.girl,
          key: this.$md5(this.boy + this.girl + "cz321456").toUpperCase(),
        });
        this.$router.push({
          path: "/pay",
          query:{
            boy: this.boy,
            girl: this.girl,
          },
        });
      } catch (error) {
        Toast(error);
      }
    },
  },
  async mounted() {
    // 首页信息列表
    // await this.$store.dispatch("gainHomeList");
    // 首页详细信息
    await this.$store.dispatch("gainHomeDetailed", 1);

    // 背景图
    this.dynamic = {
      background: `url('${this.homeData.photo}') 0 0 /100% no-repeat`,
    };
  },
  computed: {
    // 首页内容
    homeData() {
      return this.$store.state.home.detailed;
    },
  },
};
</script>

<style lang="scss" scoped>
// 适配函数计算
@function vw($px) {
  @return 100 * $px/720 + vw;
}
* {
  margin: 0;
  padding: 0;
}
// 动画

// 左边字体动画
@keyframes leftTop {
  0% {
    top: vw(400);
  }
  50% {
    top: vw(362);
  }
  100% {
    top: vw(400);
  }
}
// 右边字体动画
@keyframes rightTop {
  0% {
    top: vw(372);
  }
  50% {
    top: vw(410);
  }
  100% {
    top: vw(372);
  }
}
// 按钮动画
@keyframes bigSmall {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

// 首页
.home {
  width: vw(720);
  display: flex;
  flex-direction: column;
  align-items: center;
  // 首页盒子内容
  .homebox {
    width: vw(720);
    height: vw(1392);
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;

    // 活动规则
    .activityRule {
      width: vw(40);
      height: vw(137);
      position: absolute;
      top: vw(68);
      right: vw(0);
      background: url("../image/rulePic.png") 0 0 /100% no-repeat;
    }
    // 左边男方字体
    .leftFont {
      width: vw(207);
      height: vw(94);
      position: absolute;
      top: vw(400);
      left: vw(15);
      animation: leftTop 2.5s linear infinite;
    }
    // 右边女方字体
    .rightFont {
      width: vw(207);
      height: vw(94);
      position: absolute;
      top: vw(372);
      right: vw(37);
      animation: rightTop 2.5s linear infinite;
    }
    // 输入内容
    .homeContent {
      width: vw(720);
      height: vw(671);
      position: absolute;
      background: url("../image/homeBR.png") 0 0 /100% no-repeat;
      top: vw(680);
      display: flex;
      flex-direction: column;
      align-items: center;
      // 输入框
      .nameIptOne {
        width: vw(620);
        height: vw(90);
        position: absolute;
        top: vw(177);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background: url("../image/nameIptO.png") 0 0 /100% no-repeat;
        ::placeholder {
          color: #808080;
        }
      }

      .nameIptTwo {
        width: vw(620);
        height: vw(90);
        position: absolute;
        top: vw(297);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background: url("../image/nameIptY.png") 0 0 /100% no-repeat;
        ::placeholder {
          color: #808080;
        }
      }
      .nameIpt {
        width: vw(520);
        height: vw(90);
        outline: none;
        border: none;
        font-size: vw(32);
      }
      // 按钮
      .btnMatching {
        width: vw(620);
        height: vw(103);
        position: absolute;
        top: vw(417);
        animation: bigSmall 2.5s linear infinite;
        background: url("../image/btnMatching.png") 0 0 / 100% no-repeat;
      }
      // 字体
      .footerFont {
        width: vw(558);
        font-size: vw(24);
        position: absolute;
        top: vw(530);
        color: #976773;
        text-align: center;
        line-height: vw(48);
        .fontRed {
          color: red;
        }
      }
    }
  }
  // 规则玩法提示
  .van-dialog {
    width: vw(620);
    height: vw(800);
    display: flex;
    align-items: center;
    flex-direction: column;
    // 标题头
    :deep(.van-dialog__header) {
      font-size: vw(38);
      font-weight: 700;
    }
    // 内容
    :deep(.van-dialog__content) {
      width: vw(550);
      height: vw(600);
      overflow: scroll;
      margin-top: vw(20);
      // 每一条信息
      .every {
        margin-bottom: vw(15);
      }
    }
    //底部按钮
    :deep(.van-dialog__footer) {
      width: vw(550);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>