<template>
    <div>
      <!-- 背景云层 -->
      <div id="header">
        <div id="clouds">
          <div class="cloud-1" data-speed="35000"></div>
          <div class="cloud-2" data-speed="45000" data-delay="15000"></div>
          <div class="cloud-3" data-speed="40000"></div>
          <div class="cloud-4" data-speed="38000" data-delay="20000"></div>
        </div>
      </div><!-- / #header -->
  
      <div id="content">
        <div class="container">
          <!-- 登录模块 -->
          <form id="login-form" @submit.prevent="login">
            <div id="login_header"><i class="icon-home"></i>智能小区服务管理系统</div>
  
            <div id="login_content">
              <div class="form-group">
                <input v-model="username" type="text" maxlength="18" placeholder="用户名" @click="showTooltip('填写您的身份证号')" @blur="hideTooltip">
                <div class="tooltip" :style="{display: showUsernameTooltip ? 'block' : 'none'}">{{ usernameTooltip }}</div>
              </div>
  
              <div class="form-group">
                <input v-model="password" type="password" maxlength="16" placeholder="密码" @click="showTooltip('填写您的密码')" @blur="hideTooltip">
                <div class="tooltip" :style="{display: showPasswordTooltip ? 'block' : 'none'}">{{ passwordTooltip }}</div>
              </div>
  
              <div class="form-group">
                <div class="option" @click="toggleOptionList">
                  <div class="option_result">{{ userType }}</div>
                  <div class="option_arrow" :class="{ active: showOptionList }"><b class="arrow"></b></div>
                  <ul class="option_list" :style="{display: showOptionList ? 'block' : 'none'}">
                    <li @click="selectUserType('住户')">住户</li>
                    <li @click="selectUserType('管理员')">管理员</li>
                    <li @click="selectUserType('运营商')">运营商</li>
                  </ul>
                </div>
                <div class="tooltip" :style="{display: showTypeTooltip ? 'block' : 'none'}">{{ typeTooltip }}</div>
              </div>
            </div><!-- / #login_content -->
  
            <div id="login_footer">
              <button id="login_btn" type="submit">{{ loginButtonContent }}</button>
            </div><!-- / #login_footer -->
  
            <div><a @click.prevent="showRegisterForm">新用户注册</a></div>
          </form><!-- / #login-form -->
  
          <!-- 注册模块 -->
          <form id="register-form" @submit.prevent="register" style="display: none;">
            <div id="register_header"><i class="icon-home"></i>新用户注册</div>
  
            <div id="register_content">
              <div class="form-group">
                <input v-model="realname" type="text" maxlength="4" placeholder="真实姓名" @click="showTooltip('填写您的真实中文姓名')" @blur="hideTooltip">
                <div class="tooltip" :style="{display: showRealnameTooltip ? 'block' : 'none'}">{{ realnameTooltip }}</div>
              </div>
  
              <div class="form-group">
                <input v-model="id" type="text" maxlength="18" placeholder="身份证号" @click="showTooltip('填写您的真实身份证号码')" @blur="hideTooltip">
                <div class="tooltip" :style="{display: showIdTooltip ? 'block' : 'none'}">{{ idTooltip }}</div>
              </div>
  
              <div class="form-group">
                <input v-model="registerPassword" type="password" maxlength="16" placeholder="密码" @click="showTooltip('填写6~16个字母或者数字')" @blur="hideTooltip">
                <div class="tooltip" :style="{display: showRegisterPasswordTooltip ? 'block' : 'none'}">{{ registerPasswordTooltip }}</div>
              </div>
            </div><!-- / #register_content -->
  
            <div id="register_footer">
              <button id="register_btn" type="submit">{{ registerButtonContent }}</button>
            </div><!-- / #register_footer -->
  
            <div><a @click.prevent="showLoginForm">返回登录</a></div>
          </form><!-- / #register-form -->
        </div><!-- / .container -->
      </div><!-- / #content-->
  
      <div id="footer">
        <div class="container"></div><!-- / .container -->
      </div><!-- / #footer -->
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: '',
        password: '',
        userType: '用户类型',
        showOptionList: false,
        realname: '',
        id: '',
        registerPassword: '',
        showUsernameTooltip: false,
        showPasswordTooltip: false,
        showTypeTooltip: false,
        showRealnameTooltip: false,
        showIdTooltip: false,
        showRegisterPasswordTooltip: false,
        usernameTooltip: '',
        passwordTooltip: '',
        typeTooltip: '',
        realnameTooltip: '',
        idTooltip: '',
        registerPasswordTooltip: '',
        loginButtonContent: '登录',
        registerButtonContent: '注册',
      };
    },
    methods: {
      toggleOptionList() {
        this.showOptionList = !this.showOptionList;
        this.showTypeTooltip = false;
      },
      selectUserType(type) {
        this.userType = type;
        this.showOptionList = false;
      },
      showTooltip(text) {
        const label = event.target.placeholder;
        if (label === '用户名') {
          this.showUsernameTooltip = true;
          this.usernameTooltip = text;
        } else if (label === '密码') {
          this.showPasswordTooltip = true;
          this.passwordTooltip = text;
        } else if (label === '真实姓名') {
          this.showRealnameTooltip = true;
          this.realnameTooltip = text;
        } else if (label === '身份证号') {
          this.showIdTooltip = true;
          this.idTooltip = text;
        } else if (label === '密码') {
          this.showRegisterPasswordTooltip = true;
          this.registerPasswordTooltip = text;
        } else {
          this.showTypeTooltip = true;
          this.typeTooltip = text;
        }
      },
      hideTooltip() {
        const label = event.target.placeholder;
        if (label === '用户名') {
          this.showUsernameTooltip = false;
        } else if (label === '密码') {
          this.showPasswordTooltip = false;
        } else if (label === '真实姓名') {
          this.showRealnameTooltip = false;
        } else if (label === '身份证号') {
          this.showIdTooltip = false;
        } else if (label === '密码') {
          this.showRegisterPasswordTooltip = false;
        } else {
          this.showTypeTooltip = false;
        }
      },
      showRegisterForm() {
        this.$refs.loginForm.style.display = 'none';
        this.$refs.registerForm.style.display = 'block';
      },
      showLoginForm() {
        this.$refs.loginForm.style.display = 'block';
        this.$refs.registerForm.style.display = 'none';
      },
      login() {
        this.loginButtonContent = '登录中...';
        setTimeout(() => {
          this.loginButtonContent = '登录';
        }, 5000);
      },
      register() {
        this.registerButtonContent = '注册中...';
        setTimeout(() => {
          this.registerButtonContent = '注册';
        }, 5000);
      },
    },
  };
  </script>
  
  <style scoped>
  /* #Tooltip Styles
  ================================= */
  
  .tooltip {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-20%, -50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 4px;
  }
  
  /* #Option Styles
  ================================= */
  
  .option {
    position: relative;
  }
  
  .option_result {
    display: inline-block;
    padding: 10px;
    font-weight: bold;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .option_arrow {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 10px;
    width: 0;
    height: 0;
    border-top: 8px solid #eee;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    cursor: pointer;
  }
  
  .option_arrow.active {
    border-top: 8px solid #fff;
  }
  
  .option_list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px; padding: 10px; z-index: 100; cursor: pointer; } .option_list li:hover { background-color: #f5f5f5; }
  
  /* Other Styles ================================= */ .container { width: 960px; margin: 0 auto; }
  
  .form-group { position: relative; margin-bottom: 20px; }
  
  .form-group input { display: block; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-size: 14px; outline: none; }
  
  #login_btn, #register_btn { display: block; height: 40px; width: 120px; background-color: #333; color: #fff; border: none; -webkit-border-radius: 4px; border-radius: 4px; margin-top: 20px; cursor: pointer; }
  
  #login_btn:hover, #register_btn:hover { background-color: #222; }
  
  #login_footer .ing, #register_footer .ing { display: inline-block; margin-right: 10px; width: 20px; height: 20px; border: 2px solid #333; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; -webkit-border-radius: 50%; border-radius: 50%; }
  
  @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
  
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  
  #login_footer .ing.hide, #register_footer .ing.hide { display: none; }
  
  .arrow { position: absolute; width: 0; height: 0; border-top: 7px solid #666; border-left: 7px solid transparent; border-right: 7px solid transparent; top: 50%; margin-top: -4px; left: 50%; margin-left: -4px; }
  
  .active .arrow { border-top: 7px solid #fff; }
  
  </style>