
<template>
  <aside
    class="aui-sidebar"
    :style="{ display: $store.state.isFull ? 'none' : '' }"
  >
    <div class="logo">
      <img src="@/assets/images/agent/logo.png">
    </div>
    <div class="create_dialog">
      + 创建新对话
    </div>
    <div class="aui-sidebar__inner" style="margin-top: 26px;">
      <el-menu
        :collapse="$store.state.sidebarFold"
        :unique-opened="true"
        :default-active="activeMenuId"
        :collapseTransition="false"
        class="aui-sidebar__menu"
      >
        <sub-menu
          v-for="(menu, index) in testMenus"
          :key="menu.id"
          :menu="menu"
          :index="index"
        />
      </el-menu>
    </div>
    <div class="user_info">
      <div class="left" @click="handleUser">
        <img src="@/assets/images/agent/avatar.png">
        <div class="name">
          <span>{{ userName }}</span>
          <!-- <span class="type">{{ userType }}</span> -->
        </div>
      </div>
      <div class="right" @click="handleSet">
        <img src="@/assets/images/agent/setting.png">
      </div>
    </div>
    <div class="loginBox" v-if="login">
      <div class="box">
        <div class="left">
          <img src="@/assets/images/agent/login_leftbg.png">
        </div>
        <div class="right">
          <img class="close" src="@/assets/images/agent/close_mini.png" @click="handleClose">
          <div class="tabs">
            <div class="t_pre" :class="{'active':tidx===1}" @click="handleChangeLogin(1)">验证码登录</div>
            <div class="t_pre" :class="{'active':tidx===2}" @click="handleChangeLogin(2)">账号登录</div>
          </div>
          <div class="content" v-if="tidx===1">
            <div class="c_pre">
              <el-input type="phone" v-model="codeInfo.phone" placeholder="请输入手机号码"></el-input>
            </div>
            <div class="c_pre">
              <div class="left">
                <el-input v-model="codeInfo.code" placeholder="请输入验证码"></el-input>
              </div>
              <div class="cp_right" @click="handleCode">
                <span>{{ codeBtnText }}</span>
              </div>
            </div>
          </div>
          <div class="content" v-else-if="tidx===2">
            <div class="c_pre">
              <el-input v-model="accountInfo.account" placeholder="请输入账号"></el-input>
            </div>
            <div class="c_pre">
              <el-input type="password" v-model="accountInfo.password" placeholder="请输入密码"></el-input>
            </div>
          </div>
          <div class="login" :class="{'active':((tidx===1&&codeInfo.phone&&codeInfo.code)||(tidx===2&&accountInfo.account&&accountInfo.password))}" @click="handleLogin">登录</div>
          <div class="agree">
            <el-checkbox v-model="agree">我已阅读并同意 用户服务协议、隐私协议 和 开源协议</el-checkbox>
          </div>
        </div>
      </div>
    </div>
  </aside>
</template>

