<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div class="registered-container">
      <img src="@/assets/login/login.png" style="width: 100%; height: 100%">
      <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") }}</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: 85px">
      <div style="display: flex; justify-content: space-between">
        <div style="display: flex">
          <img
            src="@/assets/login/register.png"
            style="width: 30px; height: 30px"
          >
          <span
            style="
              font-size: 24px;
              font-weight: bold;
              color: #000;
              line-height: 34px;
              margin-left: 10px;
            "
          >{{ $t("registered.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>
      <el-form
        ref="registeredForm"
        style="margin-top: 80px"
        :model="registeredForm"
        :rules="registeredRules"
        autocomplete="on"
        label-position="left"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item prop="mobile" :label="$t('registered.mobile')">
              <el-input
                ref="mobile"
                v-model="registeredForm.mobile"
                :placeholder="$t('registered.mobile')"
                name="mobile"
                maxlength="11"
                type="text"
                tabindex="1"
                autocomplete="on"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-select v-model="registeredForm.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-form-item prop="englishName" :label="$t('registered.nameEn')">
          <el-input
            ref="englishName"
            v-model="registeredForm.englishName"
            :placeholder="$t('registered.nameEn')"
            name="englishName"
            type="text"
            tabindex="1"
            autocomplete="on"
          />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item prop="code" :label="$t('registered.code')">
              <el-input
                ref="code"
                v-model="registeredForm.code"
                :placeholder="$t('registered.code')"
                name="code"
                type="text"
                tabindex="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%; margin-bottom: 30px"
              :disabled="disabled"
              @click.native.prevent="getValidaCode"
            >{{ getCode }}</el-button>
          </el-col>
        </el-row>
        <el-form-item prop="password" :label="$t('registered.password')">
          <el-input
            ref="password"
            v-model="registeredForm.password"
            :placeholder="$t('registered.passwordPlaceholder')"
            name="password"
            type="password"
            @input="pwdChange"
          />
        </el-form-item>
        <el-row :gutter="20" style="margin-left: 80px" class="password-level">
          <el-col :span="8">
            <div class="bg-level" :class="{ leveldisplay: level == 1 }">
              <p>{{ $t("registered.weak") }}</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="bg-level" :class="{ leveldisplay: level == 2 }">
              <p>{{ $t("registered.medium") }}</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="bg-level" :class="{ leveldisplay: level == 3 }">
              <p>{{ $t("registered.strong") }}</p>
            </div>
          </el-col>
        </el-row>
        <br>
        <el-form-item prop="confirmPwd" :label="$t('registered.confirmPwd')">
          <el-input
            ref="confirmPwd"
            v-model="registeredForm.confirmPwd"
            :placeholder="$t('registered.confirmPwdPlaceholder')"
            name="confirmPwd"
            type="password"
          />
        </el-form-item>
        <!-- 推荐码 -->
        <el-form-item
          prop="referralCode"
          :label="$t('registered.referralCode')"
        >
          <el-input
            ref="referralCode"
            v-model="registeredForm.referralCode"
            :placeholder="$t('registered.referralCodePlaceholder')"
          />
        </el-form-item>
        <div style="width: 100%; text-align: center">
          <el-button
            :loading="loading"
            type="primary"
            style="width: 70%"
            round
            @click.native.prevent="handleregistered"
          >{{ $t("registered.registered") }}</el-button>
        </div>
        <div style="width: 100%; text-align: center">
          <el-link
            href="/ucenter/#/login"
            style="color: #27417c; margin-top: 20px"
          >{{ $t("registered.login") }}</el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getCode, reg, getCountryList, getInfo } from '@/api/user'
import { setToken } from '@/utils/auth'
import { locale } from '@/api/country'
import { langData } from '@/data/lang'
export default {
  name: 'Registered',
  components: {},
  data() {
    return {
      countryList: [],
      registeredForm: {
        registerPlatform: 3,
        areaCode: '86'
      },
      registeredRules: {
        mobile: [
          {
            required: true,
            message: this.$t('login.mobileRules'),
            trigger: 'blur'
          },
          { max: 11, message: '电话长度在11个数字以内', trigger: 'blur' }
        ],
        englishName: [
          {
            required: true,
            message: this.$t('login.nameEnRules'),
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: this.$t('login.codeRules'),
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: this.$t('login.passwordRules'),
            trigger: 'blur'
          }
        ],
        confirmPwd: [
          {
            required: true,
            message: this.$t('login.confirmPwdRules'),
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      disabled: false,
      count: 60,
      getCode: '',
      level: 0,
      locale: [],
      apiLang: '',
      langData: langData
    }
  },
  computed: {
    language: {
      get() {
        return this.$store.getters.language
      },
      set(val) {
        this.handleSetLanguage(val)
      }
    }
  },
  watch: {
    language() {
      this.getCode = this.$t('login.getCode')
      this.apiLang = this.langData[this.language]
    },
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    this.apiLang = this.langData[this.language]
    this.getCode = this.$t('registered.getCode')
    getCountryList().then((r) => {
      this.countryList = r.data
    })
    locale().then((r) => {
      this.locale = r.data
    })
  },

  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      this.$store.dispatch('app/setLanguage', lang)
    },
    getValidaCode() {
      var data = {
        mobile: this.registeredForm.mobile,
        scene: 0,
        areaCode: this.registeredForm.areaCode
      }
      getCode(data).then(() => {
        var countDown = window.setInterval(() => {
          if (this.count < 1) {
            this.disabled = false
            this.count = 60
            this.getCode = this.$t('registered.getCode')
            window.clearInterval(countDown)
          } else {
            this.count--
            this.disabled = true
            this.getCode = this.count + 's'
          }
        }, 1000)
      })
    },
    pwdChange(val) {
      // 弱密码：全是数字或全是字母，6-16个字符
      const weakReg = /^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/
      // 中密码：数字和26个英文字母，6-16个字符
      const mediumReg = /^[A-Za-z0-9]{6,16}$/
      // 强密码：由数字、26个英文字母或者下划线组成的字符串，6-16个字符
      const strongReg = /^\w{6,16}$/
      var password = this.registeredForm.password
      if (password !== null) {
        if (password.length >= 6 && password.length <= 16) {
          if (password.match(weakReg)) {
            this.level = 1
          } else if (password.match(mediumReg)) {
            this.level = 2
          } else if (password.match(strongReg)) {
            this.level = 3
          }
        }
        if (password.length > 16) {
          this.level = 3
        }
      }
    },
    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
          })
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    handleregistered() {
      this.$refs.registeredForm.validate((valid) => {
        if (valid) {
          if (this.registeredForm.password !== this.registeredForm.confirmPwd) {
            this.$message.error('两次密码输入不一致')
            return
          }
          this.loading = true
          reg(this.registeredForm)
            .then((res) => {
              this.$message({
                message:
                  this.$t('registered.title') + this.$t('common.success'),
                type: 'success'
              })
              // this.$router.push({
              //   path: '/login'
              // })
              this.$store.commit('user/SET_TOKEN', res.data.token)
              setToken(res.data.token)
              this.getInfos()
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lang {
  width: 150px;
  ::v-deep .el-input__inner {
    border-radius: 34px;
  }
}
.registered-container {
  height: 100%;
  width: 55%;
  position: relative;
}
.password-level {
  font-size: 16px;
  text-align: center;
  .bg-level {
    background: #94999e;
  }
  .leveldisplay {
    background: #178dcd;
    color: #fff;
  }
}
</style>
