<template>
  <view class="login-select-index-container">
    <view class="logo-content"></view>
    <view class="app-name">欢迎登录小发同城商家平台</view>
    <view class="app-title">商家中心</view>
    <view class="btn-content">
      <view class="btn-block">
        <u-button class="btn btn-login" :hairline="false" @click="skipuLogin()">
          登录
        </u-button>
        <view class="btn-tips">已有门店&nbsp;&nbsp;直接登录</view>
      </view>
      <view class="btn-block">
        <u-button class="btn btn-register" @click="skipuRegister()">
          注册开店
        </u-button>
        <view class="btn-tips">新开门店&nbsp;&nbsp;前去注册</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  onShow() {
    if (this.userInfo && Object.keys(this.userInfo).length > 0) {
      var _userinfo = JSON.parse(JSON.stringify(this.userInfo));
      let mobile = "";
      mobile = _userinfo.user_mobile.startsWith("+86")
        ? _userinfo.user_mobile.replace("+86", "")
        : _userinfo.user_mobile;
      this.checkAccountIsPass({ userInfo: _userinfo, mobile: mobile });
    }
  },
  methods: {
    ...mapActions("user", ["checkAccountIsPass"]),
    skipuLogin() {
      // uni.switchTab({
      //   url: "/pages/order/order",
      // });

      // uni.navigateTo({
      //   url: "/pages/my/businessStatus",
      // });

      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    skipuRegister() {
      uni.navigateTo({
        url: "/pages/register/register",
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/variables.scss";
.login-select-index-container {
  overflow: hidden;

  position: relative;
  color: #333333;
  .logo-content {
    background-image: url("../../static/logo.jpg");
    background-size: 100% 100%;
    width: 128rpx;
    height: 128rpx;
    margin: 50% auto;
    margin-bottom: 16rpx;
    border-radius: 12rpx;
    overflow: hidden;
  }

  .app-name {
    background: url("../../static/title.png") no-repeat 50% 50%;
    background-size: 100% 100%;
    width: 398rpx;
    height: 140rpx;
    margin: auto;
    font-size: 72rpx;
    text-align: center;
    font-weight: bold;
    color: #000;
    text-indent: -999999px;
  }

  .app-title {
    font-size: 50rpx;
    letter-spacing: 5px;
    text-align: center;
  }

  .btn-content {
    position: fixed;
    bottom: 14%;
    width: 100%;
    display: flex;
    gap: 50rpx;
    justify-content: center;

    .btn-block {
      .btn {
        width: 300rpx;
        height: 80rpx;
        border-radius: 0;
        border: none;
        font-weight: bold;
        &::after {
           border-radius: 0;
        }
      }

      .btn-register {
        background: $base-btn-bg-color;
        color: #fff;

        &::after {
          border: none;
        }
      }

      .btn-register {
        &::after {
          border: none;
        }
      }

      .btn-tips {
        margin-top: 32rpx;
        font-size: 24rpx;
        text-align: center;
        color: #666;
      }
    }
  }
}
</style>
