<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div style="height: 100%; width: 55%; position: relative">
      <div style="position: absolute; left: 56px; top: 56px; display: flex">
        <img src="@/assets/login/logo.png" style="width: 84px; height: 84px" />
        <span
          style="
            font-size: 48px;
            font-weight: bold;
            color: #fefefe;
            line-height: 84px;
            margin-left: 20px;
          "
          >{{ $t("login.bgTitle1") }}{{ env }}</span
        >
      </div>
      <div style="position: absolute; left: 160px; top: 170px; display: flex">
        <img src="@/assets/login/1.png" style="width: 36px; height: 36px" />
        <span
          style="
            font-size: 32px;
            font-weight: bold;
            color: #fefefe;
            line-height: 36px;
            margin-left: 8px;
          "
          >{{ $t("login.bgTitle2") }}</span
        >
      </div>
      <div style="position: absolute; left: 130px; top: 250px; display: flex">
        <img src="@/assets/login/8.png" style="width: 320px; height: 322px" />
        <div style="position: absolute; top: 20px; left: 30px; width: 500px">
          <div style="display: flex; margin-top: 20px">
            <img src="@/assets/login/2.png" style="width: 24px; height: 24px" />
            <span
              style="
                font-size: 14px;
                font-weight: 400;
                color: #000;
                line-height: 24px;
                margin-left: 5px;
              "
              >{{ $t("login.bgTitle3") }}</span
            >
          </div>
          <div style="display: flex; margin-top: 20px">
            <img src="@/assets/login/3.png" style="width: 24px; height: 24px" />
            <span
              style="
                font-size: 14px;
                font-weight: 400;
                color: #000;
                line-height: 24px;
                margin-left: 5px;
              "
              >{{ $t("login.bgTitle4") }}</span
            >
          </div>
          <div style="display: flex; margin-top: 20px">
            <img src="@/assets/login/4.png" style="width: 24px; height: 24px" />
            <span
              style="
                font-size: 14px;
                font-weight: 400;
                color: #000;
                line-height: 24px;
                margin-left: 5px;
              "
              >{{ $t("login.bgTitle5") }}</span
            >
          </div>
          <div style="display: flex; margin-top: 20px">
            <img src="@/assets/login/5.png" style="width: 24px; height: 24px" />
            <span
              style="
                font-size: 14px;
                font-weight: 400;
                color: #000;
                line-height: 24px;
                margin-left: 5px;
              "
              >{{ $t("login.bgTitle6") }}</span
            >
          </div>
          <div style="display: flex; margin-top: 20px">
            <img src="@/assets/login/6.png" style="width: 24px; height: 24px" />
            <span
              style="
                font-size: 14px;
                font-weight: 400;
                color: #000;
                line-height: 24px;
                margin-left: 5px;
              "
              >{{ $t("login.bgTitle7") }}</span
            >
          </div>
          <div style="display: flex; margin-top: 20px">
            <img src="@/assets/login/7.png" style="width: 24px; height: 24px" />
            <span
              style="
                font-size: 14px;
                font-weight: 400;
                color: #000;
                line-height: 24px;
                margin-left: 5px;
              "
              >{{ $t("login.bgTitle8") }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div style="position: absolute; left: 60%; top: 105px">
      <div style="display: flex; justify-content: space-between">
        <div style="display: flex">
          <img
            src="@/assets/setting/user.png"
            style="width: 30px; height: 30px"
          />
          <span
            style="
              font-size: 24px;
              font-weight: bold;
              color: #000;
              line-height: 34px;
              margin-left: 10px;
            "
            >{{ $t("login.title") }}</span
          >
        </div>
        <div>
          <el-select
            v-model="language"
            size="mini"
            placeholder=""
            class="lang"
            @change="handleSetLanguage"
          >
            <div slot="prefix" style="padding: 4px">
              <img src="@/assets/lang.png" style="width: 20px; height: 20px" />
            </div>
            <el-option
              v-for="item in locale"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div style="width: 500px">
        <div style="margin-top: 70px">
          <span style="font-size: 14px; color: #000">{{
            $t("login.type")
          }}</span>
          <el-radio v-model="loginType" label="1" style="margin-left: 25px">{{
            $t("login.userLogin")
          }}</el-radio>
          <el-radio v-model="loginType" label="2">{{
            $t("login.mobileLogin")
          }}</el-radio>
        </div>
        <div style="margin-top: 60px">
          <user-login v-if="loginType == 1" />
          <mobile-login v-if="loginType == 2" />
        </div>
        <div
          v-if="homeUrl"
          style="width: 100%; text-align: center; margin-top: 20px"
        >
          <el-button
            :loading="loading"
            type="primary"
            round
            style="width: 70%"
            @click="toHome"
            >{{ $t("common.returnIndex") }}</el-button
          >
        </div>
        <div style="width: 100%; text-align: center; margin-top: 20px">
          <el-link href="/ucenter/#/registered" style="color: #5ba8dc">{{
            $t("login.registered")
          }}</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserLogin from "./components/userLogin";
import MobileLogin from "./components/mobileLogin";
import { locale } from "@/api/country";

export default {
  name: "Login",
  components: { UserLogin, MobileLogin },
  data() {
    return {
      showDialog: false,
      loading: false,
      loginType: "1",
      locale: [],
      env: "",
    };
  },
  computed: {
    homeUrl() {
      return process.env.VUE_APP_HOME_API;
    },
    language: {
      get() {
        return this.$store.getters.language;
      },
      set(val) {
        this.handleSetLanguage(val);
      },
    },
  },
  watch: {
    loginType: {
      handler: function () {},
      deep: true,
    },
  },
  created() {
    if (process.env.NODE_ENV === "development") {
      this.env = "-测试版";
    }
    // window.addEventListener('storage', this.afterQRScan)
    locale().then((r) => {
      this.locale = r.data;
    });
  },
  mounted() {},
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang;
      this.$store.dispatch("app/setLanguage", lang);
    },
    toHome() {
      window.location.href = this.homeUrl;
    },
  },
};
</script>

<style lang="scss" scoped>
.lang {
  width: 150px;
  ::v-deep .el-input__inner {
    border-radius: 34px;
  }
}
</style>