<script>
var timer = null;
import Cookies from "js-cookie";
import SubMenu from './main-sidebar-sub-menu'
import { getUUID } from "@/utils";
export default {
  data () {
    return {
      activeMenuId:'',
      erjiMenu:[],
      userName:'未登录',
      userType:'专业教练',
      userInfo:null,
      login:false,
      tidx:1,
      codeInfo:{
        phone:'',
        code:''
      },
      accountInfo:{
        account:'',
        password:''
      },
      time:60,
      codeBtn:true,
      codeBtnText:'获取验证码',
      agree:false,
      testMenus:[],
      dataForm: {
        username: "admin",
        password: "cx8082",
        uuid: "",
        captcha: "",
      },
    }
  },
  components: {
    SubMenu
  },
  computed:{
    erjiMenudata(){
      return this.$store.state.erjismenu;
    }
  },
  watch:{
    "$store.state.currentMenuId":"changeMenuId",
    erjiMenudata(e){
      this.erjiMenu=e;
      console.log(this.erjiMenu);
    }
  },
  methods:{
    changeMenuId(newval,oldval){
      if(newval!=oldval){
        this.activeMenuId=newval;
      }
    },
    handleUser(){
      if(!this.userInfo){
        this.login = true;
        return
      }
    },
    handleSet(){
      if(!this.userInfo){
        this.login = true;
        return
      }
    },
    handleClose(){
      this.close();
    },
    handleChangeLogin(idx){
      this.tidx = idx;
    },
    handleCode(){
      if(!this.codeBtn) return;
      this.codeBtn = false;
      this.codeBtnText = '重新发送('+this.time+'s)';
      timer = setInterval(()=>{
        this.time--;
        if(this.time<=0){
          clearInterval(timer);
          this.codeBtnText = '获取验证码';
          this.codeBtn = true;
          this.time = 60;
        }else{
          this.codeBtnText = '重新发送('+this.time+'s)';
        }
      },1000)
    },
    handleLogin(){
      if(this.tidx===1){
        if(!this.codeInfo.phone||!this.codeInfo.code) return;
        if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.codeInfo.phone)) return this.$message.error('请输入正确的手机号');
      }else if(this.tidx===2){
        if(!this.accountInfo.account||!this.accountInfo.password) return;
      }
      if(!this.agree) return this.$message.error('请阅读并同意协议');

      this.$http.post("/login", this.dataForm)
      .then(({ data: res }) => {
        sessionStorage.removeItem("tags");
        Cookies.set("token", res.data.token);

        this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了

        // 获取菜单列表, 添加并全局变量保存
        this.$http.get("/sys/menu/nav", {
          params: {
            menuClassify: 1
          }
        }).then(({ data: res }) => {
          if (res.code !== 0) {
            Vue.prototype.$message.error(res.msg);
          }
          var menuList = res.data;

          for (var i = 0; i < menuList.length; i++) {
            var menu = {};
            if (menuList[i].url != "") {
              menu = menuList[i];
            } else if (menuList[i].children.length > 0) {
              menu = menuList[i].children[0];
            }

            // 组装路由
            var route = {
              path: "",
              component: null,
              name: "index",
              meta: {
                ...window.SITE_CONFIG["contentTabDefault"],
                menuId: menu.id,
                title: menu.name,
              },
            };
            let URL = (menu.url || "").replace(
              /{{([^}}]+)?}}/g,
              (s1, s2) => eval(s2)
            ); // URL支持{{ window.xxx }}占位符变量

            URL = URL.replace(/^\//, "").replace(/_/g, "-");
            route["path"] = route["name"] = URL.replace(/\//g, "-");
            route["component"] = () => import(`@/views/modules/${URL}`);
            this.$router.push(route);
            this.$store.state.sidebarMenuActiveName = [];

            var proute = menuList.filter(
              (item) =>
                item.children.filter((child) => child.id == menu.id)
                  .length > 0
            );

            this.$store.state.sidebarMenuActiveName.push(
              proute.length > 0 ? proute[0].name : ""
            );
            this.$store.state.sidebarMenuActiveName.push(
              route.meta.title
            );
            break;
          }
          localStorage.setItem("currentMenuIndex", 0);
          this.$store.state.currentMenuIndex = 0;
        });
      })
      .catch(() => { });

      this.close();
    },
    close(){
      this.login = false;
      this.codeBtn = true;
      this.codeInfo = {
        phone:'',
        code:''
      };
      this.accountInfo = {
        account:'',
        password:''
      };
      this.agree = false;
      clearInterval(timer);
      this.time = 60;
      this.codeBtnText = '获取验证码';
      this.tidx = 1;
    },
    
    getCaptcha() {
      this.dataForm.uuid = getUUID();
      this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/captcha?uuid=${this.dataForm.uuid}`;
    },
  },
  created () {
    this.getCaptcha();
    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
    this.erjiMenu=this.$store.state.erjismenu==null?this.$store.state.sidebarMenuList[0].children:this.$store.state.erjismenu;
 }
}
</script>

<style lang="scss" scoped>
.logo{
  img{
    width: 148px;
    height: 30px;
  }
}

.create_dialog{
  width: 100%;
  height: 42px;
  background: #2463EB;
  border-radius: 8px;
  font-family: PingFang-SC, PingFang-SC;
  font-weight: bold;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 42px;
  text-align: center;
  margin-top: 44px;
  cursor: pointer;
}

.user_info{
  width: 100%;
  padding: 24px 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #E5E7EB;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  .left{
    display: flex;
    align-items: center;
    cursor: pointer;
    img{
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
    .name{
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      span{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 14px;
        color: #111111;
        line-height: 20px;
        &.type{
          font-weight: 400;
          font-size: 12px;
          color: #707784;
          line-height: 17px;
          margin-top: 2px;
        }
      }
    }
  }
  .right{
    cursor: pointer;
    img{
      width: 18px;
      height: 18px;
    }
  }
}

.loginBox{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  .box{
    width: 712px;
    height: 418px;
    background: #FFFFFF;
    border-radius: 16px;
    display: flex;
    .left{
      width: 288px;
      height: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }

    .right{
      width: calc(100% - 288px);
      height: 100%;
      padding: 85px 48px 31px 56px;
      box-sizing: border-box;
      position: relative;
      .close{
        width: 12px;
        height: 12px;
        position: absolute;
        top: 26px;
        right: 22px;
        cursor: pointer;
      }
      .tabs{
        width: 100%;
        display: flex;
        align-items: center;
        margin-left: -24px;
        .t_pre{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #111111;
          line-height: 20px;
          padding-bottom: 8px;
          position: relative;
          width: 118px;
          text-align: center;
          cursor: pointer;
          &:last-child{
            margin-left: 0;
          }
          &.active{
            font-weight: bold;
            color: #2463EB;
            &::after{
              content: '';
              width: 72px;
              height: 2px;
              background: #2463EB;
              position: absolute;
              bottom: 0;
              left: 50%;
              margin-left: -36px;
            }
          }
        }
      }
      .content{
        margin-top: 14px;
        .c_pre{
          height: 44px;
          margin-top: 20px;
          background: #FFFFFF;
          border-radius: 6px;
          border: 1px solid #E5E7EB;
          display: flex;
          align-items: center;
          .left{
            width: 214px;
          }
          .cp_right{
            width: calc(100% - 214px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            &::before{
              content: '';
              width: 1px;
              height: 21px;
              background: rgba(36,99,235,0.21);
              position: absolute;
              top: 50%;
              margin-top: -10.5px;
              left: 0;
            }
            span{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #3C82F6;
              line-height: 20px;
            }
          }
        }
      }
      .login{
        width: 100%;
        height: 46px;
        background: rgba(36, 99, 235, .5);
        border-radius: 6px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 46px;
        text-align: center;
        margin-top: 30px;
        letter-spacing: 1px;
        cursor: pointer;
        &.active{
          background: rgba(36, 99, 235, 1);;
        }
      }
      .agree{
        margin-top: 36px;
      }
    }
  }
}

::v-deep .el-input__inner{
  border: none !important;
  width: calc(100% - 2px);
  margin-left: 2px;
}
::v-deep .el-checkbox__label{
  font-weight: 400;
  font-size: 12px !important; 
  color: #9CA3AF !important;
  line-height: 17px;
}
</style>
