<template>
  <div class="login-wrap">
    <MetaCard></MetaCard>
    <meta-card style="width:100px;height:100px;"></meta-card>
    <hello></hello>
    <div class="userBox">
      <div
        class="userItem"
        v-for="(item, index) in userInfoList"
        :key="item"
        @click="userActive = index"
        :class="userActive == index ? 'userActive' : ''"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="login" @click="login()">登录</div>
    <div>
      <div
        class="list"
        v-for="item in dataList"
        :key="item"
        @click="gotoPage(item.router)"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/service/requestApi";
import { getMenu } from "@/service/componentsRestApi";
import {
  routerListAddParentInfoByMenus,
  getRouterList,
  routerPackag,
  routerList,
} from "@/common/utils/createRouter";

import { Toast } from "vant";
export default {
  name: "Login",
  data() {
    return {
      userActive: -1,
      dataList: [
        {
          title: "我的异常",
          router: "Abn030",
        },
        {
          title: "异常记录",
          router: "Abn110",
        },
        {
          title: "处理部门统计",
          router: "Abn211",
        },
        {
          title: "异常类别分析",
          router: "Abn270",
        },
        {
          title: "异常关闭率统计",
          router: "Abn240",
        },
        {
          title: "异常发生趋势",
          router: "Abn251",
        },
        {
          title: "异常区域分析",
          router: "Abn262",
        },
        {
          title: "一览看板",
          router: "Abn814",
        },
        {
          title: "作业单元看板",
          router: "Abn412",
        },
        {
          title: "隐私协议",
          router: "Privacy",
        },
      ],
      userInfoList: [
        {
          name: "提拉米苏",
          phone: "17338119091",
          password: "123456",
        },
        {
          name: "焕焕",
          phone: "13261995790",
          password: "123456",
        },
        {
          name: "倩倩",
          phone: "18839717989",
          password: "123456",
        },
        {
          name: "成成",
          phone: "13521740375",
          password: "111111",
        },
        {
          name: "雪",
          phone: "13116060177",
          password: "123456",
        },
        {
          name: "生产账号",
          phone: "18522912393",
          password: "LDC3079"
        }
      ],
    };
  },
  methods: {
    gotoPage(routerName) {
      this.$routerNavigateTo({ name: routerName });
    },
    login() {
      if (this.userActive >= 0) {
        let index = this.userActive,
          userInfoList = this.userInfoList;
        let params = {
          loginType: "1",
          phone: userInfoList[index].phone,
          oldpwd: userInfoList[index].password,
        };
        login(params).then((rest) => {
          if (rest) {
            sessionStorage.setItem("token", rest.data);
            let para = { params: encodeURI(JSON.stringify({ boltype: "2" })) };
            getMenu(para).then((res) => {
              Toast.success("登陆成功");
              this.$setSessionStorage("Enums", JSON.stringify(res.data.enums));
              this.$setSessionStorage("menu", JSON.stringify(res.data.menus));
              this.$setSessionStorage(
                "loginUserInfo",
                JSON.stringify(res.data.loginUserInfo)
              );
              this.$setSessionStorage(
                "buttons",
                JSON.stringify(res.data.bottons)
              );

              routerListAddParentInfoByMenus();
              routerPackag(getRouterList(res.data.menus, routerList));
            });
          }
        });
      }
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.login-wrap {
  height: 100%;
  input {
    display: block;
    width: 80%;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    border-radius: 5px;
    margin: 10px auto;
    border: 1px solid #ccc;
    @include bg_border_color;
  }
  .login {
    width: 80%;
    height: 30px;
    line-height: 30px;
    margin: 10px auto;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    @include bg_color_theme;
  }
  .list {
    width: calc(100% - 30px);
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    margin: 0 15px 5px 15px;
    background-color: rgba($color: #000000, $alpha: 0.3);
    border-radius: 5px;
    box-sizing: border-box;
  }
  .userBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .userItem {
      width: 150px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin: 5px;
    }
    .userActive {
      border-color: skyblue;
      color: #1d2088;
    }
  }
}
</style>
