<template>
  <div class="login-container">
    <div
      class="header"
      id="canvasWrap"
    >
      <!-- <div class="title">
        <img
          src="~imgs/logo.png"
          class="logo"
        >
        <i></i>
        <span></span>
      </div> -->
      <div class="welcome">
        <div style="padding: 20px;">
          <h1>{{ pageTitle }}</h1>
          <h2>欢迎使用</h2>
        </div>

        <div class="related-blocks">
          相关平台登录：
          <a
            :href="`${item.url}?project=${project}`"
            v-for="(item,index) in blocks"
            :key="index">{{ item.name }}</a>
        </div>
      </div>
      <div class="login-box">
        <div class="form-wrap">
          <h3 :style="{transform:showSmsCode?'translateY(-40px)':'translateY(0px)'}">
            <span>用户登录</span>
          </h3>

          <a-form-model
            ref="formRef"
            :model="form"
            id="components-form-demo-normal-login"
            @submit="handleSubmit"
            class="login-form"
            :style="{transform:showSmsCode?'translateY(-40px)':'translateY(0px)'}"
          >
            <a-form-model-item>
              <a-input
                @blur="checkSmsNeed"
                placeholder="项目名"
                v-model="form.project_name"
                :rules="[{ required: true, message: '请输入项目名称' }]"
              >
                <a-icon
                  slot="prefix"
                  type="folder"
                  style="color: rgba(0,0,0,.25)"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input
                placeholder="用户名或手机号"
                v-model="form.username"
                :rules="[{ required: true, message: '请输入用户名或手机号' }]"
              >
                <a-icon
                  slot="prefix"
                  type="user"
                  style="color: rgba(0,0,0,.25)"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input
                v-model="form.password"
                :rules="[{ required: true, message: '请输入密码' }]"
                type="password"
                placeholder="密码"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color: rgba(0,0,0,.25)"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item
              class="smsInput"
              v-if="showSmsCode"
            >
              <a-input
                v-model="form.authcode"
                :rules="[{ required: true, message: '请输入短信验证码' }]"
                placeholder="短信验证码"
              >
                <a-icon
                  slot="prefix"
                  type="message"
                  style="color: rgba(0,0,0,.25)"
                />
              </a-input>
              <a-button
                type="primary"
                class="smsBtn"
                size="small"
                @click="sendAuthSms"
                :disabled="authSmsDisable"
              >
                {{ authSmsDisable?`${count}s后重试`:'获取短信验证码' }}
              </a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button
                type="primary"
                html-type="submit"
                class="login-form-button"
                style="width:100%"
                :loading="loading"
              >
                登录
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
        <!-- <div class="qr-wrap">
          <img src="~/imgs/qr.png">
          <div class="des">
            微信扫描<br>
            关注徽黄公众号
          </div>
        </div> -->
      </div>

      <canvas id="canvasEle"></canvas>
    </div>

  </div>
</template>

<script>
// import drawCanvas from './canvas'
import { authsmsneed, authsmssend } from '@/api/login'

