<template>
  <view class="login">
    <view class="langview">
      <view class="select" @click="showLangselect(true)">
        {{ langList[language] }}
      </view>
      <view class="select-box" v-show="langselect">
        <view
          class="option"
          v-for="item in Object.keys(langList)"
          :key="item"
          :class="{ active: item == language }"
          @click="choseLang(item)"
        >
          {{ langList[item] }}
        </view>
      </view>
    </view>
    <view class="content">
      <view class="logo-shell">
        <view class="logo">
          <u--image
            :showLoading="false"
            :src="loginLogo"
            width="125px"
            height="119px"
            mode="scaleToFill"
          ></u--image>
        </view>
      </view>
      <view class="panel">
        <u-input
          class="input"
          v-model="phone"
          type="text"
          clearable
          border="none"
          color="#f7ecd2"
          :placeholder="$lang.enterAccount"
          placeholderStyle="color: rgba(245, 228, 184, 0.38); font-size: 14px;"
          ><!--
          <view class="phone-code" slot="prefix" @click="countryShow = true">{{
            countryData.country_code
          }}</view>-->
        </u-input>
        <u-input
          class="input"
          v-model="password"
          :password="true"
          border="none"
          color="#f7ecd2"
          :placeholder="$lang.enterPassword"
          placeholderStyle="color: rgba(245, 228, 184, 0.38); font-size: 14px;"
        >
        </u-input>
        <view class="btn-box">
          <view class="btn btn-primary" @tap="login('login')">{{
            $lang.login
          }}</view>
          <view class="btn btn-secondary" @tap="login('dome')">{{
            $lang.dome
          }}</view>
        </view>
        <view class="tip" @tap="goRegister">{{ $lang.goRegister }}</view>
      </view>
    </view>
    <!-- 提示 -->
    <u-toast ref="uToast" />
    <!-- 区号 -->
    <country-code
      class="country"
      :show="countryShow"
      :anchor="countryData.anchor_index"
      :country="countryData.country_en"
      @select="selectCountryTap"
      @close="countryShow = false"
    ></country-code>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      phone: "",
      password: "",
      countryShow: false,
      countryData: {
        anchor_index: 2,
        country_en: "Philippines",
        country_cn: "菲律賓",
        country_code: "+63",
      },
      langList: {
        en: "English",
        tw: "繁體中文",
		cn: "简体中文",
        yn: "Việt nam",
        kr: "한국어",
        tl: "แบบไทย",
        in: "Indonesia",
      },
      langselect: false,
    };
  },
  computed: {
    ...mapState({
      language: (state) => (state.app.language ? state.app.language : "en"),
      $lang: (state) => state.app.lang[state.app.language],
      loginLogo: (state) => state.app.loginLogo,
    }),
  },
  onLoad() {
    let userData = {};
    try {
      userData = localStorage.getItem("userInfo");
      userData = userData ? JSON.parse(userData) : {};
      if (userData && userData.id) {
        uni.switchTab({
          url: "/pages/index",
        });
      }
    } catch (err) {
      console.log(err);
    }
  },
  methods: {
    showLangselect(state) {
      this.langselect = state;
    },
    choseLang(lang) {
      this.$store.commit("app/updateLanguage", lang);
      this.langselect = false;
    },
    selectCountryTap(data) {
      this.countryData = data;
      this.countryShow = false;
    },
    goRegister() {
      this.$router.replace({
        path: "/pages/register",
      });
    },
    login(type) {
      if (!this.phone && type == "login") {
        this.$toast({
          message: this.$lang.enterAccount,
          duration: 2000,
        });
      } else if (!this.password & (type == "login")) {
        this.$toast({
          message: this.$lang.enterPassword,
          duration: 2000,
        });
      } else {
        const o = navigator.userAgent;
        const isAndroid = o.indexOf("Android") > -1 || o.indexOf("Adr") > -1; //android终端
        const isiOS = !!o.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        const client = isAndroid ? 3 : isiOS ? 2 : 1;
        const params = {
          username: this.phone,
          password: this.password,
          code: this.countryData.country_code,
          client,
        };
        let api = "login";
        if (type == "dome") {
          api = "dome";
          params.token = "shiwanlogin";
          // console.log(params)
        }
        this.$toast({
          type: "loading",
          message: this.$lang.logining,
          duration: 200000,
        });
        this.$api[api](params)
          .then((res) => {
            if (res.Success) {
              this.$store.commit("app/updateUserInfo", {
                ...res.Data,
              });
              this.$store.commit("app/updateLoginType", type);
              uni.switchTab({
                url: "/pages/index",
              });
              this.$toastHide();
            } else {
              this.$toast({
                message: res.Msg,
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$toastHide();
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: url("~@/static/images/login_bg.png") no-repeat;
  background-size: 100% auto;
  background-position: bottom left;
  overflow-y: auto;
  .langview {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
    .select {
      min-width: 96px;
      padding: 0 14px;
      font-size: 13px;
      color: #e8d39b;
      line-height: 34px;
      background: rgba(15, 12, 10, 0.74);
      border: 1px solid rgba(213, 181, 103, 0.18);
      border-radius: 10px;
      text-align: center;
      &:active {
        opacity: 0.82;
      }
    }
    .select-box {
      position: absolute;
      right: 0;
      top: 40px;
      width: 108px;
      padding: 4px 0;
      line-height: 32px;
      background: rgba(15, 12, 10, 0.92);
      border: 1px solid rgba(213, 181, 103, 0.18);
      border-radius: 10px;
      text-align: center;
      color: rgba(255, 246, 226, 0.88);
      font-size: 13px;
      z-index: 9;
      .option {
        padding: 0 8px;
      }
      .option:active {
        opacity: 0.6;
      }
      .active {
        color: #e8d39b;
        font-weight: bold;
      }
    }
  }
  .content {
    width: 86%;
    max-width: 326px;
    margin: 0 auto;
    padding: 94px 0 48px;
    .logo-shell {
      margin-bottom: 20px;
    }
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 125px;
      height: 119px;
      margin: 0 auto;
    }
    .panel {
      position: relative;
      padding: 20px 18px 22px;
      border-radius: 24px;
      background: linear-gradient(
        180deg,
        rgba(14, 11, 9, 0.9) 0%,
        rgba(10, 8, 7, 0.8) 100%
      );
      border: 1px solid rgba(213, 181, 103, 0.22);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
      overflow: hidden;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 18px;
        right: 18px;
        height: 1px;
        background: linear-gradient(
          90deg,
          rgba(213, 181, 103, 0),
          rgba(244, 221, 169, 0.82),
          rgba(213, 181, 103, 0)
        );
      }
    }
    .input {
      height: 50px;
      line-height: 50px;
      margin-bottom: 14px;
      background: rgba(24, 20, 17, 0.96);
      border: 1px solid rgba(213, 181, 103, 0.14);
      border-radius: 15px;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16);
      &:last-of-type {
        margin-bottom: 0;
      }
      ::v-deep .u-input__content {
        min-height: 100%;
        padding: 0 15px;
      }
      ::v-deep .u-input__content__field-wrapper {
        width: 100%;
      }
      ::v-deep input {
        color: #f7ecd2 !important;
        font-size: 15px !important;
        letter-spacing: 0.2px;
      }
      ::v-deep input::placeholder {
        color: rgba(245, 228, 184, 0.42) !important;
      }
    }
    .phone-code {
      min-width: 50px;
      text-align: center;
      border-right: 1px solid rgba(213, 181, 103, 0.18);
    }
    .btn-box {
      margin-top: 20px;
      .btn {
        width: 100%;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.5px;
        border-radius: 15px;
        margin-top: 12px;
        &:active {
          opacity: 0.86;
        }
      }
      .btn-primary {
        margin-top: 0;
        color: #241804;
        background: linear-gradient(
          180deg,
          #f2dfb6 0%,
          #dfbd78 52%,
          #bd8d39 100%
        );
        box-shadow: 0 12px 24px rgba(125, 84, 22, 0.24),
          inset 0 1px 0 rgba(255, 255, 255, 0.42);
      }
      .btn-secondary {
        color: #ead6a0;
        background: rgba(18, 15, 12, 0.92);
        border: 1px solid rgba(213, 181, 103, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }
    }
  }
  .country {
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .tip {
    font-size: 12px;
    color: rgba(234, 214, 160, 0.92);
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(213, 181, 103, 0.1);
    text-align: center;
    letter-spacing: 0.2px;
    &:active {
      opacity: 0.7;
    }
  }
}
</style>
