<template>
  <div  v-if="show" style="z-index:1000; background: rgba(51,51,51,0.39);" class=" fixed top-0 left-0 right-0 bottom-0">
    <yq-modal v-if="show" :class="showOc?' opacity-100':' opacity-0'" class=" transition-opacity duration-600 fixed flex items-center justify-center top-0 left-0 right-0 bottom-0 z-[999] bg-modal-mock">
      <div class=" w-[6rem] px-[0.6rem] py-[0.4rem] bg-white rounded-[0.2rem]">
        <div class=" font-f-arial text-[0.24rem] leading-[0.24rem] font-bold text-333">Medical Media Channel</div>
<!--        <div class=" font-f-arial mt-[0.05rem] text-[0.16rem] leading-[0.16rem] text-666">(Integrity Group Limited)</div>-->

        <div class=" mt-[0.6rem] w-[4.8rem] h-[0.6rem] rounded-full border-[0.02rem] border-e6 px-[0.3rem]">
          <input v-model="loginName" class=" w-full text-[0.2rem] text-333 leading-[0.56rem] outline-none" placeholder="賬號/電子郵箱/手機號" type="text">
        </div>

        <div class=" mt-[0.26rem] w-[4.8rem] h-[0.6rem] rounded-full border-[0.02rem] border-e6 px-[0.3rem]">
          <input v-model="loginPass" class=" w-full text-[0.2rem] text-333 leading-[0.56rem] outline-none" placeholder="密碼" type="password">
        </div>

        <div @click="defaultLogin()" class=" mt-[0.26rem] flex items-center justify-center w-[4.8rem] h-[0.6rem] rounded-full bg-MMC-main-color" style="background-color: #1DBAFF">
          <div class=" text-[0.2rem] cursor-pointer text-white leading-[0.2rem]">登入</div>
        </div>


        <div @click="changeShow()" class=" mt-[0.26rem] flex items-center justify-center w-[4.8rem] h-[0.6rem] rounded-full border-[0.02rem] border-MMC-main-color" style="border:1px solid #1DBAFF;">
          <div class=" text-[0.2rem] cursor-pointer text-MMC-main-color leading-[0.2rem]">取消</div>
        </div>

        <div @click="goRegisterPage()" class=" mt-[0.26rem] flex items-center justify-center w-[4.8rem] h-[0.6rem] rounded-full border-[0.02rem] border-sky-500/50">
          <div class=" text-[0.2rem] cursor-pointer text-sky-500/50 leading-[0.2rem]">註冊</div>
        </div>
      </div>
    </yq-modal>
  </div>
</template>

<script>
module.exports = {
  props: {
    title: {
      type: String,
      default: 'Congratulations random Interner user!'
    },
    content: {
      type: String,
      default: 'You\'ve been selected for a chance to get one year of subscription to use Wikipedia for free!'
    }
  },
  data() {
    return {
      show: false,
      showOc: false,
      loginName: "",
      loginPass: ""
    }
  },
  methods: {
    changeShow() {
      if(this.show) {
        this.showOc = false
        setTimeout(() => {
          this.show = this.showOc
        }, 600);
      }else {
        this.show = true
        setTimeout(() => {
          this.showOc = this.show
        }, 0);
      }
    },
    defaultLogin() {
        if(!this.loginName || !this.loginPass) {
            antd.notification.open({
                message: '提示',
                description: '請檢查賬戶密碼是否正確'
            });
        }else {
            this.loginAPI({
                'user_login_name': this.loginName,
                'user_pass': this.loginPass
            })
        }
    },
    loginAPI($params) {
        let postForm = document.createElement("form");

        postForm.method = "post";
        postForm.action = "";
        postForm.style = "display:none";

        let a_param_key = [
            'user_login_name', 'user_pass'
        ];

        let actionInput = document.createElement("input");
        actionInput.setAttribute("name", 'action');
        actionInput.setAttribute("value", 'login');
        postForm.appendChild(actionInput);

        for (const key in a_param_key) {
            let value = a_param_key[key]
            let idInput = document.createElement("input");
            idInput.setAttribute("name", value);
            idInput.setAttribute("value", $params[value]);
            postForm.appendChild(idInput);
        }

        document.body.appendChild(postForm);
        postForm.submit();
    },

    goRegisterPage() {
        window.open('/register', '_self');
    },
  }
}
</script>