<template>
  <div class="mx-[0.77rem]">

    <div class="w-full h-[0.28rem] mt-[0.77rem] flex">
      <div class="text-center text-[0.26rem] "
           v-bind:class="{ 'text-333 font-bold' : !isShowEmail , 'text-999 ' : isShowEmail }"
           @click="toChangeShow(false)">手機號登錄
      </div>
      <div class=" mx-[0.15rem] text-CCC">|</div>
      <div class="text-center text-[0.26rem] "
           v-bind:class="{ 'text-333 font-bold' : isShowEmail , 'text-999' : !isShowEmail }"
           @click="toChangeShow(true)">郵箱登錄
      </div>
    </div>
    <form class="mt-[0.51rem]" action="#" method="POST" v-show="!isShowEmail" v-on:submit.prevent>
      <input type="hidden" name="remember" value="true">
      <div class="">
        <div>
          <input id="phone" name="phone" v-model.trim="phone" type="text" required
                 class="relative block w-full rounded-t-md border-0 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 h-[0.51rem]"
                 placeholder="請輸入手機號"
                 style="background: rgba(255,255,255,0.39);border: 1px solid #CCCCCC;border-radius: 3px;">
        </div>

        <div>
          <input id="verification_code" name="verification_code" type="text" required
                 class="relative inline-block w-auto rounded-t-md border-0 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 h-[0.51rem] mt-[0.26rem]"
                 placeholder="請輸入短信驗證碼"
                 style="background: rgba(255,255,255,0.39);border: 1px solid #CCCCCC;border-radius: 3px;">
          <button type="submit"
                  class="h-[0.51rem] text-[0.23rem]  inline-block w-[1.54rem] justify-center bg-main-color text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                  style="background: rgba(234,105,8,0.39);opacity: 1;border-radius: 3px;">
            獲取驗證碼
          </button>
        </div>

      </div>

      <div class="flex items-center justify-between mt-[0.26rem] mb-[0.77rem]">
        <div class="flex items-center">
          <a href="#" class="font-medium text-333 hover:text-grey">使用密碼驗證登錄</a>
        </div>

        <div class="">
          <a href="#" class="font-medium text-333 hover:text-grey">遇到問題？</a>
        </div>
      </div>

      <div class=" mb-[0.2rem]">
        <button type="submit" @click="login_func(true)"
                class="h-[0.61rem] text-[0.23rem] leading-[0.6rem] group relative flex w-full justify-center bg-main-color font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          立即登錄
        </button>
      </div>

      <div class="flex items-center justify-center">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
                 class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
          <label for="remember-me" class="ml-[0.13rem] block text-666">同意</label>
        </div>

        <div class="">
          <a href="#" class="font-medium text-main-color hover:text-grey">《使用條款和隱私條例》</a>
        </div>
      </div>
    </form>

    <form class="mt-[0.51rem]" action="#" method="POST" v-show="isShowEmail" v-on:submit.prevent>
      <input type="hidden" name="remember" value="true">
      <div class="">
        <div>
          <input v-model.trim="email" name="email" type="text" required
                 class="relative block w-full rounded-t-md border-0 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 h-[0.51rem]"
                 placeholder="請輸入郵箱"
                 style="background: rgba(255,255,255,0.39);border: 1px solid #CCCCCC;border-radius: 3px;">
        </div>

        <div class="mt-[0.26rem]">
          <input id="password" name="password" v-model.trim='password' type="text" required
                 class="relative block w-full rounded-t-md border-0 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 h-[0.51rem]"
                 placeholder="請輸入密碼"
                 style="background: rgba(255,255,255,0.39);border: 1px solid #CCCCCC;border-radius: 3px;">
        </div>
      </div>

      <div class="flex items-center justify-between mt-[0.26rem] mb-[0.77rem]">
        <div class="flex items-center">
          <a href="#" class="font-medium text-333 hover:text-grey">使用密碼驗證登錄</a>
        </div>

        <div class="">
          <a href="#" class="font-medium text-333 hover:text-grey">遇到問題？</a>
        </div>
      </div>

      <div class=" mb-[0.2rem]">
        <button type="submit" @click="login_func(false)"
                class="h-[0.61rem] text-[0.23rem] leading-[0.6rem] group relative flex w-full justify-center bg-main-color font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          立即登錄
        </button>
      </div>

      <div class="flex items-center justify-center">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
                 class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
          <label for="remember-me" class="ml-[0.13rem] block text-666">同意</label>
        </div>

        <div class="">
          <a href="#" class="font-medium text-main-color hover:text-grey">《使用條款和隱私條例》</a>
        </div>
      </div>
    </form>
  </div>

</template>

<script>
// 文章评论页面
module.exports = {
  props: {
    list: {
      type: Array,
      default: []
    },

  },
  data: function () {
    return {
      isShowEmail: true,
      phone: '',
      email: '',
      verification_code: '',
      password: '',
      password2: '',
    }
  },
  methods: {
    toChangeShow(num) {
      this.isShowEmail = num;
      console.log('toChangeShow -> ' + this.isShowEmail);
    },
    // toDetail(cat) {
    //   console.log('toDetail -> '+ cat)
    //   if(cat == '影視專區'){
    //     window.open('/category/%e5%bd%b1%e8%a6%96%e5%b0%88%e5%8d%80/', '_blank');
    //     // http://dk.smart1space.site/category/%e5%bd%b1%e8%a6%96%e5%b0%88%e5%8d%80/
    //   }else {
    //     window.open('/food-search?cat=' + cat, '_blank');
    //   }
    // }

    async login_func(isPhone = true) {
      const hide = antd.message.loading('加載中...');

      if (isPhone) {
        console.log('isPhone -> ');
        console.log('register_func -> ' + this.phone);
        console.log('register_func -> ' + this.verification_code);
        console.log('register_func -> ' + this.password);
        console.log('register_func -> ' + this.password2);
      } else {
        console.log('isEmail -> ');
        console.log('register_func -> ' + this.email);
        console.log('register_func -> ' + this.verification_code);
        console.log('register_func -> ' + this.password);
        console.log('register_func -> ' + this.password2);
      }
      
      let res = await axios({
        method: 'post',
        url: '/api/',
        data: Qs.stringify({
          module: 'user',
          action: 'r_user_login',
          email: isPhone ? this.phone : this.email,
          pwd: this.password,
          // ...this.submit_info
        })
      });
      hide();
      if (res.status == 200) {
        let data = res.data;
        if (data.rc == 0) {
          antd.message.info('登陆成功');
          window.open('/' , '_self');
        } else {
          antd.message.error(data.msg);
        }
      } else {
        antd.message.error('登陆失敗');
      }

    },

  }
}
</script>

<style scoped>

</style>