<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/close.png" style="width:30px;height:30px;">
          <span style="font-size: 24px;font-weight: bold;color: #000;line-height: 34px;margin-left: 10px;">{{ $t('registered.forget') }}</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"
        :model="registeredForm"
        :rules="registeredRules"
        style="margin-top: 80px;"
        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-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"
          />
        </el-form-item>
        <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>
        <div style="display: flex;justify-content: flex-end;margin-top: 20px;">
          <el-link
            style="color: #5BA8DC;"
            :underline="false"
            href="/ucenter/#/login"
          >{{ $t('registered.backLogin') }}</el-link>
        </div>
        <div style="width: 100%;text-align: center;margin-top: 50px;">
          <el-button
            :loading="loading"
            type="primary"
            round
            style="width:70%"
            @click.native.prevent="handleregistered"
          >{{ $t('registered.update') }}</el-button>
        </div>
        <div style="width: 100%;margin-top: 10px;display: flex;justify-content: space-around;">
          <div style="display: flex;">
            <img src="@/assets/login/help.png" style="width:24px;height:24px;">
            <span style="font-size: 14px;font-weight: 500;color: #666;line-height: 24px;margin-left: 5px;">{{ $t('registered.problem') }}</span>
            <span style="font-size: 14px;font-weight: 500;color: #E61B00;line-height: 24px;margin-left: 5px;">{{ $t('registered.contact') }}</span>
          </div>
        </div>
      <!-- <el-link href="/ucenter/#/login" style="margin-left:60px;">返回登录</el-link> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import { getCode, resetPwd, getCountryList } from '@/api/user'
import { locale } from '@/api/country'
import { langData } from '@/data/lang'
export default {
  name: 'Registered',
  components: {},
  data() {
    return {
      countryList: [],
      registeredForm: {
        areaCode: '86'
      },
      registeredRules: {
        mobile: [{ required: true, message: this.$t('login.mobileRules'), trigger: 'blur' }],
        nameEn: [{ 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: '',
      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]
    }
  },
  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: 3, 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)
      })
    },
    handleregistered() {
      this.$refs.registeredForm.validate(valid => {
        if (valid) {
          if (this.registeredForm.password !== this.registeredForm.confirmPwd) {
            this.$message.error('两次密码输入不一致')
            return
          }
          this.loading = true
          resetPwd(this.registeredForm)
            .then(() => {
              this.$router.push({
                path: '/login'
              })
              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;
}
</style>
