<template>
  <div>
  <div class="relative min-h-screen flex">
    <div class="
                    flex flex-col
                    sm:flex-row
                    items-center
                    md:items-start
                    sm:justify-center
                    md:justify-start
                    flex-auto
                    min-w-0
                    bg-white
                ">
      <div class="
                        sm:w-1/2
                        xl:w-3/5
                        h-full
                        hidden
                        md:flex
                        flex-auto
                        items-center
                        justify-center
                        p-10
                        overflow-hidden
                        bg-purple-900
                        text-white
                        bg-no-repeat bg-cover
                        relative
                    " style="background-image: url(img/img.jpg)">
        <div class="
                            absolute
                            bg-gradient-to-b
                            from-indigo-600
                            to-blue-500
                            opacity-75
                            inset-0
                            z-0
                        "></div>
        <div class="w-full max-w-md z-10">
          <div class="sm:text-4xl xl:text-4xl font-bold leading-tight mb-6">{{title}}</div>
          <div class="sm:text-sm xl:text-md text-gray-200 font-normal"></div>
        </div>
        <ul class="circles">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="
                        md:flex md:items-center md:justify-center
                        w-full
                        sm:w-auto
                        md:h-full
                        w-2/5
                        xl:w-2/5
                        p-8
                        md:p-10
                        lg:p-14
                        sm:rounded-lg
                        md:rounded-none
                        bg-white
                    ">
        <div class="max-w-md w-full mx-auto space-y-8">
          <div class="text-center">
            <h2 class="mt-6 text-3xl font-bold text-gray-900">欢迎回来</h2>
            <!--                            <p class="mt-2 text-sm text-gray-500">第三方登录</p>-->
          </div>
          <!--                        <div class="flex flex-row justify-center items-center space-x-3">-->
          <!--                            <a href="javascript:" class="-->
          <!--                                    w-11-->
          <!--                                    h-11-->
          <!--                                    items-center-->
          <!--                                    justify-center-->
          <!--                                    inline-flex-->
          <!--                                    rounded-2xl-->
          <!--                                    font-bold-->
          <!--                                    text-lg-->
          <!--                                    bg-blue-900-->
          <!--                                    hover:shadow-lg-->
          <!--                                    cursor-pointer-->
          <!--                                    transition-->
          <!--                                    ease-in-->
          <!--                                    duration-300-->
          <!--                                "><img class="w-4 h-4" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Im0xNS45OTcgMy45ODVoMi4xOTF2LTMuODE2Yy0uMzc4LS4wNTItMS42NzgtLjE2OS0zLjE5Mi0uMTY5LTMuMTU5IDAtNS4zMjMgMS45ODctNS4zMjMgNS42Mzl2My4zNjFoLTMuNDg2djQuMjY2aDMuNDg2djEwLjczNGg0LjI3NHYtMTAuNzMzaDMuMzQ1bC41MzEtNC4yNjZoLTMuODc3di0yLjkzOWMuMDAxLTEuMjMzLjMzMy0yLjA3NyAyLjA1MS0yLjA3N3oiIGZpbGw9IiNmZmZmZmYiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiPjwvcGF0aD48L2c+PC9zdmc+"></a>-->
          <!--                            <a href="javascript:" class="-->
          <!--                                    w-11-->
          <!--                                    h-11-->
          <!--                                    items-center-->
          <!--                                    justify-center-->
          <!--                                    inline-flex-->
          <!--                                    rounded-2xl-->
          <!--                                    font-bold-->
          <!--                                    text-lg text-white-->
          <!--                                    bg-blue-400-->
          <!--                                    hover:shadow-lg-->
          <!--                                    cursor-pointer-->
          <!--                                    transition-->
          <!--                                    ease-in-->
          <!--                                    duration-300-->
          <!--                                "><img class="w-4 h-4" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDY4MS4zMzQ2NCA2ODEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0ibTIwMC45NjQ4NDQgNTE1LjI5Mjk2OWMyNDEuMDUwNzgxIDAgMzcyLjg3MTA5NC0xOTkuNzAzMTI1IDM3Mi44NzEwOTQtMzcyLjg3MTA5NCAwLTUuNjcxODc1LS4xMTcxODgtMTEuMzIwMzEzLS4zNzEwOTQtMTYuOTM3NSAyNS41ODU5MzctMTguNSA0Ny44MjQyMTgtNDEuNTg1OTM3IDY1LjM3MTA5NC02Ny44NjMyODEtMjMuNDgwNDY5IDEwLjQ0MTQwNi00OC43NTM5MDcgMTcuNDYwOTM3LTc1LjI1NzgxMyAyMC42MzY3MTggMjcuMDU0Njg3LTE2LjIzMDQ2OCA0Ny44MjgxMjUtNDEuODk0NTMxIDU3LjYyNS03Mi40ODgyODEtMjUuMzIwMzEzIDE1LjAxMTcxOS01My4zNjMyODEgMjUuOTE3OTY5LTgzLjIxNDg0NCAzMS44MDg1OTQtMjMuOTE0MDYyLTI1LjQ3MjY1Ni01Ny45NjQ4NDMtNDEuNDAyMzQ0LTk1LjY2NDA2Mi00MS40MDIzNDQtNzIuMzY3MTg4IDAtMTMxLjA1ODU5NCA1OC42ODc1LTEzMS4wNTg1OTQgMTMxLjAzMTI1IDAgMTAuMjg5MDYzIDEuMTUyMzQ0IDIwLjI4OTA2MyAzLjM5ODQzNyAyOS44ODI4MTMtMTA4LjkxNzk2OC01LjQ4MDQ2OS0yMDUuNTAzOTA2LTU3LjYyNS0yNzAuMTMyODEyLTEzNi45MjE4NzUtMTEuMjUgMTkuMzYzMjgxLTE3Ljc0MjE4OCA0MS44NjMyODEtMTcuNzQyMTg4IDY1Ljg3MTA5MyAwIDQ1LjQ2MDkzOCAyMy4xMzY3MTkgODUuNjA1NDY5IDU4LjMxNjQwNyAxMDkuMDgyMDMyLTIxLjUtLjY2MDE1Ni00MS42OTUzMTMtNi41NjI1LTU5LjM1MTU2My0xNi4zODY3MTktLjAxOTUzMS41NTA3ODEtLjAxOTUzMSAxLjA4NTkzNy0uMDE5NTMxIDEuNjcxODc1IDAgNjMuNDY4NzUgNDUuMTcxODc1IDExNi40NjA5MzggMTA1LjE0NDUzMSAxMjguNDY4NzUtMTEuMDE1NjI1IDIuOTk2MDk0LTIyLjYwNTQ2OCA0LjYwOTM3NS0zNC41NTg1OTQgNC42MDkzNzUtOC40Mjk2ODcgMC0xNi42NDg0MzctLjgyODEyNS0yNC42MzI4MTItMi4zNjMyODEgMTYuNjgzNTk0IDUyLjA3MDMxMiA2NS4wNjY0MDYgODkuOTYwOTM3IDEyMi40MjU3ODEgOTEuMDIzNDM3LTQ0Ljg1NTQ2OSAzNS4xNTYyNS0xMDEuMzU5Mzc1IDU2LjA5NzY1Ny0xNjIuNzY5NTMxIDU2LjA5NzY1Ny0xMC41NjI1IDAtMjEuMDAzOTA2LS42MDU0NjktMzEuMjYxNzE4OC0xLjgxNjQwNyA1Ny45OTk5OTk4IDM3LjE3NTc4MSAxMjYuODcxMDkzOCA1OC44NzEwOTQgMjAwLjg4NjcxODggNTguODcxMDk0IiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIj48L3BhdGg+PC9nPjwvc3ZnPg=="></a>-->
          <!--                            <a href="javascript:" class="-->
          <!--                                    w-11-->
          <!--                                    h-11-->
          <!--                                    items-center-->
          <!--                                    justify-center-->
          <!--                                    inline-flex-->
          <!--                                    rounded-2xl-->
          <!--                                    font-bold-->
          <!--                                    text-lg text-white-->
          <!--                                    bg-blue-500-->
          <!--                                    hover:shadow-lg-->
          <!--                                    cursor-pointer-->
          <!--                                    transition-->
          <!--                                    ease-in-->
          <!--                                    duration-300-->
          <!--                                "><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Im0yMy45OTQgMjR2LS4wMDFoLjAwNnYtOC44MDJjMC00LjMwNi0uOTI3LTcuNjIzLTUuOTYxLTcuNjIzLTIuNDIgMC00LjA0NCAxLjMyOC00LjcwNyAyLjU4N2gtLjA3di0yLjE4NWgtNC43NzN2MTYuMDIzaDQuOTd2LTcuOTM0YzAtMi4wODkuMzk2LTQuMTA5IDIuOTgzLTQuMTA5IDIuNTQ5IDAgMi41ODcgMi4zODQgMi41ODcgNC4yNDN2Ny44MDF6IiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIj48L3BhdGg+PHBhdGggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkPSJtLjM5NiA3Ljk3N2g0Ljk3NnYxNi4wMjNoLTQuOTc2eiIgZmlsbD0iI2ZmZmZmZiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgc3R5bGU9IiI+PC9wYXRoPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0ibTIuODgyIDBjLTEuNTkxIDAtMi44ODIgMS4yOTEtMi44ODIgMi44ODJzMS4yOTEgMi45MDkgMi44ODIgMi45MDkgMi44ODItMS4zMTggMi44ODItMi45MDljLS4wMDEtMS41OTEtMS4yOTItMi44ODItMi44ODItMi44ODJ6IiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIj48L3BhdGg+PC9nPjwvc3ZnPg==" class="w-4 h-4"></a>-->
          <!--                        </div>-->
          <!--                        <div class="flex items-center justify-center space-x-2">-->
          <!--                            <span class="h-px w-16 bg-gray-200"></span>-->
          <!--                            <span class="text-gray-300 font-normal">使用账号密码登录</span>-->
          <!--                            <span class="h-px w-16 bg-gray-200"></span>-->
          <!--                        </div>-->
          <div class="mt-8 space-y-6" >
            <input type="hidden" name="remember" value="true">
            <div class="relative">
              <label class="ml-3 text-sm font-bold text-gray-700 tracking-wide">门店账号</label>
              <input
                v-model="loginForm.username"
                class="
                                        w-full
                                        text-base
                                        px-4
                                        py-2
                                        border-b border-gray-300
                                        focus:outline-none
                                        rounded-2xl
                                        focus:border-indigo-500
                                    " type="" placeholder="请输入账号">
            </div>
            <div class="mt-8 content-center">
              <label class="ml-3 text-sm font-bold text-gray-700 tracking-wide">密码</label>
              <input
                v-model="loginForm.password"
                class="
                                        w-full
                                        content-center
                                        text-base
                                        px-4
                                        py-2
                                        border-b
                                        rounded-2xl
                                        border-gray-300
                                        focus:outline-none focus:border-indigo-500
                                    " type="password" placeholder="请输入密码">
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <input id="remember_me" name="remember_me" type="checkbox" class="
                                            h-4
                                            w-4
                                            bg-blue-500
                                            focus:ring-blue-400
                                            border-gray-300
                                            rounded
                                        ">
                <label for="remember_me" class="ml-2 block text-sm text-gray-900">记住我</label>
              </div>



              <!--                                <div class="text-sm">-->
              <!--                                    <a href="https://v.bootstrapmb.com/2021/8/admh611027/#" class="text-indigo-400 hover:text-blue-500">忘记密码？</a>-->
              <!--                                </div>-->
            </div>
            <div>
              <button
                @click="handleLogin"
                type="button" class="
                                        w-full
                                        flex
                                        justify-center
                                        bg-gradient-to-r
                                        from-indigo-500
                                        to-blue-600
                                        hover:bg-gradient-to-l
                                        hover:from-blue-500
                                        hover:to-indigo-600
                                        text-gray-100
                                        p-4
                                        rounded-full
                                        tracking-wide
                                        font-semibold
                                        shadow-lg
                                        cursor-pointer
                                        transition
                                        ease-in
                                        duration-500
                                    ">登 录</button>
            </div>

            <div style="font-weight: 500;font-size: 13px;letter-spacing: 1px;">
              <span>账号：用户名:demo   密码：111111</span><br/><br/>
