<template>
  <div class="login-container">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      autocomplete="on"
      label-position="left"
      label-width="80px"
    >
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item prop="mobile" :label="$t('login.mobile')">
            <el-input
              ref="mobile"
              v-model="loginForm.mobile"
              :placeholder="$t('login.mobile')"
              name="mobile"
              maxlength="11"
              type="text"
              tabindex="1"
              autocomplete="on"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-select v-model="loginForm.areaCode">
            <el-option
              v-for="item in countryList"
              :key="item.id"
              :label="'+' + item.tel + ' ' + item[apiLang]"
              :value="item.tel"
            />
          </el-select>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="display: flex">
        <el-col :span="16">
          <el-form-item prop="code" :label="$t('login.code')">
            <el-input
              ref="code"
              v-model="loginForm.code"
              :placeholder="$t('login.code')"
              name="code"
              type="text"
              tabindex="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-dropdown @command="getValidaCode" :disabled="disabled">
            <el-button type="primary">
              {{ getCode }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">SMS</el-dropdown-item>
              <el-dropdown-item command="2">WhatsApp</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>

      <div style="width: 100%; text-align: center; margin-top: 60px">
        <el-button
          :loading="loading"
          type="primary"
          round
          style="width: 70%"
          @click.native.prevent="handleLogin"
          >{{ $t("login.logIn") }}</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import { getCode, getCountryList, getInfo } from "@/api/user";
import { langData } from "@/data/lang";
export default {
  name: "MobileLogin",
  components: {},
  data() {
    return {
      countryList: [],
      loginForm: {
        areaCode: "86",
      },
      loginRules: {
        mobile: [
          {
            required: true,
            message: this.$t("login.mobileRules"),
            trigger: "blur",
          },
          { pattern: /^[0-9]\d*$/, message: this.$t("customer.phoneRules2") },
        ],
        code: [
          {
            required: true,
            message: this.$t("login.codeRules"),
            trigger: "blur",
          },
        ],
      },
      loading: false,
      disabled: false,
      count: 60,
      getCode: this.$t("login.getCode"),
      apiLang: "",
      langData: langData,
    };
  },
  computed: {
    language: {
      get() {
        return this.$store.getters.language;
      },
      set(val) {
        this.$i18n.locale = val;
        this.$store.dispatch("app/setLanguage", val);
      },
    },
  },
  watch: {
    language() {
      this.getCode = this.$t("login.getCode");
      this.apiLang = this.langData[this.language];
    },
  },
  created() {
    this.apiLang = this.langData[this.language];
    this.getCode = this.$t("login.getCode");
    getCountryList().then((r) => {
      this.countryList = r.data;
    });
  },
  mounted() {},
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    getValidaCode(messageType) {
      var data = {
        mobile: this.loginForm.mobile,
        nodeValue: 'user-sms-login',
        areaCode: this.loginForm.areaCode,
        isTransport: 0,
        transportId: 0,
        isOrders: 0,
        messageType: messageType
      }
      getCode(data).then(() => {
        var countDown = window.setInterval(() => {
          if (this.count < 1) {
            this.disabled = false;
            this.count = 60;
            this.getCode = this.$t("login.getCode");
            window.clearInterval(countDown);
          } else {
            this.count--;
            this.disabled = true;
            this.getCode = this.count + "s";
          }
        }, 1000);
      });
    },
    getInfos() {
      getInfo().then((r) => {
        this.loading = false;
        if (r.data.city) {
          this.$router.push({
            path: this.redirect || "/jiedao/jd-profile",
            query: this.otherQuery,
          });
        } else {
          this.$router.push({
            path: "/myInfo",
            query: this.otherQuery,
          });
        }
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          await this.$store.dispatch("user/smsLogin", this.loginForm);
          await this.getInfos();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
  },
};
</script>

<style lang="scss" scoped></style>