export default {
  name: 'Login',
  data () {
    return {
      blocks: [
        {
          name: 'OTA分销系统',
          url: `https://pqncdn.cleartv.cn/ota/#/login`,
          cover: require('imgs/bg1.jpg')
        },
        {
          name: '线下票务系统',
          tag: '软件',
          des: '仅在本地电脑安装后，才可打开',
          url: 'clearticket://',
          cover: require('imgs/bg2.jpg')
        }
      ],
      form: {
        project_name: '',
        username: '',
        password: '',
        authcode: ''
      },
      loading: false,
      showSmsCode: false,
      authSmsDisable: false,
      count: 30,
      stopCanvasAnimate: false
    }
  },
  methods: {
    // 检查是否需要短信验证码
    checkSmsNeed (event) {
      const value = event.target.value.trim()
      if (!value) return
      authsmsneed({ project_name: value }).then(res => {
        this.showSmsCode = res.extraInfo === '1'
      }).catch(e => {
        this.showSmsCode = false
      })
    },
    // 发送验证码
    sendAuthSms (e) {
      const projectName = this.form.project_name.trim()
      const userName = this.form.username.trim()

      if (!projectName) {
        this.$message.error('请输入项目名称')
        return
      }
      if (!userName) {
        this.$message.error('请输入用户名或手机号')
        return
      }
      this.authSmsDisable = true

      authsmssend({ project_name: projectName, username: userName }).then(res => {
        this.$message.success('发送成功。')
        this.countDown()
      })
    },
    // 倒计时
    countDown () {
      this.count--
      if (this.count === 0) {
        this.count = 31
        this.authSmsDisable = false
        return
      }
      setTimeout(() => {
        this.countDown()
      }, 1000)
    },
    // 提交登录
    handleSubmit (e) {
      e.preventDefault()
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const values = this.form
          this.loading = true
          const params = {
            project_name: values.project_name.trim(),
            username: values.username.trim(),
            password: values.password.trim(),
            authcode: values.authcode && values.authcode.trim()
          }
          this.$store.dispatch('Login', params).then(() => {
            this.loading = false
            localStorage.mgt_project = params.project_name
            this.$router.push({ name: 'dashboard' })
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    handleLogin () {
      const params = {
        username: this.loginForm.username,
        password: this.loginForm.password
      }
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true

          this.$store.dispatch('Login', params).then(() => {
            this.loading = false
            this.$router.push({ name: 'dashboard' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  mounted () {
    // drawCanvas(this)

  },
  beforeDestroy () {
    this.stopCanvasAnimate = true
  }
}
</script>

<style lang="scss" scoped>
$mainColor: #0099a0;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  .header {
    position: relative;min-width: 1280px;height: 600px; min-height: 100vh; overflow: hidden;
    .title {
      position: absolute; top: 40px; left: 10%; z-index: 10; display: flex; font-size: 24px; line-height: 1;color: #fff; justify-content: center; align-items: center;
      i {
        width: 5px;height: 5px; margin: 0 10px; background: #fff;border-radius: 50%;
      }
      .logo {
        height: 29px;
      }
    }
    &:before {
      position: absolute; top: 0;left: 0;width: 100%;height: 100%;content: ''; background: url('~imgs/bg.jpg') no-repeat center center/cover; filter: blur(3px); transition: all 10s; transform: scale(1.1);
    }
    // &:after {
    //   position: absolute; top: 0;left: 0;width: 100%;height: 100%;content: ''; background: rgba(0,0,0,.4);
    // }
    #canvasEle {
      position: absolute; top: 0;left: 0;z-index: 10;
    }

    .welcome {
      position: absolute; top: 50%; left: 10%;  z-index: 20; width: 40%; margin-top: -70px;background: rgba(255, 255, 255, .2);opacity: .8;;
      h1,h2 {
        padding: 10px 0; margin: 0;  line-height: 1;  color: #fff; text-shadow: 2px 2px 0px #000;
      }
      h1 {
        border-bottom: 1px solid rgba(255, 255, 255, .3); font-size: 28px;
      }
      h2{
        font-size: 21px;
      }

      .related-blocks {
        color: #fff; background: rgba(0, 152, 160, 0.5); padding: 10px; font-size: 14px;
        a {
          color: #fff;
          &:hover {
            text-decoration: underline;
          }
        }
        a + a {
          margin-left: 20px;
        }
      }
    }
  }

  // .header:hover {
  //   &:before {
  //     transform: scale(1.3);
  //   }
  // }

  .login-box {
    position: absolute; top: 50%; right: 280px; z-index: 20; width: 320px; height: 360px; margin-top: -200px;
    h3 {
      color: $mainColor;  transition: all .5s;
    }
    .form-wrap {
      position: relative; z-index: 2;  height: 100%; box-sizing: border-box; padding: 30px; padding-top: 60px;background: #fff;border-radius: 8px; box-shadow: 0 3px 5px rgba(0,0,0,.4);
    }
    .ant-form {
      transition: all .3s;
    }
    .btn-wrap {
      padding-top: 20px;
    }

    .qr-wrap {
      position: absolute; top: 0; right: -170px; z-index: 1;  width: 150px; box-sizing: border-box; padding: 10px; background: #fff; border-radius: 5px; opacity: 0; transition: all .5s; transform: translateX(-50px);
      img {
        width: 100%;
      }
      .des {
        text-align: center;
      }
    }

    &:hover {
      .qr-wrap {
        opacity: 1;transform: translateX(0px);
      }
    }
  }

  .tips {
    margin-bottom: 10px;  font-size: 14px;  color: #fff;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .show-pwd {
    position: absolute;  top: 7px;  right: 10px;  font-size: 16px;  color: $dark_gray;  cursor: pointer;  user-select: none;
  }
  .smsInput {
    .smsBtn {
      position: absolute; top: -5px; right: 2px;
    }
  }
}

</style>
