<template>
  <div class="bogbox">
    <div class="firstpage">
      <img src="./img/introduce_head.png" />
      <!-- <button class="login" @click="Login">立即登录</button> -->
      <button class="button1" @click="Search">找家政</button>
      <button class="button2" @click="convertUserType">做家政</button>
    </div>
    <div class="footer">
      <img src="./img/introduce_footer.png" />
      <img class="QRcode" src="./img/QR.png" />
      <img class="about" src="./img/introduce_footer2.png" />

      <!--  底部详细信息 -->
      <div class="information">
        <div class="find_infor">
          <p>流程介绍</p>
          <p>挑选家政</p>
        </div>
        <div class="do_infor">
          <p>预约订单</p>
          <p>培训管理</p>
        </div>
        <div class="help_infor">
          <p>使用条款</p>
          <p>服务协议</p>
          <p>收费标准</p>
          <p>关于我们</p>
        </div>
        <div class="contact_infor">
          <p>●电话：</p>
          <p>188 1393××××</p>
          <p>周一至周五</p>
          <br />
          <p>●邮箱：</p>
          <P>智慧家政@163.com</P>
        </div>
      </div>
    </div>

    <!-- 侧边导航栏 -->
    <div class="right_nav">
      <div class="service">
        <img src="./img/客服.png" />
        <p>专属客服</p>
      </div>
      <div class="wechat">
        <img class="wechat" src="./img/微信.png" />
        <p>微信咨询</p>
      </div>
      <div @click="go_top" class="to_top">
        <img src="./img/3.1回到顶部.png" />
        <p>回到顶部</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Introduce",
  data() {
    return {
      isLogin: false,
    };
  },
  created() {
    if (localStorage.getItem("token") && localStorage.getItem("token") != "") {
      this.token = localStorage.getItem("token");
      this.isLogin = true;
    } else this.isLogin = false;
  },
  methods: {
    // Login() {
    //   if (
    //     localStorage.getItem("token") &&
    //     localStorage.getItem("token") != "" &&
    //     localStorage.getItem("token") != "undefined"
    //   ) {
    //     this.token = localStorage.getItem("token");
    //     this.isLogin = true;
    //   } else this.isLogin = false;

    //   if (!this.isLogin) {
    //     this.$router.push("./loginview");
    //   } else {
    //     alert("已登录，请先退出。");
    //   }
    // },
    // go_top() {
    //   document.documentElement.scrollTop = 0;
    // },
    Search() {
      this.$router.push("./search");
    }
    ,
    convertUserType() {
      let usertype = localStorage.getItem("userType");
      let token = localStorage.getItem("token");
      if (usertype === '0' || token == undefined) {
        if(window.confirm("未登录，请先登录")){
          this.$router.push("/loginView");
        }
      } else {
        if (window.confirm("切换身份需要登出账号,确定要执行此操作吗？")) {
          // 用户点击了“确定”按钮
          Logout().then((res) => {
            if (res.data.code === 200) {
              localStorage.clear()
              delCookie("userId");
              this.isLogin = false;
              this.$router.push("/loginView");
            }
          });
        } else {
          // 用户点击了“取消”按钮
        }
      }
    },
  },
};
</script>

<style scoped>
.firstpage {
  width: 100%;
  height: 100%;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
}

.button1 {
  position: absolute;
  top: 37.5rem;
  left: 6rem;
  width: 11rem;
  height: 3.5rem;
  background-color: #339966;
  border: 1px solid #339966;
  border-radius: 30px;
  color: aliceblue;
  font-size: 1.2rem;
  font-weight: bolder;
  cursor: pointer;
}

.button2 {
  position: absolute;
  top: 37.5rem;
  left: 19rem;
  width: 11rem;
  height: 3.5rem;
  background-color: #70a2c1;
  border: 1px solid #70a2c1;
  border-radius: 30px;
  color: aliceblue;
  font-size: 1.2rem;
  font-weight: bolder;
  cursor: pointer;
}

.footer {
  position: relative;
}

.QRcode {
  top: 34rem;
  left: 2rem;
  position: absolute;
  width: 15rem;
  height: 15rem;
}

.about {
  position: absolute;
  top: 27rem;
  left: 23rem;
  width: 64rem;
  height: auto;
}

.information {
  font-size: 1.2rem;
  color: #608eab;
  letter-spacing: 13px;
  line-height: 1rem;
}

.find_infor {
  position: absolute;
  top: 33rem;
  left: 25rem;
}

.do_infor {
  position: absolute;
  top: 33rem;
  left: 42rem;
}

.help_infor {
  position: absolute;
  top: 33rem;
  left: 58rem;
}

.contact_infor {
  text-align: left;
  position: absolute;
  top: 33rem;
  left: 75rem;
  letter-spacing: 5px;
}

.information p {
  cursor: pointer;
}

.right_nav {
  width: 4.5rem;
  background-color: rgb(250, 249, 249);
  position: fixed;
  top: 20rem;
  right: 1em;
  border-radius: 10px;
  cursor: pointer;
}

.right_nav img {
  margin-top: 10px;
  height: 2rem;
  width: auto;
}

.right_nav {
  transition: 1s;
}

.right_nav div :hover {
  transform: scale(1.2);
}</style>
