<template>
  <!-- 首页 -->
  <div class="home">
    <!-- 顶部提示 -->
    <div class="topTips"></div>
    <!-- 盒子 -->
    <div class="homeBox">
      <!-- 商品展示 -->
      <div class="homeBoxGoods">
        <transition-group
          class="animationBox"
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__flipInX"
          leave-active-class="animate__flipOutX"
        >
          <!-- 每一个商品 -->
          <div
            v-for="el in asdwdf"
            :key="el"
            class="goodlist"
            v-show="showFour"
          >
            <!-- 商品图片 -->
            <img class="commodity" src="./image/phone.png" alt="" />
            <!-- 栏目名字 -->
            <div class="column">新日电动车</div>
          </div>
        </transition-group>
      </div>

      <!-- 输入手机号 -->
      <div class="phoneBorder">
        <!-- 左边小框 -->
        <img class="phoneLeft" src="./image/phoneLeft.png" alt="" />
        <!-- 输入手机号框 -->
        <input
          class="phoneBorderIpt"
          type="text"
          name=""
          placeholder="请输入购买手机号"
        />
      </div>
      <!-- 开始购买 -->
      <div class="beginBtn">
        <!-- 左按钮 -->
        <img class="leftRightBtn" src="./image/leftGailv.png" alt="" />
        <!-- 购买 -->
        <img
          @click="fn"
          class="purchaseBtn"
          src="./image/purchase.png"
          alt=""
          v-show="purchaseShow"
        />
        <img
          @click="fn"
          class="purchaseBtn"
          src="./image/purchaseSecond.png"
          alt=""
          v-show="!purchaseShow"
        />
        <!-- 右按钮 -->
        <img class="leftRightBtn" src="./image/rightOrder.png" alt="" />
      </div>
      <!-- 协议 -->
      <div class="agreement">
        <!-- 确认按钮 -->
        <!-- <input class="affirm" type="checkbox" v-model="agree" /> -->
        <van-checkbox
          class="affirm"
          v-model="agree"
          checked-color="red"
        ></van-checkbox>
        <div class="agreementSize">
          我已阅读并同意《用户协议》、《隐私政策》、《幸运星球盒子购买协议》
        </div>
      </div>
      <!-- 底部公司信息 -->
      <div class="footerInformation">公司信息</div>
    </div>

    <!-- 左边固定导航条 -->
    <div class="navigationBar">
      <!-- 每一列服务 -->
      <div class="serviceList" @click="probability">
        <div class="serviceListBox">
          <img class="gailvImg" src="./image/gailv.png" alt="" />
          <p>商品 概率</p>
        </div>
      </div>
      <div class="serviceList" @click="navLogin">
        <div class="serviceListBox">
          <img class="gailvImg" src="./image/order.png" alt="" />
          <p>订单 查询</p>
        </div>
      </div>
      <div class="serviceList" @click="ruleTips">
        <div class="serviceListBox">
          <img class="gailvImg" src="./image/guize.png" alt="" />
          <p>玩法 规则</p>
        </div>
      </div>
      <div class="serviceList noBor" @click="kefuchaxun">
        <div class="serviceListBox">
          <img class="gailvImg" src="./image/service.png" alt="" />
          <p>联系 客服</p>
        </div>
      </div>
    </div>

    <!-- 下拉框概率 -->
    <van-action-sheet
      v-model="probabilityShow"
      title="奖品抽奖存在概率性，付费请谨慎"
    >
      <!-- 内容 -->
      <div class="probabilityContent">
        <!-- 商品概率类型 -->
        <div class="probabilityType">
          <!-- 标题 -->
          <div class="probabilityTypeTitle">盒内商品类型概率</div>
          <!-- 概率详细 -->
          <div class="probabilityDetailed">
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <div class="GradeType PT">普通款</div>
              <p class="percentage">86.434%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <div class="GradeType ZG">尊贵款</div>
              <p class="percentage">12.314%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <div class="GradeType SS">史诗款</div>
              <p class="percentage">0.834%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <div class="GradeType CS">传说款</div>
              <p class="percentage">0.418%</p>
            </div>
          </div>
        </div>
        <!-- 盒内全部商品标题 -->
        <!-- 大标题 -->
        <div class="bigTitle">ALL GOOD THINGS</div>
        <!-- 小标题 -->
        <div class="smallTitle">盒内全部商品</div>

        <!-- 商品大全 -->
        <div class="wholeCommodity">
          <!-- 每一件商品 -->
          <div class="commodity">
            <!-- 商品图片 -->
            <div class="commodityImg"></div>
            <!-- 商品名字 -->
            <div class="commodityName">
              限时活动【40元抽手机】苹果现货 iPhone12 256g
            </div>
            <!-- 商品价钱 -->
            <div class="commodityPrice">
              <p class="commodityPriceSize"><span>参考价 ￥</span>40</p>
            </div>
          </div>
          <!-- 每一件商品 -->
          <div class="commodity">
            <!-- 商品图片 -->
            <div class="commodityImg"></div>
            <!-- 商品名字 -->
            <div class="commodityName">
              限时活动【40元抽手机】苹果现货 iPhone12 256g
            </div>
            <!-- 商品价钱 -->
            <div class="commodityPrice">
              <p class="commodityPriceSize">
                <span>参考价 ￥</span>
                40
              </p>
            </div>
          </div>
          <!-- 每一件商品 -->
          <div class="commodity">
            <!-- 商品图片 -->
            <div class="commodityImg"></div>
            <!-- 商品名字 -->
            <div class="commodityName">
              限时活动【40元抽手机】苹果现货 iPhone12 256g
            </div>
            <!-- 商品价钱 -->
            <div class="commodityPrice">
              <p class="commodityPriceSize">
                <span>参考价 ￥</span>
                40
              </p>
            </div>
          </div>
        </div>
      </div>
    </van-action-sheet>

    <!-- 玩法规则提示 -->
    <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>
    </van-dialog>
  </div>
