<template>
  <div class="login">
    <el-container>
      <div class="div_logo">
        <img src="@/assets/logo_s.svg" />
        <div class="title">巡检助手</div>
      </div>
      <div class="div_one">
        <LoginPanel
          ref="loginPanelRef"
          v-if="isEdit == 1"
          @forget-password="handleForgetPassword"
        />
        <ForgetView
          ref="forgetPasswordRef"
          v-if="isEdit == 2"
          @reset="handleForget"
        />
        <SelectCompany
          ref="selectCompanyRef"
          v-if="isEdit == 3"
          @goBack="handleSelectCompany"
        />
      </div>
    </el-container>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import Vcode from 'vue3-puzzle-vcode'
import { onUnmounted } from 'vue'
// import { loginByUsername, verifyCode, logout } from '@/api/login'
import LoginPanel from '@/components/login/loginPannel.vue'
import ForgetView from '@/components/login/ForgetView.vue'
import SelectCompany from '@/components/login/selectCompany.vue'
import { useUserStore } from '@/store/modules/user'
import { setToken, removeToken, getToken } from '@/utils/auth'
const userStore = useUserStore()
console.log(userStore.departmentList)
if (userStore.departmentList.length > 0) {
  isEdit.value = 3
}
onUnmounted(() => {
  if (intervalId.value) {
    clearInterval(intervalId.value)
  }
})
const intervalId = ref(null)
const isEdit = ref(1)
const loginPanelRef = ref(null)

const handleForgetPassword = e => {
  console.log(e)
  if (e == 1) {
    console.log('父组件接收到忘记密码事件')
    isEdit.value = 2
  } else if (e == 2) {
    isEdit.value = 3
    console.log('父组件登陆成功')
  }
}
const handleForget = e => {
  console.log('父组件接收到返回登录事件')

  isEdit.value = 1
}
//选择企业
const handleSelectCompany = () => {
  console.log('父组件接收到选择企业事件')
  isEdit.value = 1
  // isEdit.value = 3
}
// const activeName = ref('first')
// const type = ref('')
// const disabled = ref(true)
// const loginByPhoneForm = ref({
//   phoneNumber: '',
//   verifyCode: '',
// })
// const rules = {
//   phoneNumber: [
//     { required: true, message: '请输入手机号', trigger: 'blur' },
//     {
//       pattern: /^1[3-9]\d{9}$/,
//       message: '请输入正确的手机号',
//       trigger: 'blur',
//     },
//   ],
//   verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
// }
// const loginByUserForm = reactive({
//   username: '',
//   password: '',
// })
// const loginRules = {
//   username: [{ required: true, message: '登录账号不能为空', trigger: 'blur' }],
//   password: [{ required: true, message: '登录密码不能为空', trigger: 'blur' }],
// }

// const handleClick = () => {
//   console.log('点击了')
// }
// const checked = ref('true')
// //动态验证码图片
// const isShow = ref(false)

// const onShow = () => {
//   isShow.value = true
// }

// const onClose = () => {
//   isShow.value = false
// }

// const onSuccess = () => {
//   console.log(type.value)

//   console.log('验证成功')
//   onClose() // 验证成功，需要手动关闭模态框
//   if (type.value == 1) {
//     startCountdown()
//   } else {
//     console.log(loginByUserForm, '用户名登录')
//   }
// }
// //发送验证码
// const sendVerifyCode = () => {
//   console.log('发送验证码')
//   type.value = 1
//   onShow()
// }
// //验证码定时器
// const countdown = ref(60)
// const intervalId = ref(null)

// const startCountdown = () => {
//   // 开始倒计时
//   intervalId.value = setInterval(() => {
//     if (countdown.value > 0) {
//       countdown.value--
//     } else {
//       clearInterval(intervalId.value)
//       intervalId.value = null
//       countdown.value = 60
//     }
//   }, 1000)
// }
// //登录
// const formRef = ref(null)
// const loginByPhone = () => {
//   console.log('手机号登录')

//   formRef.value.validate(valid => {
//     if (valid) {
//       alert('表单验证成功！')
//     } else {
//       alert('表单验证失败！')
//       return false
//     }
//   })
// }
// const loginByUser = () => {
//   onShow()

//   formRef1.value.validate(valid => {
//     if (valid) {
//       alert('表单验证成功！')
//     } else {
//       alert('表单验证失败！')
//       return false
//     }
//   })
//   console.log('密码登录')

//   //调取登录接口
//   // loginByUsername(
//   //   loginByUserForm.username,
//   //   loginByUserForm.password,
//   // ).then(res => {
//   //   console.log(res)
//   // })
//   //忘记密码
//   const forgetPas = () => {
//     console.log('忘记密码')
//   }
// }
</script>
<style lang="scss" >
.div_logo {
  position: absolute;
  left: 48px;
  top: 48px;
  display: flex;
  .title {
    color: #1d2129;
    font-size: 22px;
    margin-left: 20px;
    font-weight: bold;
    line-height: 32px;
  }
}
.login {
  background: #fff;
  height: 100vh;
  width: 100vw;
  position: relative;
  background: url('/login_bg.png') no-repeat center center;
  background-size: cover;
  .div_one {
    width: 480px;
    height: 530px;
    background: #ffffff;
    box-shadow: 0px 0px 12px 0px rgba(66, 70, 78, 0.1);
    border-radius: 22px 22px 22px 22px;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    background-color: white;
    box-sizing: border-box;
    padding: 46px 50px;
    .title {
      font-size: 24px;
      margin-bottom: 30px;
      color: #030813;
      font-weight: bold;
    }
    .el-tabs__content {
      margin-top: 20px;
    }
  }
}

.el-tabs__nav-wrap:after {
  background-color: #fff !important;
}
.div_from_text {
  color: #409eff;
}
.el-button_one {
  width: 380px;
  margin-top: 20px;
  height: 40px;
  line-height: 40px;
  color: #ffffff;
  background-color: #8badff;
  border: none;
  margin-bottom: 10px;
}
.div_one_from_check {
  width: 380px;
  display: flex;
  color: #409eff;
  justify-content: space-between;
  align-items: center;
}
.el-tabs__item {
  font-size: 16px;
}
.el-input__wrapper {
  height: 40px;
}
.button-verify {
  background-color: transparent !important;
  border: none !important;
  position: absolute;
  right: 15px;
  color: #818389 !important;
}
</style>