<!--              <span>管理端账号：用户名:admin  密码：111111</span><br/><br/>-->
<!--              <span>商业合作：qq: 7827869402   vx: MAMBA_4EVER24</span><br/><br/>-->
<!--              <span> <a target="_blank" style="text-decoration: underline;" href="http://8.146.211.120:8086/"> 完整版演示 http://8.146.211.120:8086/</a></span><br/><br/>-->
              <span> <a target="_blank" style="text-decoration: underline;" href="http://8.146.211.120:8081/"> 移动端登陆 http://8.146.211.120:8081/</a></span>

            </div>
            <!--                            <p class="-->
            <!--                                    items-center-->
            <!--                                    justify-center-->
            <!--                                    mt-10-->
            <!--                                    text-center text-md text-gray-500-->
            <!--                                ">-->
            <!--                                <span>还没有账号？</span>-->
            <!--                                <a href="http://www.bootstrapmb.com/" target="_blank" class="-->
            <!--                                        text-indigo-400-->
            <!--                                        hover:text-blue-500-->
            <!--                                        no-underline-->
            <!--                                        hover:underline-->
            <!--                                        cursor-pointer-->
            <!--                                        transition-->
            <!--                                        ease-in-->
            <!--                                        duration-300-->
            <!--                                    ">立即注册</a>-->
            <!--                            </p>-->
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import {error, isEmpty, isNotEmpty} from "@/utils/index"

