<template>
  <view class="content">
    <u-loading-page bg-color="#a7a7a7" :loading="loading"></u-loading-page>
    <!-- <view class="bt1 door" @tap="showBtn = true"></view>
    <view class="bt2 door" v-if="showBtn" @tap="showUser = true"></view> -->
    <image class="logo" src="/static/logo.png"></image>
    <view class="helloTip"> Hello! </view>
    <view class="helloText"> 欢迎使用广交投氢能车辆运营监控 </view>
    <view class="remarkText"> 此小程序仅限氢能车辆运营方内部人员使用 </view>
    <view style="width: 80%; margin-top: 80rpx">
      <!-- <u-subsection
        mode="subsection"
        :list="list"
        :current="current"
        @change="sectionChange"
        :fontSize="30"
        style="margin-bottom: 20rpx"
      ></u-subsection> -->
      <!-- <view v-if="current == 0">
        <login-user></login-user>
      </view>
      -->
    </view>
    <view class="loginBlock">
      <view class="helloText"> 欢 迎 登 录 </view>
      <view>
        <login-user></login-user>
      </view>
    </view>
  </view>
</template>

<script>
import loginUser from "./user-login/index.vue";
// import loginDriver from "./driver-login/index.vue";
export default {
  options: {
    styleIsolation: "shared", // 解除样式隔离
  },
  components: {
    loginUser,
    // loginDriver,
  },
  data() {
    return {
      loading: false,
      current: 0,
      list: ["广交投员工", "司机"],
      showUser: false,
      showBtn: false,
    };
  },
  onReady() {
    // this.getToDo();
    const tempIds = ["7NTdeu2Sft31k4wtCGVEjvfvvG3MDxAtUW3g17vv48E"];
    wx.getSetting({
      withSubscriptions: true,
      success(res) {
        // console.log(res.authSetting);
        // console.log(res.subscriptionsSetting);
        if (res.subscriptionsSetting[tempIds[0]] !== "accept") {
          uni.showModal({
            title: "授权提示",
            content: "同意订阅通知消息吗?",
            success: (res) => {
              console.log(res);
              if (res.confirm) {
                uni.requestSubscribeMessage({
                  tmplIds: tempIds, // 需要下发的订阅消息模板id数组
                  success(res) {
                    console.log(res);
                    if (res[tempIds[0]] === "accept") {
                      console.log("用户同意订阅");
                    }
                  },
                });
              }
            },
          });
        }
        // res.subscriptionsSetting = {
        //   mainSwitch: true, // 订阅消息总开关
        //   itemSettings: {   // 每一项开关
        //     SYS_MSG_TYPE_INTERACTIVE: 'accept', // 小游戏系统订阅消息
        //     SYS_MSG_TYPE_RANK: 'accept'
        //     zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: 'reject', // 普通一次性订阅消息
        //     ke_OZC_66gZxALLcsuI7ilCJSP2OJ2vWo2ooUPpkWrw: 'ban',
        //   }
        // }
      },
    });
  },
  methods: {
    sectionChange(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 40rpx;
  background: linear-gradient(0deg, #b6e2fb, #2890e5);
  justify-content: center;
  position: relative;
  font-family: MiSans-Semibold, MiSans-Demibold, "Segoe UI", Tahoma, Geneva,
    Verdana, sans-serif;
}
.helloTip {
  font-size: 100rpx;
  color: #fff;
  font-weight: bold;
  margin-top: -200rpx;
}
.helloText {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  font-size: 46rpx;
  color: #fff;
  font-weight: 400;
}
.remarkText {
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  font-size: 36rpx;
  color: #b54b45;
  font-weight: 400;
}
.loginBlock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 685rpx;
  height: 664rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  //   background-image: url("../../static/login_bg.png");
  background-size: cover;
  background-color: #fff;
  //   background: #ffffff;
  border-radius: 20rpx;
  .helloText {
    color: #017043;
    text-align: center;
    font-weight: bold;
  }
}
.logo {
  position: absolute;
  height: 76rpx;
  /* width: 568rpx ; */
  top: 40rpx;
  right: 40rpx;
  // margin-left: auto;
  // margin-right: auto;
  // margin-bottom: 50rpx;
}
// .door {
//   width: 20px;
//   height: 20px;
//   background: green;
// }
// .bt1 {
//   position: absolute;
//   top: 10px;
//   left: 10px;
//   opacity: 0;
// }
// .bt2 {
//   position: absolute;
//   bottom: 10px;
//   left: 10px;
//   opacity: 0;
// }
.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.login-btn {
  margin: 30rpx 0rpx;
}
</style>
