<template>
  <div class="mx-[0.77rem]">
<!--    <div class="w-full h-[0.28rem] mt-[0.40rem] flex">-->
    <div class="w-full h-[0.28rem] mt-[0.40rem] py-[0.4rem]">

      <!--      <div class="text-center text-[0.26rem] " v-bind:class="{ 'text-333 font-bold' : !isShowEmail , 'text-999 ' : isShowEmail }">-->
      <!--        <button @click="toChangeShow(false)">手機號註冊</button>-->
      <!--      </div>-->
      <!--      <div class=" mx-[0.15rem] text-CCC">|</div>-->
      <!--      text-999-->
      <div class="text-center text-[0.26rem] "
           v-bind:class="{ 'text-333 font-bold' : isShowEmail , 'text-999' : !isShowEmail }">
        <button @click="toChangeShow(true)">郵箱註冊</button>
      </div>
    </div>

    <form v-show="!isShowEmail" class="mt-[0.31rem]" action="#" method="POST" v-on:submit.prevent>
      <!--      <p>这个按钮被点击了 {{ isShowEmail }} 次。</p>-->
      <input type="hidden" name="remember" value="true">
      <div class="">
        <div>
          <input id="phone" name="phone" type="text" v-model.trim="phone" 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" v-model.trim='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 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 class="mt-[0.26rem]">
          <input id="password2" name="password2" v-model.trim='password2' 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=" mt-[0.51rem] mb-[0.2rem]">
        <button type="submit" @click.self="register_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>

    </form>

    <form v-show="isShowEmail" class="mt-[0.31rem]" action="#" method="POST" v-on:submit.prevent>
      <input type="hidden" name="remember" value="true">
      <div class="">
        <div>
          <input id="email" name="email" type="text" v-model.trim='email' 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" v-model.trim='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 class="mt-[0.26rem]">
          <input id="password" name="password" type="text" v-model.trim='password' 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="password2" name="password2" type="text" v-model.trim='password2' 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=" mt-[0.51rem] mb-[0.2rem]">
        <button type="submit" @click.self="register_func(false)"
                class="h-[0.61rem] text-[0.23rem] leading-[0.6rem] group relative flex w-full justify-center 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"
                style="background-color: #1DBAFF"
        >
          立即註冊
        </button>
      </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 register_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);
      }

      if (this.password !== this.password2) {
        antd.message.error('兩次輸入的密碼不一致');
        return false;
      } else {
        let res = await axios({
          method: 'post',
          url: '/api/',
          data: Qs.stringify({
            module: 'user',
            action: 'u_user_register',
            type: isPhone ? 1 : 2,
            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('賬號註冊成功');
          } else {
            antd.message.error(data.msg);
          }
        } else {
          antd.message.error('賬號註冊失敗');
        }
      }
    },
  }
}
</script>

<style scoped>

</style>