<template>
  <div
    id="login"
    class="container"
  >
    <theme-picker v-show="false" />
    <div class="login-weaper animate__animated animate__bounceInDown">
      <div class="login-left" :style="`background:${defaultTheme}`">
        <div class="login-time">
          {{ time }}
        </div>
        <!--<img
          class="img"
          src="/img/logo.png"
          alt=""
        >-->
        <svg-icon class="img" icon-class="logo" />
        <p class="title">{{ title }}</p>
      </div>
      <div class="login-border">
        <div class="login-main">
          <h4 class="login-title">
            {{ $t('ec.login.pwd.reset') }}
          </h4>
          <el-tabs v-model="activeName" stretch>
            <el-tab-pane :label="$t('ec.login.pwd.resetByPwd')" name="user">
              <account-pwd />
            </el-tab-pane>
            <el-tab-pane :label="$t('ec.login.pwd.resetByCode')" name="code">
              <code-pwd />
            </el-tab-pane>
          </el-tabs>
          <!--          <code-pwd v-if="activeName==='code' && curPhone" />-->
          <!--          <account-pwd v-else-if="activeName==='user'" />-->
          <!--          <div class="login-menu">-->
          <!--            <a-->
          <!--              v-if="curPhone"-->
          <!--              href="#"-->
          <!--              @click.stop="activeName='code'"-->
          <!--            >手机号短信</a>-->
          <!--            <a-->
          <!--              href="#"-->
          <!--              @click.stop="activeName='user'"-->
          <!--            >账号密码</a>-->
          <!--          </div>-->
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import AccountPwd from './accountpwd'
import CodePwd from './codepwd'
// import thirdLogin from './thirdlogin'
import { title } from '@/settings'
import ThemePicker from 'ecip-web/components/ThemePicker'

export default {
  name: 'ChangePwd',
  components: {
    AccountPwd,
    CodePwd,
    ThemePicker
    // codeLogin
  },
  props: [],
  data() {
    return {
      time: '',
      activeName: 'code',
      title: title
    }
  },
  computed: {
    defaultTheme() {
      return this.$store.state.settings.defaultTheme
    },
    curPhone() {
      return this.$store.state.user.userInfo && this.$store.state.user.userInfo.phone
    }
  },
  watch: {
    $route() {
      // const params = this.$route.query
      // this.socialForm.state = params.state
      // this.socialForm.code = params.code
      // if (!validatenull(this.socialForm.state)) {
      //   const loading = this.$loading({
      //     lock: true,
      //     text: `${
      //       this.socialForm.state === 'WX' ? '微信' : 'QQ'
      //     }登录中,请稍后。。。`,
      //     spinner: 'el-icon-loading'
      //   })
      //   setTimeout(() => {
      //     loading.close()
      //   }, 2000)
      // }
    }
  },
  created() {
    this.getTime()
    setInterval(() => {
      this.getTime()
    }, 1000)
  },
  mounted() {
    if (!this.curPhone) {
      this.activeName = 'user'
    }
  },
  methods: {
    getTime() {
      this.time = this.$moment().format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss">
@import "ecip-web/styles/login.scss";
</style>