</template>
<script>
import "animate.css";
export default {
  name: "Home",
  data() {
    return {
      // 概率显示与展示
      probabilityShow: false,
      // 规则提示弹窗
      showTips: false,
      // 勾选同意政策
      agree: false,
      // 购买按钮切换
      purchaseShow: true,
      // 按钮定时器
      timerBtn: null,
      //显示的四样商品
      showFour: true,
      // 商品变换定时器
      timerGoods: null,
      asdwdf: [56, 131, 245, 24626],
    };
  },
  methods: {
    fn() {
      this.$router.push({
        name: "HomeSecond",
      });
    },
    // 显示概率
    probability() {
      this.probabilityShow = !this.probabilityShow;
    },
    //跳转登录页
    navLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    // 提示规则
    ruleTips() {
      this.showTips = !this.showTips;
    },
    // 客服查询跳转
    kefuchaxun() {
      (function (w, d, n, a, j) {
        w[n] =
          w[n] ||
          function () {
            return (w[n].a = w[n].a || []).push(arguments);
          };
        j = d.createElement("script");
        j.async = true;
        j.src =
          "https://qiyukf.com/script/e79536c3a3b3b8b8ae2fcd16084fd137.js?hidden=1";
        d.body.appendChild(j);
      })(window, document, "ysf");
      ysf("onready", function () {
        // todo
        ysf("open");
      });
    },
    //路由自带参数条装
    // navQuery(){
    //   this.$route
    //   console.log();
    // }
  },
  mounted(){
    console.log(this.$router.history.current.fullPath);
    if(this.$router.history.current.fullPath=="/home"){
      this.$router.replace({
        name:"Home"
      })
    }
  },
  activated() {
    // 按钮切换定时器
    this.timerBtn = setInterval(() => {
      this.purchaseShow = !this.purchaseShow;
    }, 400);
    this.timerGoods = setInterval(() => {
      // if (this.showFour == 2) {
      //   this.showFour = 0;
      // } else {
      //   this.showFour += 1;
      // }
      this.showFour = !this.showFour;
      console.log(this.showFour);
    }, 1500);
  },
  deactivated() {
    // 按钮切换定时器清除
    clearInterval(this.timerBtn);
  },
};
</script>

