<script lang="ts">
import Vue from 'vue'
import countryCode from '@/lib/countryCode.json'
import { sendSmsCode, sentEmailCode, register, confirmEmail } from '@/api/user'
import { getExpoInfo } from '@/api/expo'
export default Vue.extend({
  name: 'Index',
  data() {
    return {
      regWay: 0, // 0:手机注册 1:邮箱注册
      countryCode,
      loginInfo: {
        phone: '',
        countryCode: '86',
        password: '',
        password_2: '',
        smsCode: '',
        email: '',
        emailCode: '',
        pre_register_key: '',
        showPasswordDialog: false
      },
      emailCounter: 0,
      emailTimer: null,
      smsCounter: 0,
      smsTimer: null,
      expoData: {},
      expo_key: '',
      subTimer: '',
      subTime: '',
      isLogin: false
    }
  },
  computed: {
    user() { return this.$store.state.user.user }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    clearInterval(this.subTimer)
  },
  methods: {
    init() {
      if (this.$route.query.expo_key) {
        this.expo_key = this.$route.query.expo_key
        getExpoInfo(this.expo_key).then(res => {
          this.expoData = res.data
          this.subTimer = setInterval(() => {
            this.subTime = Date.parse(res.data.end_date) - Date.now()
          }, 1000)
        }).catch(err => {

        })
      } else {
        this.$router.push({
          name: 'login'
        })
      }
    },
    sentSms() {
      if (this.loginInfo.phone === '') {
        this.$message.error('请填写电话号码！')
        return
      }
      if (this.smsTimer) {
        return
      } else {
        sendSmsCode(this.loginInfo.phone, this.loginInfo.countryCode).then(res => {
          this.$message.success('发送成功！')
          this.smsCounter = 60
          this.smsTimer = setInterval(() => {
            this.smsCounter--
            if (this.smsCounter <= 0) {
              clearInterval(this.smsTimer)
              this.smsTimer = null
            }
          }, 1000)
        }).catch(err => {
        })
      }
    },
    sentEmail() {
      if (this.loginInfo.email === '') {
        this.$message.error('请填写邮箱！')
        return
      }
      if (this.emailTimer) {
        return
      } else {
        sentEmailCode(this.loginInfo.email).then(res => {
          this.$message.success('发送成功！')
          this.emailCounter = 60
          this.emailTimer = setInterval(() => {
            this.emailCounter--
            if (this.emailCounter <= 0) {
              clearInterval(this.emailTimer)
              this.emailTimer = null
            }
          }, 1000)
        }).catch(err => {
        })
      }
    },
    submitLogin() {
      let username = ''
      let password = ''
      if (this.regWay) {
        if (this.loginInfo.email === '' || this.loginInfo.password === '') {
          this.$message.error('请填写账号与密码！')
          return
        }
        username = this.loginInfo.email
        password = this.loginInfo.password
      } else {
        if (this.loginInfo.smsCode === '' || this.loginInfo.phone === '') {
          this.$message.error('请填写手机号码与验证码！')
          return
        }
        username = this.loginInfo.phone
        password = this.loginInfo.smsCode
      }
      this.$store.dispatch('login', {
        username: username,
        password: password,
        phone: username,
        vaild_code: password,
        login_type: this.regWay ? '0' : '1',
        login_portal: 0
      }).then(res => {
        console.log(res)
        this.gotoForm()
      }).catch(err => {

      })
    },
    gotoForm() {
      if (this.expo_key) {
        this.$router.push({
          name: 'userForm',
          params: {
            url: this.expo_key
          }
        })
      }
    },
    register() {
      if (this.regWay) {
        if (this.loginInfo.email === '' || this.loginInfo.emailCode === '') {
          this.$message.error('请填写邮箱与验证码！')
          return
        }
        register(this.loginInfo.email, '', this.loginInfo.emailCode, 1, '').then(res => {
          this.loginInfo.pre_register_key = res.data.pre_register_key
          this.loginInfo.showPasswordDialog = true
          console.log(res)
        }).catch(err => {

        })
      } else {
        if (this.loginInfo.phone === '' || this.loginInfo.smsCode === '') {
          this.$message.error('请填写手机号码与验证码！')
          return
        }
        register('', this.loginInfo.phone, this.loginInfo.smsCode, 0, this.loginInfo.countryCode).then(res => {
          this.isLogin = true
          this.$message.success('注册成功！请前往登录')
        }).catch(err => {

        })
      }
    },
    checkPassword() {
      if (this.loginInfo.password !== this.loginInfo.password_2) {
        this.$message.error('两次密码输入不一致！')
        return false
      }
      this.loginInfo.showPasswordDialog = false
      confirmEmail(this.loginInfo.pre_register_key, this.loginInfo.password, this.loginInfo.password_2).then(res => {
        this.isLogin = true
        this.$message.success('注册成功！请前往登录')
      }).catch(err => {

      })
    }
  }
})
</script>
<template>
  <div class="body">
    <div class="head">
      <div class="title">
        {{ isLogin?'登录账号':'注册账号' }}
      </div>
      <div class="desc">
        中国大陆观众建议使用手机号码进行注册登录。
      </div>
    </div>
    <div v-if="expo_key" class="time-counter">
      <div class="title">距离展览开幕时间</div>
      <div class="counter-list">
        <div class="counter-item">
          <div class="num">{{ new Date(subTime).getDate() || '0' }}</div>
          <div class="unit">天</div>
        </div>
        <div class="counter-item">
          <div class="num">{{ new Date(subTime).getHours() || '0' }}</div>
          <div class="unit">时</div>
        </div>
        <div class="counter-item">
          <div class="num">{{ new Date(subTime).getMinutes() || '0' }}</div>
          <div class="unit">分</div>
        </div>
        <div class="counter-item">
          <div class="num">{{ new Date(subTime).getSeconds() || '0' }}</div>
          <div class="unit">秒</div>
        </div>
      </div>
    </div>
    <div v-if="isLogin" class="register-body">
      <div class="tab">
        <div class="tab-item" :class="regWay?'':'active'" @click="regWay=0">验证码登录</div>
        <div class="tab-item" :class="regWay?'active':''" @click="regWay=1">账号密码登录</div>
      </div>
      <template v-if="regWay">
        <div class="form-item">
          <div class="label">账号</div>
          <el-input v-model="loginInfo.email" placeholder="请输入账号" />
        </div>
        <div class="form-item">
          <div class="label">密码</div>
          <div class="sms-cont">
            <el-input v-model="loginInfo.password" show-password placeholder="请输入密码" />
          </div>
        </div>
      </template>
      <template v-else>
        <div class="form-item">
          <div class="label">
            国家/地区
          </div>
          <el-select v-model="loginInfo.countryCode" placeholder="请选择国家/地区">
            <el-option v-for="(item,index) in countryCode" :key="item.country_code+index" :label="'+'+item.phone_code+'('+item.chinese_name+')'" :value="item.phone_code" />
          </el-select>
        </div>
        <div class="form-item">
          <div class="label">手机号码</div>
          <el-input v-model="loginInfo.phone" placeholder="请输入手机号码" />
        </div>
        <div class="form-item">
          <div class="label">验证码</div>
          <div class="sms-cont">
            <el-input v-model="loginInfo.smsCode" placeholder="请输入验证码" />
            <el-button :disabled="!!smsTimer" type="primary" @click="sentSms()">{{ smsTimer?smsCounter+'秒后重新获取':'获取验证码' }}</el-button>
          </div>
        </div>
      </template>
      <div class="piracy">
        登录即表示同意
        <span>《隐私政策》</span>
        、
        <span>《用户协议》</span>
      </div>
      <el-button type="primary" @click="submitLogin()">登录</el-button>
      <el-button type="text" @click="isLogin=false">没有账号？去注册。</el-button>
    </div>
    <div v-else class="register-body">
      <div class="tab">
        <div class="tab-item" :class="regWay?'':'active'" @click="regWay=0">手机注册</div>
        <div class="tab-item" :class="regWay?'active':''" @click="regWay=1">邮箱注册</div>
      </div>
      <template v-if="regWay">
        <div class="form-item">
          <div class="label">账号</div>
          <el-input v-model="loginInfo.email" placeholder="请输入电子邮箱地址" />
        </div>
        <div class="form-item">
          <div class="label">密码</div>
          <div class="sms-cont">
            <el-input v-model="loginInfo.emailCode" placeholder="请输入验证码" />
            <el-button :disabled="emailTimer" type="primary" @click="sentEmail()">{{ emailTimer?emailCounter+'秒后重新获取':'获取验证码' }}</el-button>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="form-item">
          <div class="label">
            国家/地区
          </div>
          <el-select v-model="loginInfo.countryCode" placeholder="请选择国家/地区">
            <el-option v-for="(item,index) in countryCode" :key="item.country_code+index" :label="'+'+item.phone_code+'('+item.chinese_name+')'" :value="item.phone_code" />
          </el-select>
        </div>
        <div class="form-item">
          <div class="label">手机号码</div>
          <el-input v-model="loginInfo.phone" placeholder="请输入手机号码" />
        </div>
        <div class="form-item">
          <div class="label">验证码</div>
          <div class="sms-cont">
            <el-input v-model="loginInfo.smsCode" placeholder="请输入验证码" />
            <el-button :disabled="!!smsTimer" type="primary" @click="sentSms()">{{ smsTimer?smsCounter+'秒后重新获取':'获取验证码' }}</el-button>
          </div>
        </div>
      </template>
      <div class="piracy">
        注册即表示同意
        <span>《隐私政策》</span>
        、
        <span>《用户协议》</span>
      </div>
      <el-button type="primary" @click="register()">注册</el-button>
      <el-button type="text" @click="isLogin=true">已有账号？去登陆。</el-button>
    </div>
    <el-dialog
      title="设置初始密码"
      custom-class="password-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="loginInfo.showPasswordDialog"
      width="30%"
    >
      <div class="dialog-body">
        <div class="label">请设置密码</div>
        <el-input v-model="loginInfo.password" placeholder="请设置密码" show-password />
        <div class="label">请再次输入密码</div>
        <el-input v-model="loginInfo.password_2" placeholder="请再次输入密码" show-password />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="checkPassword()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.body{
  margin: 36px auto;
  max-width: 800px;
  width: 100%;
  .register-body{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    padding: 40px 50px;
    border-radius: 4px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    background: white;
    .piracy{
      color: #6B7280;
      display: flex;
      font-size: 16px;
      span{
        color: #0052CC;
      }
    }
    .form-item{
      .label{
        color: #374151;
        font-size: 16px;
        margin-bottom: 8px;
      }
      .el-select{
        width: 100%;
      }
      .sms-cont{
        display: flex;
        gap: 12px;
      }
    }
    .tab{
      display: flex;
      border-bottom: 3px solid #E5E7EB;
      .tab-item{
        cursor: pointer;
        padding: 8px 16px;
        color: #6B7280;
        transform: translateY(3px);
        border-bottom: 3px solid transparent;
        &.active{
          color: #0052CC;
          border-bottom: 3px solid #0052CC;
        }
      }
    }
  }
  .time-counter{
    margin-top: 32px;
    background: #4DA9FF22;
    padding: 24px;
    border-radius: 8px;
    .counter-list{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      .counter-item{
        background: white;
        padding: 16px 0;
        border-radius: 4px;
        text-align: center;
        .num{
          color: #4D7CFF;
          font-size: 30px;
          font-weight: bold;
        }
        .unit{
          font-size: 14px;
          color: #6B7280;
        }
      }
    }
    .title{
      font-size: 18px;
      margin-bottom: 12px;
    }
  }
  .head{
    .title{
      text-align: center;
      font-size: 24px;
      font-weight: bold;
    }
    .desc{
      margin-top: 8px;
      text-align: center;
      color: #4B5563;
    }
  }
}
</style>
<style>
body{
  background: #F9FAFB;
  .password-dialog{
    .dialog-body{
      .label{
        margin: 6px 0;
      }
    }
  }
}
</style>
