<template>
  <div style="text-align: center">
    <!--    <h4>先选择本次登录人员的身份，再进入相应的系统 😅</h4>-->
    <h4>欢迎进入Spring Security 配套 Workflow工作流模块</h4>
    <div v-if="!token">
      <el-input v-model="username"/>
      <el-button @click="getToken">登录</el-button>
    </div>
    <div class="work-panel">
      <!--      <div class="user">-->
      <!--        <el-button type="primary" round size="small" @click="showRolePicker()" icon="el-icon-user">选择本次登录者</el-button>-->
      <!--        <div v-if="loginUser !== '' && loginUser !== null">-->
      <!--          <span>{{ loginUser.name }}</span>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="panel">
        <div class="panel-item" @click="to('/workSpace')">
          <div>
            <i class="el-icon-s-platform"></i>
            <span>进入工作区</span>
          </div>
          <p>
            您可以发起、处理及查看审批，进行日常工作任务
          </p>
        </div>
        <div class="panel-item" @click="to('/formsPanel')">
          <div>
            <i class="el-icon-s-custom"></i>
            <span>进入管理后台</span>
          </div>
          <p>
            审批工作流创建 、编辑及其他设置操作，均可以在后台进行
          </p>
        </div>
      </div>
    </div>


    <!--    <test type="user" ref="orgPicker" :v-model="select" :value="select" @dengjie="dengjie"-->
    <!--                @ok="selected"></test>-->


  </div>
</template>

<script>
import Test from "@/components/common/Test";
import axios from "axios";

export default {
  name: "Index",
  components: {Test},
  data() {
    return {
      token: localStorage.getItem("token"),
      username: null,
      select: [],
      roleData: [
        {
          roleId: 1,
          roleName: "角色名称",
        }
      ],
      deptData: [
        {
          deptId: 1,
          deptName: "角色名称",
        }
      ],
      loginUser: {
        id: 381496,
        name: "clay",
        selected: false,
        sex: null,
        type: "user"
      }
    }
  },
  mounted() {
    console.log(this.select)
    let user = sessionStorage.getItem("user")
    if (user !== null && user !== '') {
      this.loginUser = JSON.parse(user)
      this.select.push(this.loginUser)
    }
  },
  methods: {


    getToken() {
      // let item = localStorage.getItem("token");
      // if (item != null) {
      //     return
      // }
      axios.post(
          // "http://security-react.mytwins.top/auth/login",
          // getBaseUrl()+"/auth/login",
          "http://gateway.mytwins.top/auth/login",
          // "http://localhost:8000/auth/login",
          {
            code: "string",
            password: "926425",
            // username: "admin",
            username: this.username,
            uuid: "string"
          }
      ).then(res => {
        console.log(res)
        this.token = res.data.data
        localStorage.setItem("token", this.token)
      })
    },


    //显示角色选择框
    showRolePicker() {
      this.$refs.orgPicker.visible = true
    },
    selected(select) {
      this.select = select
      this.loginUser = select.length > 0 ? select[0] : ''
      this.showUserSelect = false
      sessionStorage.setItem("user", JSON.stringify(this.loginUser))
    },
    to(path) {
      if (this.loginUser === null || this.loginUser === '') {
        this.$message.warning("请先选择一个人员身份进行登录")
      } else {
        this.$router.push(path)
      }
    }
  }
}
</script>

<style lang="less" scoped>

h4 {
  margin: 0 auto;
  color: #38adff;
  margin-top: 150px;
}

.user {
  position: absolute;
  left: 20%;
  margin-top: 20px;

  div {
    margin-left: 20px;
    display: inline-block;
  }
}

.work-panel {
  text-align: left;
  display: flex;
  justify-content: center;
  position: relative;

  .panel {
    margin-top: 80px;
    max-width: 700px;
    display: flex;
    justify-content: center;

    .panel-item {
      cursor: pointer;
      margin: 0 40px;
      width: 250px;
      padding: 10px;
      display: inline-block;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #ffffff;
      box-shadow: 1px 1px 8px 0 #b0b0b1;

      &:hover {
        border: 1px solid #2594ff;
        box-shadow: 1px 1px 13px 0 #a4a4a5;
      }

      div:nth-child(1) {
        color: #7a7a7a;
        font-weight: bold;
        height: 60px;
        line-height: 60px;
        font-size: large;
        border-bottom: 1px solid #cccdcd;

        span {
          margin-left: 30px;
        }
      }

      i {
        padding: 8px;
        color: #ffffff;
        background: #2594ff;
        font-size: 25px;
        border-radius: 5px;
      }

      .el-icon-s-platform {
        background: rgb(255, 148, 62);
      }

      p {
        padding: 10px 0;
        color: #7a7a7a;
        font-size: medium;
      }
    }
  }

}
</style>