<style lang="scss" scoped>
// 适配函数计算
@function vw($px) {
  @return 100 * $px/720 + vw;
}
* {
  margin: 0;
  padding: 0;
}
// 首页
.home {
  width: vw(720);
  display: flex;
  flex-direction: column;
  align-items: center;
  // 顶部提示
  .topTips {
    width: vw(720);
    height: vw(62);
    background-size: contain;
    background-image: url("./image/top.png");
    background-position: center;
    background-repeat: no-repeat;
  }
  // 盒子
  .homeBox {
    width: vw(720);
    height: vw(1557);
    position: relative;
    background: url("./image/oneHome.png") 0px 0px / 100% no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    // 商品展示
    .homeBoxGoods {
      width: vw(622);
      height: vw(563);
      position: absolute;
      top: vw(417);
      //动画盒子
      .animationBox {
        width: vw(622);
      height: vw(563);
      display: flex;
      flex-wrap: wrap;
        // 每一个商品
        .goodlist {
          width: vw(311);
          height: vw(241);
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-between;
          // 商品
          .commodity {
            width: vw(171);
            height: vw(175);
            .commodityImg {
              width: vw(171);
              height: vw(175);
            }
          }
          // 栏目名字
          .column {
            width: vw(311);
            height: vw(56);
            font-size: vw(28);
            text-align: center;
            line-height: vw(56);
            background-size: contain;
            background-image: url("./image/column.png");
            background-position: center;
            background-repeat: no-repeat;
          }
        }
      }
    }
    // 手机号
    .phoneBorder {
      width: vw(504);
      height: vw(97);
      position: absolute;
      top: vw(1012);
      background-size: contain;
      background-image: url("./image/border.png");
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      font-weight: 400;
      // 左边小框
      .phoneLeft {
        width: vw(56);
        height: vw(54);
        margin: 0 vw(24) 0 vw(20);
      }
      // 输入手机号框
      .phoneBorderIpt {
        width: vw(304);
        height: vw(53);
        font-size: vw(38);
        background-color: transparent;
        border: none;
        outline: none;
      }
    }
    // 按钮
    .beginBtn {
      width: vw(613);
      height: vw(144);
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: space-between;
      top: vw(1182);
      // 左右按钮
      .leftRightBtn {
        width: vw(130);
        height: vw(130);
      }
      // 购买
      .purchaseBtn {
        width: vw(324);
        height: vw(144);
      }
    }
    // 协议
    .agreement {
      width: vw(514);
      height: vw(76);
      position: absolute;
      top: vw(1356);
      display: flex;
      justify-content: space-between;
      align-items: center;
      // 确认按钮
      .affirm {
        width: vw(40);
        height: vw(40);
      }
      // 协议详细字体
      .agreementSize {
        width: vw(462);
        height: vw(76);
        font-size: vw(22);
        color: white;
      }
    }
    //底部公司信息
    .footerInformation {
      position: absolute;
      top: vw(1557);
      width: vw(720);
      height: vw(223);
      text-align: center;
      color: white;
      background: #ff295d;
    }
  }
  // 导航条
  .navigationBar {
    width: vw(64);
    position: fixed;
    top: vw(181);
    left: vw(656);
    background: #ffffff;
    border-radius: vw(26) vw(0) vw(0) vw(26);
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    // 每一列服务
    .serviceList {
      width: vw(48);
      height: vw(107);
      border-bottom: 1px solid #a5a4a1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // 每一列盒子
      .serviceListBox {
        width: vw(48);
        height: vw(92);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .gailvImg {
          width: vw(30);
          height: vw(30);
        }
        p {
          width: vw(48);
          font-size: vw(18);
          text-align: center;
        }
      }
      // 概率
    }
    // 无边框
    .noBor {
      border: none;
    }
  }
  // 下拉框概率
  .van-popup--round {
    overflow: visible !important;
    align-items: center;
    padding-top: vw(17);
    border-top: vw(15) solid black;
    border-image: linear-gradient(to right, #ffe7be, #ca81f7, #79ecff) 1 10;
    border-radius: 0;
    background-color: #1e3250;
    // 标题头
    .van-action-sheet__header {
      width: vw(700);
      height: vw(60);
      background: #314b6f;
      border-radius: vw(8);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: vw(24);
      color: white;
      // icon图标
      .van-icon {
        width: vw(65) !important;
        height: vw(65) !important;
        background-color: rgba(0, 0, 0, 0.8);
        border: 1px solid white;
        position: absolute;
        top: vw(-100);
        right: vw(50);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: vw(45);
      }
    }
    // 内容
    .probabilityContent {
      margin-top: vw(20);
      display: flex;
      flex-direction: column;
      align-items: center;
      // 商品类型概率
      .probabilityType {
        width: vw(700);
        height: vw(248);
        background: #314b6f;
        border-radius: vw(8);
        display: flex;
        flex-direction: column;
        align-items: center;
        // 标题
        .probabilityTypeTitle {
          width: vw(192);
          height: vw(33);
          font-size: vw(24);
          font-weight: 400;
          color: #ffffff;
          line-height: vw(33);
          margin-top: vw(23);
        }
        // 概率详细
        .probabilityDetailed {
          width: vw(600);
          height: vw(120);
          margin-top: vw(57);
          display: flex;
          align-items: center;
          justify-content: space-between;
          // 每个类型
          .TypeList {
            width: vw(110);
            height: vw(95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            // 等级类型
            .GradeType {
              width: vw(100);
              height: vw(40);
              font-size: vw(22);
              text-align: center;
              line-height: vw(40);
              border-radius: vw(8);
              font-weight: 700;
            }
            // 普通 尊贵 史诗 传说
            .PT {
              background: linear-gradient(200deg, #0c4cf9 0%, #64e7ff 100%);
            }
            .ZG {
              background: linear-gradient(
                90deg,
                #ffead3 0%,
                #d587ff 57%,
                #8b82ff 100%
              );
            }
            .SS {
              background: linear-gradient(320deg, #f0ce83 0%, #c88c32 100%);
            }
            .CS {
              background: linear-gradient(
                55deg,
                #03ebf1 0%,
                #c3fdff 34%,
                #f8c6e7 69%,
                #fffee1 100%
              );
            }
            // 百分比
            .percentage {
              width: vw(110);
              height: vw(34);
              font-size: vw(28);
              font-weight: 500;
              color: #ffffff;
              line-height: vw(34);
              text-align: center;
            }
          }
        }
      }
      // 盒内全部商品标题
      // 大标题
      .bigTitle {
        height: vw(60);
        font-size: vw(48);
        font-weight: normal;
        color: #ffffff;
        line-height: vw(60);
        font-weight: 700;
        margin-top: vw(41);
        align-self: flex-start;
      }
      // 小标题
      .smallTitle {
        width: vw(192);
        height: vw(45);
        font-size: vw(32);
        font-weight: 600;
        color: #ffffff;
        line-height: vw(45);
        margin-bottom: vw(30);
        align-self: flex-start;
      }
      // 商品大全
      .wholeCommodity {
        width: vw(688);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: #1e3250;
        // 每一件商品
        .commodity {
          width: vw(336);
          height: vw(518);
          background-color: #314b6f;
          border-radius: vw(8);
          margin-bottom: vw(18);
          display: flex;
          flex-direction: column;
          align-items: center;
          // 商品图片
          .commodityImg {
            width: vw(214);
            height: vw(268);
            background-color: red;
            margin: vw(31) 0 vw(43);
          }
          // 商品名字
          .commodityName {
            width: vw(304);
            height: vw(65);
            font-size: vw(24);
            font-weight: 400;
            color: #ffffff;
            line-height: vw(33);
            letter-spacing: vw(1);
            margin-bottom: vw(15);
          }
          // 商品价钱
          .commodityPrice {
            width: vw(336);
            height: vw(70);
            line-height: vw(70);
            .commodityPriceSize {
              font-size: vw(56);
              font-weight: 700;
              color: white;
              margin-left: vw(23);
              span {
                font-size: vw(24);
                font-weight: 100;
              }
            }
          }
        }
      }
    }
  }
  // 规则玩法提示
  .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>