let timer;
export default {
  name: 'Login',
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    return {
      loginLogo: '',
      loginForm: {
        username: 'demo',
        password: '111111'
      },
      input4:'',
      loginRules: {
        username: [{ required: true, trigger: 'blur' , message: '请输入必填项'}],
        password: [{ required: true, trigger: 'blur', validator: validatePassword, message: '请输入必填项' }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      logoShow:false,
      title:''
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted() {
    this.loginLogo = require('@/assets/' + process.env.VUE_APP_SYSTEM_LOGO)
    this.title = process.env.VUE_APP_SYSTEM_NAME
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      console.log('提交')
      if(isNotEmpty(this.loginForm.username)&&isNotEmpty(this.loginForm.password)){

        // this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {

            // this.logoShow = true
            // timer = setTimeout(()=>{
              this.$router.push({ path: this.redirect || '/' })
              // this.loading = false
            //   clearTimeout(timer);
            //   timer = setTimeout(()=>{
            //     this.logoShow = false
            //     clearTimeout(timer);
            //   },500)
            // },3000)


          }).catch(() => {
            this.loading = false
          })
    } else {
        error('请完善登陆信息！')
        return false
      }
  }
  }
}
</script>

<style scoped src="@/styles/login/tailwind.min.css"/>
<style scoped src="@/styles/login/style.css"/>



